Kolom isian yang tidak bernama adalah teka-teki bagi semua orang. Pengguna sungguhan menebak dari konteks, pengguna pembaca layar hanya mendengar “edit text, kosong” tanpa petunjuk apa pun. Elemen label menutup celah itu: label adalah nama resmi sebuah kontrol, yang terlihat di layar sekaligus diumumkan alat bantu.

Mengikat label ke kontrol bisa dilakukan dua cara, dan keduanya sama sahnya.

Dua Pola Penulisan #

Pola pertama memakai atribut for yang menunjuk id kontrol; pola kedua langsung membungkus kontrol di dalam label:

html 
<div>
  <label for="nama">Nama peserta</label>
  <input type="text" id="nama" name="nama">
</div>

<div>
  <label>
    Alamat email
    <input type="email" name="email">
  </label>
</div>

Hasil Render:

Mari kita telaah kode di atas:

  1. <label for="nama"> + id="nama": nilai for harus persis sama dengan id kontrol — inilah tali yang mengikat keduanya. Pola ini cocok saat label dan kontrol terpisah letaknya karena tata letak CSS.
  2. <label> membungkus <input>: tanpa for dan id, kontrol yang berada di dalam label otomatis terikat. Pola ini ringkas dan bebas risiko id salah tulis.
  3. Pola campuran juga sah: bungkus kontrol lalu tetap pasang for/id — berguna agar markup tetap eksplisit.

Klik Label = Aktifkan Kontrol #

Label bukan sekadar hiasan teks. Mengklik label menempatkan fokus ke kontrol yang diikatnya — dan untuk checkbox serta radio, klik label langsung mencentangnya. Konsekuensinya besar di ponsel: area yang bisa diketik meluas dari kotak kecil berukuran belasan piksel menjadi seluruh baris teks label. Jari pengguna berterima kasih diam-diam.

Bagi pengguna pembaca layar, label adalah nama yang diumumkan setiap kali kontrol menerima fokus. Tanpa label, kontrol hanya diumumkan jenisnya (“edit text”), bukan maksudnya. Karena itu aturannya tegas: semua kontrol interaktif wajib punya label.

Pola Bungkus untuk Checkbox dan Radio #

Dua kontrol ini paling sering memakai pola bungkus karena teksnya memang bagian dari pilihan:

html 
<label>
  <input type="radio" name="ukuran" value="sedang">
  Sedang (240 ml)
</label>
<label>
  <input type="radio" name="ukuran" value="besar">
  Besar (350 ml)
</label>

Mari kita telaah kode di atas:

  1. input berada paling depan dalam label: pilihan tampil sebagai [ (o) Sedang (240 ml) ] — seluruh baris dapat diklik.
  2. Teks label sekaligus keterangan pilihan: pembaca layar mengumumkan “Sedang, radio button, 2 dari 2” — nama dan posisi dalam satu tarikan.

Ringkasan #

  • Setiap kontrol form wajib berlabel — via for/id atau via pola bungkus.
  • Klik label mengaktifkan kontrol; area sentuh yang luas penting untuk pengguna ponsel.
  • Checkbox dan radio paling cocok memakai pola bungkus: teks pilihan sekaligus label.
  • aria-label hanya untuk kondisi tanpa label visual; placeholder bukan pengganti label.