HTML label: Menghubungkan for dan id serta Memperluas Area Klik

HTML <label> mengasosiasikan nama kontrol formulir dengan teks yang terlihat dan teknologi bantu. Sambungkan for label ke id kontrol, atau letakkan kontrol di dalam label. Mengklik teks yang terkait dapat memfokuskan input atau mengaktifkan/menonaktifkan kotak centang.

Sambungkan kontrol secara eksplisit dengan for dan id

Atribut for mengambil id dari kontrol target dalam dokumen yang sama, bukan name-nya. id harus unik di dalam dokumen, sementara name mengidentifikasi bidang dalam data yang dikirim. Meskipun tata letak memisahkan label dan input, hubungan penamaan mereka dapat tetap utuh ketika for dan id sesuai.

Simpan dokumen berikut sebagai labels.html dan buka di peramban. Input teks menggunakan for; kotak centang menggunakan label pembungkus. Ini adalah latihan antarmuka yang tidak mengirim data ke server.

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Membandingkan hubungan label</title>
</head>
<body>
  <h1>Nama kontrol formulir</h1>
  <p>
    <label for="reader-name">Nama tampilan</label>
    <input id="reader-name" name="reader" type="text"
           aria-describedby="name-help" placeholder="mis. Langit">
  </p>
  <p id="name-help">Masukkan nama panggilan yang akan ditampilkan di layar.</p>
  <p>
    <label>
      <input type="checkbox" name="tips" value="yes">
      Terima kabar pembelajaran
    </label>
  </p>
</body>
</html>

1. Klik Nama tampilan untuk menempatkan kursor di input. Setelah mengetik, placeholder menghilang, tetapi label tetap terlihat.
2. Klik teks Terima kabar pembelajaran untuk memilih kotak centang, lalu klik lagi untuk membatalkan centangnya. Anda tidak perlu menekan kotak centang kecil dengan tepat.
3. Gunakan Tab untuk berpindah antar kontrol dan Space untuk mengubah status kotak centang, juga periksa interaksi keyboard.

Label pembungkus dan deskripsi tambahan memiliki peran yang berbeda

Menempatkan input di dalam label menciptakan asosiasi implisit tanpa for. Sertakan hanya kontrol yang terkait dalam satu label dan jangan menyematkan label lain di dalamnya. Anda juga dapat menggunakan id dan for dengan label pembungkus, tetapi for harus merujuk ke kontrol yang terkandung. Asosiasi eksplisit for/id layak dipertimbangkan untuk kompatibilitas dengan teknologi bantu dan alat eksternal.

Label adalah nama yang memberitahu pembaca apa yang harus dimasukkan. Letakkan instruksi tambahan atau pesan kesalahan dalam paragraf terpisah dan kaitkan dengan aria-describedby. Dalam contoh, Masukkan nama panggilan yang akan ditampilkan di layar. melengkapi nama; placeholder tidak digunakan sebagai pengganti label.

Ketika asosiasi atau klik tidak berfungsi

Periksa kesalahan ketik dan perbedaan huruf dalam for, nilai duplikat id, dan tipe elemen target. Menunjukkan for ke elemen yang tidak dapat diberi label, seperti input hidden, tidak akan membuatnya berfungsi seperti input normal. Label juga bekerja dengan select dan textarea; beri nama kelompok pilihan terkait dengan fieldset dan legend.

Menempatkan tautan atau tombol terpisah di dalam label dapat membuat tidak jelas apakah mengklik seharusnya menavigasi atau memilih kontrol. Tempatkan tautan tambahan di luar dan jelaskan konteksnya terlebih dahulu. Atur gaya label dengan CSS daripada memasukkan elemen heading hanya untuk memperbesar ukurannya. Aturan dan kontrol yang didukung dijelaskan dalam referensi label di MDN.