Estimasi Waktu Baca: 5 menit

Pemanasan

Form merupakan elemen penting yang tak jarang ditemui pada suatu website. Sama halnya dengan formulir dalam kehidupan sehari-hari, form digunakan untuk mendapatkan data dari pengguna.

Form sering kita jumpai pada website yang di dalamnya memiliki fitur register atau pendaftaran akun. Saya yakin para pembaca di sini sudah pernah bertemu dengan elemen ini seperti saat mendaftar akun di media sosial.

Baik tanpa basa-basi lagi langsung saja kita ke materi.

Membuat Form di HTML

Untuk membuat form di HTML kita memerlukan tag <form> yang mana pada tag ini kita akan membutuhkan dua atribut khusus dan wajib digunakan antara lain:

  • action – berfungsi untuk menentukan aksi atau tindakan yang akan dilakukan ketika data dikirim. Atribut ini akan mengirim data form ke alamat URL yang kita definisikan sendiri nantinya. Jadi nilai dari atribut action merupakan alamat URL dari suatu file yang akan memproses data form tersebut.
  • method – digunakan untuk menentukan metode apa yang akan digunakan untuk mengirim data form. Terdapat dua nilai yang perlu kalian ingat ketika menggunakan atribut ini, yaitu POST dan GET.

<!DOCTYPE html>
<html>
<head>
	<title>Belajar Form di HTML</title>
</head>
<body>
	<form action="proses.php" method="POST">
		
	</form>
</body>
</html>

Kode di atas tidak akan menampilkan apa-apa ketika kita jalankan pada browser.

Nah agar kita dapat menampilkan sebuah form yang nyata kita perlu tahu dulu mengenai field di HTML.

Mengenal Field di HTML

Field merupakan ruas atau bidang tempat kita akan mengisi data. Salah satu tag yang sering digunakan untuk membuat field di HTML adalah tag <input>.


<!DOCTYPE html>
<html>
<head>
	<title>Belajar Form di HTML</title>
</head>
<body>
	<form action="proses.php" method="POST">
		<input type="text" name="nama">
	</form>
</body>
</html>

Kode di atas akan menghasilkan field yang digunakan untuk mengisi nama.

Namun bagaimana agar para pengguna tahu bahwa field tersebut diperuntukkan untuk menulis nama?

Untuk mengatasi masalah tersebut maka kita perlu menambahkan suatu label di atas tag <input> dengan menggunakan tag <label>.


	<form action="proses.php" method="POST">
	<label>Nama: </label>
		<input type="text" name="nama">
	</form>

Keluaran:

Pada contoh di atas kita bisa melihat ada dua atribut yaitu type dan name. Kedua atribut ini memang sering disandingkan dengan tag <input> ketika kita membuat form.

Lantas apa guna keduanya?

Untuk mengetahuinya silahkan lanjutkan membaca 🙂

Atribut Type

Atribut type memiliki banyak sekali nilai, namun karena ini pembahasan mengenai form maka akan saya informasikan nilai-nilai yang sering digunakan untuk membuat form, antara lain:

  • text – menghasilkan field untuk mengisi data berupa teks
  • email – menghasilkan field untuk mengisi data khusus email
  • password – menghasilkan field untuk mengisi data khusus password atau kata sandi, field ini nantinya hanya menampilkan bintang atau bulatan yang berfungsi untuk menutupi nilai asli. Namanya juga password.
  • radio – menghasilkan radio button, dengan menggunakan input type ini para pengguna nantinya akan disuruh memilih salah satu dari dua atau lebih pilihan yang ada.
  • checkbox – menghasilkan checkbox yang membuat pengguna dapat memilih lebih dari satu pilihan dari banyak daftar pilihan yang disediakan
  • number – menghasilkan field untuk mengisi data khusus angka
  • date – menghasilkan field untuk mengisi data khusus tanggal
  • file – menghasilkan field untuk upload file
  • submit – menghasilkan tombol submit

<!DOCTYPE html>
<html>
<head>
	<title>Belajar Form di HTML</title>
</head>
<body>
	<form action="proses.php" method="POST">
		<label> Tipe text: </label>
		<input type="text" name="nama"><br />

		<label> Tipe email: </label>
		<input type="email" name="email"><br />

		<label> Tipe password: </label>
		<input type="password" name="password"><br />

		<label> Tipe radio: </label>
		<input type="radio" name="gender">Pria
		<input type="radio" name="gender">Wanita<br />

		<label> Tipe checkbox: </label>
		<input type="checkbox" name="hobi">Sepak Bola
		<input type="checkbox" name="hobi">Bulutangkis
		<input type="checkbox" name="hobi">Basket
		<input type="checkbox" name="hobi">Renang <br />

		<label> Tipe number: </label>
		<input type="number" name="usia"><br />

		<label> Tipe date: </label>
		<input type="date" name="tanggal"><br />

		<label> Tipe file: </label>
		<input type="file" name="berkas"><br />

		<label> Tipe submit: </label>
		<input type="submit" name="simpan">
	</form>
</body>
</html>

Keluaran:

Atribut Name

Atribut ini digunakan sebagai pengenal untuk nama elemen terkait. Elemen ini akan sangat berguna ketika kalian sudah mulai belajar bahasa pemrograman PHP.


<!DOCTYPE html>
<html>
<head>
	<title>Belajar Form di HTML</title>
</head>
<body>
	<form action="proses.php" method="POST">
		<label> Nama: </label>
		<input type="text" name="nama">
	</form>
</body>
</html>

Karena digunakan sebagai pengenal suatu elemen maka ia tidak akan menampilkan apapun ketika dijalankan di browser.

Selain dua atribut di atas tag <input> juga terkadang disisipkan beberapa atribut berikut:

Atribut Value

Atribut ini berfungsi untuk memberikan nilai default untuk elemen


<!DOCTYPE html>
<html>
<head>
	<title>Belajar Form di HTML</title>
</head>
<body>
	<form action="proses.php" method="POST">
		<label> Nama: </label>
		<input type="text" name="nama" value="Kuro Neko">
	</form>
</body>
</html>

Keluaran:

Atribut placeholder

Atribut placeholder berfungsi untuk memberikan teks bantuan di dalam field. Teks ini akan muncul ketika field dalam keadaan kosong, jika field mulai diisi maka placeholder otomatis akan disembunyikan, namun akan tampil kembali bila kosong.


<!DOCTYPE html>
<html>
<head>
	<title>Belajar Form di HTML</title>
</head>
<body>
	<form action="proses.php" method="POST">
		<label> Nama: </label>
		<input type="text" name="nama" placeholder="Masukkan nama lengkap">
	</form>
</body>
</html>

Hasil:

Atribut Required

Atribut yang akan menghasilkan syarat supaya elemen terkait wajib diisi atau dilarang untuk dikosongi.


<!DOCTYPE html>
<html>
<head>
	<title>Belajar Form di HTML</title>
</head>
<body>
	<form action="proses.php" method="POST">
		<label> Nama: </label>
		<input type="text" name="nama" required><br />
		<input type="submit" name="simpan">
	</form>
</body>
</html>

Keluaran:

Sebenarnya masih banyak lagi atribut yang dapat disisipkan ke dalam elemen <input>, namun di sini hanya saya jelaskan yang sering digunakan saja.

Elemen Lain Untuk Membuat Form di HTML

Selain menggunakan <input> ada juga beberapa tag atau elemen lain yang sering digunakan dalam membuat form, antara lain:

Tag <textarea> HTML

Tag atau elemen <textarea> merupakan sebuah field yang mampu menampung beberapa baris kata atau kalimat. Karena kelebihannya mampu menampung banyak baris kalimat, maka textarea sering digunakan sebagai kolom komentar, keterangan, catatan dan karena ini berhubungan dengan form, maka kegunaan <textarea> adalah sebagai field untuk mengisi data alamat, atau data-data lain yang sangat panjang.


<!DOCTYPE html>
<html>
<head>
	<title>Belajar Form di HTML</title>
</head>
<body>
	<form action="proses.php" method="POST">
		<label> Alamat: </label>
		<textarea name="alamat"></textarea>
	</form>
</body>
</html>

Keluaran:

Tag <select> HTML

Tag <select> merupakan sebuah representasi dari pengaturan yang digunakan untuk memilih deretan opsi atau pilihan baik itu satu ataupun lebih dari itu. Elemen ini nantinya akan menghasilkan semacam dropdown yang berisi nilai-nilai yang kita berikan sebagai pilihan untuk para pengguna.


<!DOCTYPE html>
<html>
<head>
	<title>Belajar Form di HTML</title>
</head>
<body>
	<form action="proses.php" method="POST">
		<label> Kota Asal: </label>
		<select name="kota">
			<option value="bangkalan">Bangkalan</option>
			<option value="bandung">Bandung</option>
			<option value="jakarta">Jakarta</option>
			<option value="malang">Malang</option>
			<option value="surabaya">Surabaya</option>
		</select>
	</form>
</body>
</html>

Keluaran:

Penutup

Sebenarnya untuk materi form pada artikel ini tidak semua saya jelaskan, saya hanya membeberkan hal-hal dasarnya saja, karena jujur materi form sangat banyak dan tidak memungkinkan bila dijadikan satu artikel.

Maka dari itu khusus untuk tutorial form sudah saya buatkan bab tersendiri yang dapat kalian baca di sini.