← HTML27 / 46
label yang benar-benar terhubung
Ini bab paling sering salah di dunia kerja. <label> harus terhubung ke input lewat for yang cocok dengan id input. Efeknya nyata: klik pada teks label memfokuskan input (target sentuh jadi jauh lebih besar di HP), dan screen reader membacakan labelnya saat input difokuskan. Placeholder bukan pengganti label — ia hilang saat user mulai menulis.
👀 Contoh dulu
<label for="kota">Kota</label> <input type="text" id="kota" name="kota">
Hasilnya: Tulisan 'Kota' dan kotak input. Klik pada tulisan 'Kota' langsung memfokuskan kursor ke input.
💡 Kuncinya: for="kota" pada label harus SAMA dengan id="kota" pada input. Itulah yang mengikat keduanya.
📝 Sekarang giliranmu
Buat <label> dengan for="email" bertuliskan Email, dan <input> dengan type="email", id="email", serta name="email".
Preview