Form adalah bagian halaman tempat pengunjung mengisi data: nama, email, kata sandi. Bayangin formulir kertas: ada tulisan "Nama:" dan kotak kosong di sebelahnya. Di HTML, tulisan itu <label>, kotaknya <input>, dan seluruh formulirnya dibungkus <form>.
🧪 Tebakan cepat: di form pendaftaran, kamu klik tulisan "Email", bukan kotaknya. Kursornya pindah ke mana? Tebak dulu, lalu cek di bagian "Satu kolom isian".
Satu kolom isian: label dan input
<form>
<label for="nama">Nama</label>
<input type="text" id="nama" name="nama">
</form>
<form>membungkus semua isian. Semua kolom ditaruh di dalamnya.<input>adalah kotak isiannya. Tag ini gak punya tag penutup, jadi jangan tulis</input>.id="nama"adalah nama unik kotak ini di halaman.<label for="nama">adalah tulisan nama kotaknya. Nilaiforharus sama persis denganidkotak yang dimaksud, huruf besar-kecilnya juga. Itu yang menyambungkan keduanya: klik tulisan "Nama", kursor langsung masuk ke kotaknya, dan screen reader membacakan "Nama" waktu kotak itu dipilih.name="nama"adalah nama data ini waktu form dikirim ke server.
Gampangnya: id ditulis di input, for ditulis di label, nilainya kembar. name urusan pengiriman data.
type menentukan jenis kotak
<label for="email">Email</label>
<input type="email" id="email" name="email">
<label for="sandi">Kata sandi</label>
<input type="password" id="sandi" name="sandi">
Type yang paling sering dipakai:
text: teks biasa. Ini juga yang dipakai kalautypegak ditulis.email: alamat email. Browser ngecek ada@-nya sebelum form dikirim.password: isinya tampil sebagai titik-titik.number: cuma angka, dan HP menampilkan keyboard angka.date: pemilih tanggal.tel: nomor telepon.
Teks panjang pakai <textarea>
<input> cuma satu baris. Buat isian panjang kayak bio atau pesan, pakai <textarea>. Beda dengan <input>, textarea punya tag penutup:
<label for="bio">Bio</label>
<textarea id="bio" name="bio"></textarea>
Pasangannya tetap sama: for di label, id di textarea.
⚠️ Jebakan yang sering ketemu
fordanidbeda tulisan.for="nama"denganid="Nama"gak nyambung, karena huruf besar-kecil ikut dihitung.- Dua kotak dengan
idyang sama.idharus unik di satu halaman. Kalau kembar, label-nya nyambung ke kotak yang salah. placeholderdipakai sebagai pengganti label. Placeholder hilang begitu orang mulai ngetik, jadi tetap pasang<label>.- Lupa
name. Kotaknya kelihatan, tapi isinya gak ikut terkirim. type="number"buat nomor HP. Angka nol di depan bisa hilang. Pakaitype="tel".- Tag pembuka gak ditutup
>.<input type="text"tanpa>bikin baris berikutnya ikut kebaca jadi bagian input.
TL;DR: <form> membungkus semua isian. Tiap kolom adalah <label for="x"> plus <input id="x">, dengan for dan id yang kembar. <input> gak punya tag penutup, dan type-nya menentukan jenis kotak (text, email, password, number, date, tel). Isian panjang pakai <textarea>, yang punya tag penutup. name adalah nama data waktu form dikirim.
