Tutorial HTML / Menghubungkan label dan input dengan benar

Sebuah input menerima nilai dari pengguna; sebuah label memberitahu pengguna untuk apa bidang tersebut dimaksudkan. Pemetaan eksplisit yang andal memberikan id ke bidang dan memberikan label nilai for yang sesuai.

Hubungkan label dengan bidang input

<form method="get">
  <label for="visitor-name">Nama</label>
  <input id="visitor-name" name="name" type="text">
  <button type="submit">Periksa</button>
</form>

Tempatkan kode ini di body dari file HTML dan buka di browser. Klik pada "Nama" harus memfokuskan pada bidang tersebut. Menempatkan teks di samping bidang saja tidak secara otomatis menghubungkannya. Sebuah id harus unik di dalam dokumen; ID ganda dapat menyebabkan label mengarah ke bidang yang salah.

Tekan juga pada Tab untuk mengakses bidang dan memeriksa bahwa elemen yang difokuskan terlihat. Label adalah nama kontrol, bukan sekadar teks dekoratif. Teknologi bantu harus dapat mengenali bidang mana yang sedang difokuskan.

Apakah id dan name memiliki fungsi yang sama?

Atribut id mengidentifikasi sebuah elemen dalam dokumen dan dapat menghubungkannya dengan sebuah label, fragmen, atau skrip. name adalah kunci yang digunakan ketika formulir mengirimkan nilai. Di sini visitor-name adalah target dari label, sementara name adalah kunci pengiriman. Periksa nama-nama yang dikirimkan dan metode permintaan dengan latihan daftar data di Struktur Formulir dan GET vs. POST.

Jika klik pada label tidak memberikan hasil, bandingkan for dengan id. Jika input berfungsi, tetapi URL yang dikirim tidak berisi nilai, periksa name. Anda dapat mengubah id="visitor-name" menjadi id="person-name", selama Anda memperbarui for dari label; name="name" dapat tetap sama jika server masih mengharapkan kunci ini.

Memperbaiki label yang terpisah

<!-- Salah: for mengacu pada name, bukan id -->
<label for="full_name">Nama</label>
<input id="person-name" name="full_name">

<!-- Benar: for sesuai dengan id kolom -->
<label for="person-name">Nama</label>
<input id="person-name" name="full_name">

Uji fragmen-fragmen dalam file terpisah. Dalam versi yang diperbaiki, klik pada nama seharusnya memfokuskan pada person-name, sementara kunci yang dikirim tetap full_name. Jangan gabungkan kedua contoh dalam satu dokumen: ini akan menduplikasi ID dan membuat perbandingan tidak valid.

Teks placeholder tidak menggantikan label

placeholder memberikan petunjuk atau contoh singkat dan hilang ketika pengguna mengetik. Itu tidak bisa menggantikan nama field secara permanen. Pertahankan label yang terlihat dan tambahkan contoh secara terpisah. Untuk instruksi permanen yang terkait dengan field, lihat Menambahkan teks placeholder ke field formulir.

<label for="email">Alamat Email</label>
<input id="email" name="email" type="email"
       placeholder="name@example.com">

Meskipun sebuah desain secara visual menutupi label, bidang tersebut tetap harus memiliki nama yang dapat diakses. Kotak centang dan tombol opsi juga dapat disarangkan di dalam label, seperti di <label><input type="checkbox" name="agree"> Saya setuju</label>. Klik teks label untuk memeriksa bahwa kotak centang berubah. Pilih formulasi yang jelas sebelum menyesuaikan penampilan. Lihat referensi MDN untuk label terkait metode pemetaan.