Belajar HTML - Formulir HTML dan Kontrol Input
Episode ini membedah formulir HTML: elemen form dengan action dan method, kontrol input dari teks sampai radio, textarea, select, dan button, lengkap dengan praktik form login.
#Pendahuluan
Sejauh ini halaman kalian hanya menampilkan informasi. Episode 8 membuka pintu interaksi dengan pengguna melalui formulir HTML dan kontrol input — cara mengumpulkan teks, pilihan, dan aksi dari pengunjung halaman.
Formulir adalah gerbang banyak fitur web: login, pencarian, pendaftaran, dan komentar. Memahami form, input, textarea, select, dan button adalah keterampilan yang akan terus kalian pakai, termasuk saat membangun validasi di episode 9 dan 17.
#Elemen form
#action dan method
form membungkus semua kontrol dan menentukan ke mana data dikirim:
<form action="/proses-pendaftaran" method="post">
<p>Isi data di bawah ini.</p>
</form>actionberisi alamat tujuan pengiriman data.methodmenentukan cara pengiriman:getataupost.
Dengan method="get", data terlihat di URL dalam bentuk query string, cocok untuk pencarian. Dengan method="post", data dikirim di badan permintaan HTTP, cocok untuk data sensitif seperti kata sandi.
#Atribut name
Setiap kontrol yang datanya ingin dikirim wajib punya atribut name. Pasangan name dan nilai yang diisi pengguna dikirim sebagai data formulir — kontrol tanpa name diabaikan.
#Kontrol Input Teks
#input type="text" dan password
input adalah kontrol paling fleksibel; perilakunya bergantung pada type:
<p>
<label>Nama pengguna</label>
<input type="text" name="nama" maxlength="50">
</p>
<p>
<label>Kata sandi</label>
<input type="password" name="sandi">
</p>type="password"menyembunyikan karakter yang diketik.maxlengthmembatasi jumlah karakter.
Praktik terbaik penulisan label yang benar akan kita bahas tuntas di episode 9.
#Kontrol Pilihan dan Teks Panjang
#checkbox dan radio
Untuk pilihan biner dan pilihan tunggal:
<p>
<label>
<input type="checkbox" name="setuju" value="ya">
Saya setuju dengan ketentuan.
</label>
</p>
<p>
<label>
<input type="radio" name="ukuran" value="kecil">
Ukuran kecil
</label>
</p>
<p>
<label>
<input type="radio" name="ukuran" value="besar">
Ukuran besar
</label>
</p>Radio dengan name yang sama membentuk satu grup — hanya satu yang bisa dipilih.
#select dan textarea
select membuat menu pilihan turun; textarea untuk teks multi-baris:
<p>
<label>Kota</label>
<select name="kota">
<option value="jkt">Jakarta</option>
<option value="bdg">Bandung</option>
</select>
</p>
<p>
<label>Pesan</label>
<textarea name="pesan" rows="4" cols="40"></textarea>
</p>rows dan cols di textarea menentukan tinggi dan lebar awal. Textarea menampung teks kosong di antara tag pembuka dan penutup sebagai nilai awal.
#Elemen button
#Tiga Tipe Tombol
button memiliki tiga nilai type:
submit: mengirim formulir, nilai default.reset: mengosongkan semua kontrol.button: tidak melakukan apa pun sendiri — untuk dihubungkan dengan JavaScript.
<button type="submit">Kirim</button>
<button type="reset">Bersihkan</button>
<button type="button">Hitung Total</button>Tombol submit yang tidak menyebut type tetap berperilaku sebagai submit. Untuk tombol yang akan diisi JavaScript, selalu tulis type="button" secara eksplisit.
#Latihan: Formulir Login
Gabungkan kontrol yang sudah dipelajari:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Masuk</title>
</head>
<body>
<h1>Masuk ke Akun</h1>
<form action="/masuk" method="post">
<p>
<label>Nama pengguna</label>
<input type="text" name="nama" maxlength="30">
</p>
<p>
<label>Kata sandi</label>
<input type="password" name="sandi">
</p>
<p>
<label>
<input type="checkbox" name="ingat" value="ya">
Ingat saya
</label>
</p>
<p>
<button type="submit">Masuk</button>
</p>
</form>
</body>
</html>Setelah halaman tampil, buka DevTools dan periksa objek form lewat konsol dengan document.forms[0] untuk melihat properti formulir dan kontrolnya.
#Penutup
Episode 8 membuat halaman kalian menerima masukan: form dengan action dan method, input dengan berbagai type, textarea, select, checkbox, radio, dan button dengan tiga tipe.
Inti yang harus dibawa pulang:
formmembungkus kontrol;actiondanmethodmenentukan tujuan pengiriman.- Kontrol tanpa
nametidak mengirim data. typepadainputmenentukan perilaku;typepadabuttonmenentukan aksi.- Radio dengan
namesama membentuk satu grup. placeholderhanya contoh teks, bukan penggantilabel.
Di episode 9 selanjutnya kita akan membahas label, fieldset, dan aksesibilitas form — menghubungkan label dengan kontrol, mengelompokkan pilihan dengan fieldset dan legend, serta kesalahan yang sering merusak aksesibilitas formulir.