Pada chapter sebelumnya, label dan input muncul sebagai pasangan di dalam anatomi form. Chapter ini menjadikan pasangan tersebut topik utama, karena kualitas form sangat ditentukan oleh kualitas ikatan keduanya. Label yang tidak terikat dengan benar hanya berupa teks biasa, dan kontrol tanpa label menyisakan tebakan bagi pengunjung. Kita akan mempelajari dua cara mengikat keduanya, alasan aksesibilitas di baliknya, dan kesalahan id yang paling sering terjadi.

Tiga Manfaat Label #

Label melayani tiga fungsi sekaligus, dan ketiganya hanya bekerja bila label terikat secara sah dengan kontrolnya:

  • Petunjuk visual: teks label menjelaskan data apa yang diharapkan pada kontrol.
  • Area aktif yang lebih luas: klik pada label diperlakukan browser sebagai klik pada kontrolnya, sehingga target sentuhan atau klik menjadi lebih besar.
  • Nama aksesibel: pembaca layar (screen reader) membacakan label ketika kontrol menerima fokus; tanpa ikatan label, kontrol dibacakan tanpa penjelasan.

Fungsi ketiga menjadikan label sebuah kontrak aksesibilitas: penulis halaman berjanji bahwa setiap kontrol punya nama yang dapat dibacakan, dan browser menyalurkan nama tersebut ke teknologi bantu. Kontrak inilah alasan label wajib ada, bukan sekadar saran gaya penulisan.

Asosiasi Eksplisit: for dan id #

Cara pertama mengikat label ke kontrol adalah asosiasi eksplisit: atribut for pada label menunjuk nilai atribut id pada kontrol:

html Asosiasi eksplisit 
<p>
  <label for="email">Alamat email</label>
  <input type="text" id="email" name="email">
</p>

Output yang Dihasilkan:

text 
Jendela browser menampilkan:
  - Teks "Alamat email" di sisi kiri kolom isian
  - Klik pada teks tersebut memindahkan fokus ke kolom isian

Mari kita telaah perannya:

  1. Atribut for="email": pernyataan label bahwa dirinya menjelaskan elemen ber-id bernama email.
  2. Atribut id="email": identitas unik kontrol di dalam dokumen; nilai inilah yang dicari atribut for.
  3. Atribut name="email": kunci data saat form dikirim — beda peran dengan id, sehingga keduanya dibiarkan bersama pada input.

Cara eksplisit memberi kebebasan menempatkan label dan kontrol di posisi markup yang berjauhan, karena ikatan dibuat lewat referensi, bukan kedekatan posisi. MDN juga menganjurkan cara eksplisit agar kompatibel dengan alat bantu. Syarat satu-satunya yang kritis: nilai for harus sama persis dengan sebuah id.

Asosiasi Implisit: Kontrol di Dalam Label #

Cara kedua adalah asosiasi implisit: kontrol ditaruh di dalam elemen label, sehingga tidak ada for maupun id yang dibutuhkan:

html Asosiasi implisit 
<p>
  <label>
    Nama lengkap
    <input type="text" name="nama">
  </label>
</p>

Output yang Dihasilkan:

text 
Jendela browser menampilkan:
  - Teks "Nama lengkap" diikuti kolom isian dalam satu baris
  - Klik pada teks tersebut memindahkan fokus ke kolom isian

Browser menetapkan kontrol yang berada di dalam label sebagai labeled control milik label tersebut, sehingga ikatan terbentuk otomatis dan tak mungkin salah pasang. Kekurangannya, label dan kontrol menjadi satu kesatuan markup: kontrol harus benar-benar berada di dalam label, dan struktur ini membatasi pola tata letak tertentu. Untuk kontrol ber-nama yang kompleks, cara eksplisit lebih mudah dirawat.

Contoh: Dua Cara dalam Satu Form #

File berikut merangkai kedua cara dalam satu form berlangganan kabar Toko Budi. Simpan sebagai label-input-dua-cara.html, lalu buka di browser:

html label-input-dua-cara.html 
<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Dua Cara Asosiasi Label</title>
</head>
<body>
  <h1>Berlangganan Kabar Toko Budi</h1>
  <form>
    <p>
      <label for="email">Alamat email</label>
      <input type="text" id="email" name="email">
    </p>
    <p>
      <label>
        Nama lengkap
        <input type="text" name="nama">
      </label>
    </p>
    <p>
      <input type="submit" value="Daftar">
    </p>
  </form>
</body>
</html>

Output yang Dihasilkan:

text 
Jendela browser menampilkan:
  - Kolom "Alamat email" dengan label di kirinya
  - Kolom "Nama lengkap" dengan label yang menyertainya
  - Tombol "Daftar" di bagian bawah

Berikut peran setiap bagian kode:

  1. Baris 12-13: asosiasi eksplisit — label for="email" terikat ke input ber-id="email".
  2. Baris 16-19: asosiasi implisit — input berada di dalam label, tanpa for dan tanpa id.
  3. Baris 22 (input type="submit"): tombol yang memicu pengiriman form.
  4. Kedua input: sama-sama membawa name, sehingga nilai keduanya ikut terkirim.

Dua cara asosiasi di atas menghasilkan perilaku yang sama ketika dibaca browser, sehingga pilihan antar keduanya menjadi soal struktur dan kebiasaan tim. Kebiasaan yang sehat: pakai cara eksplisit sebagai pola baku, dan simpan cara implisit untuk label pendek yang menyertainya rapat. Chapter berikutnya mengenal jenis-jenis input yang paling sering dipakai, dimulai dari text dan password.

Referensi resmi untuk pendalaman:

Berkas Sumber

Berkas pendukung halaman ini dapat diunduh dan dijalankan langsung sesuai penjelasan di atas.

label-input-dua-cara.html

Unduh berkas
html 
<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Dua Cara Asosiasi Label</title>
</head>
<body>
  <h1>Berlangganan Kabar Toko Budi</h1>
  <form>
    <p>
      <label for="email">Alamat email</label>
      <input type="text" id="email" name="email">
    </p>
    <p>
      <label>
        Nama lengkap
        <input type="text" name="nama">
      </label>
    </p>
    <p>
      <input type="submit" value="Daftar">
    </p>
  </form>
</body>
</html>