Apa yang dilakukan atribut "untuk" di tag <label> HTML?

382

Saya ingin tahu apa perbedaan antara dua cuplikan kode berikut:

<label>Input here : </label>
<input type='text' name='theinput' id='theinput'/>

dan

<label for='theinput'>Input here : </label>
<input type='text' name='theinput' id='theinput'/>

Saya yakin itu melakukan sesuatu ketika Anda menggunakan perpustakaan JavaScript khusus, tetapi selain itu, apakah itu memvalidasi HTML atau diperlukan karena alasan lain?

html forms input label jeff
sumber

Jawaban:

578

The <label>tag memungkinkan Anda untuk mengklik pada label, dan itu akan diperlakukan seperti mengklik pada elemen input terkait. Ada dua cara untuk membuat asosiasi ini:

Salah satu caranya adalah dengan membungkus elemen label di sekitar elemen input:

<label>Input here:
    <input type='text' name='theinput' id='theinput'>
</label>

Cara lain adalah dengan menggunakan foratribut, memberinya ID dari input terkait:

<label for="theinput">Input here:</label>
<input type='text' name='whatever' id='theinput'>

Ini sangat berguna untuk digunakan dengan kotak centang dan tombol, karena itu berarti Anda dapat mencentang kotak dengan mengklik pada teks terkait daripada harus menekan kotak itu sendiri.

Baca lebih lanjut tentang elemen ini di MDN .

Barmar
sumber
106
Perhatikan bahwa atribut for terikat ke input oleh atribut id, dan atribut nama tidak harus cocok. <label untuk = "theinput"> Input di sini: </label> <input type = 'text' name = 'notmatching' id = 'theinput'> Masih akan bekerja
Glo
4
Klik pada label tidak selalu diperlakukan persis seperti mengklik pada elemen terkait. Di Chrome dan Safari, misalnya, mengklik label yang dikaitkan dengan selecthanya menempatkan fokus pada pilihan daripada memperluas opsi.
Emile Pels
2
@EmilePels Sejauh menyangkut model acara browser, mereka setara. Apa yang Anda uraikan lebih lanjut tentang UI yang disediakan oleh penanganan menu drop-down OS, yang terkait dengan mouse itu sendiri.
Barmar
3
Tampaknya penting untuk menyebutkan bahwa itu sangat relevan untuk aksesibilitas dan pembaca layar, mengapa aktif menggunakannya.
coyotte508
1
Saya berjuang dua jam terakhir dengan klik tubuh dinaikkan dua kali setiap kali saya mengklik label dalam bentuk dengan atribut "untuk" ke bidang input. Saya akhirnya mengerti mengapa bahkan jika saya menggunakan stopPropagation pada klik label mengapa klik tubuh masih dinaikkan ... karena klik yang dimunculkan oleh bidang input mengikuti perilaku yang Anda jelaskan.
Samuel
53

The foratribut asosiasi label dengan elemen kontrol, seperti yang didefinisikan dalam deskripsi labeldi HTML 4.01 spec. Ini menyiratkan, antara lain, bahwa ketika labelelemen menerima fokus (misalnya dengan diklik), ia meneruskan fokus ke kontrol terkait. Hubungan antara label dan kontrol juga dapat digunakan oleh agen pengguna berbasis ucapan, yang dapat memberikan pengguna cara untuk bertanya apa label terkait, ketika berhadapan dengan kontrol. (Asosiasi mungkin tidak sejelas dalam rendering visual.)

Pada contoh pertama dalam pertanyaan (tanpa for), penggunaan labelmarkup tidak memiliki implikasi logis atau fungsional - tidak ada gunanya, kecuali jika Anda melakukan sesuatu dengannya dalam CSS atau JavaScript.

Spesifikasi HTML tidak mengharuskan untuk mengaitkan label dengan kontrol, tetapi Panduan Aksesibilitas Konten Web (WCAG) 2.0 melakukannya. Ini dijelaskan dalam dokumen teknis H44: Menggunakan elemen label untuk mengaitkan label teks dengan kontrol formulir , yang juga menjelaskan bahwa asosiasi implisit (dengan bersarang misalnya inputdi dalam label) tidak didukung secara luas seperti asosiasi eksplisit melalui fordan idatribut,

Jukka K. Korpela
sumber
10
+1 untuk berbicara tentang hubungan semantik dan apa artinya di luar hubungan mengklik fungsional.
ulty4life
Hai, Saya memiliki dua elemen dengan id yang sama tetapi dalam div yang berbeda, saya menambahkan acara fokus menggunakan label untuk tetapi dalam elemen kedua itu berfokus pada elemen pertama. <html> <body> <div id = "first_div"> <label untuk = "name"> Nama </label> <input type = "text" id = "name"> </div> <div id = "second_div "> <label untuk =" name "> Name </label> <input type =" text "id =" name "> </div> </body> </html>
LoveToCode
14

Singkatnya apa yang dilakukannya mengacu idpada input, itu saja:

<label for="the-id-of-the-input">Input here:</label>
<input type="text" name="the-name-of-input" id="the-id-of-the-input">
Uwe Keim
sumber
6
Menambahkan untuk adalah penting, bahkan jika mereka berdekatan. Sepertinya saya ingat pernah mendengar bahwa beberapa pembaca layar untuk tunanetra memiliki masalah sebaliknya. Jadi, jika Anda ingin bersikap ramah kepada mereka yang mungkin menggunakan peramban / pembaca layar alternatif, gunakan metode ini.
bean5
3

Atribut for dari <label>tag harus sama dengan atribut id dari elemen terkait untuk mengikatnya.

Rahul Tripathi
sumber
7
Ya, tetapi apa yang Anda maksud dengan "mengikat mereka bersama"? Mereka sudah bertetangga dalam struktur HTML. Ini yang tidak saya mengerti.
jeff
1
UNTUK Menentukan elemen bentuk mana yang terikat pada label
Rahul Tripathi
2
@CengizFrostclaw jsfiddle.net/DmSGh --- coba klik pada kedua teks "Input di sini" dan lihat apa yang terjadi.
JJJ
1
@CengizFrostclaw: - Label dapat diikat ke elemen dengan menggunakan atribut "for"
Rahul Tripathi
1
Ada beberapa fitur bagus misalnya ketika Anda menggunakan tombol radio. Mengklik label sebenarnya akan mengaktifkan tombol radio. Ini adalah fitur yang bagus ketika Anda mencoba menggunakan tombol radio dengan ui kustom.
Alex
0

Atribut for menunjukkan bahwa label ini adalah singkatan dari bidang input terkait, atau kotak centang atau tombol radio atau bidang entri data lainnya yang terkait dengannya. sebagai contoh

    <li>
<label>{translate:blindcopy}</label>
            <a class="" href="#" title="{translate:savetemplate}" onclick="" ><i class="fa fa-list" class="button" ></i></a> &nbsp 
            <input type="text" id="BlindCopy" name="BlindCopy" class="splitblindcopy" />
    </li>
Pax
sumber
0

Ini memberi label input apa pun adalah parameter untuk foratribut.

<input id='myInput' type='radio'>
<label for='myInput'>My 1st Radio Label</label>
<br>
<input id='input2' type='radio'>
<label for='input2'>My 2nd Radio Label</label>
<br>
<input id='input3' type='radio'>
<label for='input3'>My 3rd Radio Label</label>
Luaskan cuplikan

pythag0ras_
sumber