Menggunakan "label untuk" pada tombol radio

137

Saat menggunakan parameter "label untuk" pada tombol radio, agar sesuai dengan 508 *, apakah hal berikut benar?

 <label for="button one"><input type="radio" name="group1" id="r1" value="1" /> button one</label>

atau apakah ini?

 <input type="radio" name="group1" id="r1" value="1" /><label for="button one"> button one</label>

Alasan saya bertanya adalah bahwa pada contoh kedua, "label" hanya mencakup teks dan bukan tombol radio yang sebenarnya.

* Pasal 508 dari Undang-Undang Rehabilitasi tahun 1973 mewajibkan lembaga federal untuk menyediakan perangkat lunak dan aksesibilitas situs web bagi para penyandang cacat.

html radio-button label section508 niico
sumber

Jawaban:

218

Anda hampir mendapatkannya. Seharusnya begini:

<input type="radio" name="group1" id="r1" value="1" />
<label for="r1"> button one</label>
Luaskan cuplikan

Nilai forharus berupa id elemen yang Anda beri label.

Marc W.
sumber
4
Jawaban Anda tentu saja benar, tetapi Martha memiliki jawaban yang benar. Kedua contoh Martha adalah HTML5 yang benar-benar valid. Dan misalnya jika Anda ingin semuanya berada dalam satu bingkai, lebih mudah untuk menata gaya yang kedua menggunakan css. Jika Anda ingin label berada di tempat lain, yang pertama. Tapi keduanya baik-baik saja. Salam Hormat!
Jacek Kowalewski
5
Hmm .. Bagaimana Anda membuat satu label beralih di antara dua tombol radio? Anda tidak dapat memiliki dua ID yang identik ...: /
Nils Sens
1
@NilsSens Setiap pasangan radio dan label harus memiliki ID unik yang tidak boleh mereka bagikan ID
Daniel Waters
@NilsSens Beralih antara 2 tombol radio dan mereka hanya memiliki 1 label? Kedengarannya seperti kasus yang jelas untuk menggunakan kotak centang sebagai gantinya: D
T_D
Ah, tidak, yang saya maksud adalah label super yang mematikan tombol radio. Seperti: Kategori buah favorit dan ketika Anda mengklik yang satu itu, Anda beralih antara idk "banana" & "strawberry" Karena, mengapa memaksakan gerakan mouse UX padahal Anda bisa mengganti opsi. Hari ini, saya akan menggunakan JS untuk hanya memberikan kode tangan, tetapi akan menarik untuk mengetahui jika hanya ada cara CSS :)
Nils Sens
87

Salah satu struktur valid dan dapat diakses, tetapi foratributnya harus sama dengan idelemen input:

<input type="radio" ... id="r1" /><label for="r1">button text</label>

atau

<label for="r1"><input type="radio" ... id="r1" />button text</label>

The foratribut opsional dalam versi kedua (label yang berisi input), tetapi IIRC ada beberapa browser lama yang tidak membuat diklik label teks kecuali jika Anda termasuk itu. Versi pertama (label setelah masukan) lebih mudah diatur gaya dengan CSS menggunakan pemilih saudara yang berdekatan +:

input[type="radio"]:checked+label {font-weight:bold;}
Martha
sumber
9
Benar, meskipun pada contoh kedua, atribut "untuk" tidak diperlukan.
Ismael
4
Saya rasa ada beberapa versi browser yang hanya membuat teks tombol "dapat diklik" jika Anda menggunakan atribut 'for', yaitu membungkus input di dalam label tidak cukup.
Martha
@Martha - Apakah Anda tahu browser yang mana?
Kirkland
2
@Kirkland - w3.org/TR/html401/interact/forms.html#h-17.9 tampaknya menunjukkan bahwa bentuk kedua adalah valid, namun beberapa sumber menunjukkan dukungan mungkin tidak universal. Mungkin yang terbaik adalah memberikan foratribut dalam hal apa pun.
Ismael
1
@RalphDavidAbernathy Ya, aturan yang sama berlaku untuk kotak centang.
Ismael
0

(Pertama-tama baca jawaban lain yang telah menjelaskan fordi <label></label>tag. Nah, kedua jawaban teratas benar, tetapi untuk tantangan saya, ketika Anda memiliki beberapa kotak radio, Anda harus memilih untuk mereka nama yang umum seperti name="r1" tetapi dengan id yang berbeda id="r1_1" ... id="r1_2"

Jadi dengan cara ini jawabannya lebih jelas dan menghilangkan konflik antara nama dan id juga.

Anda memerlukan ID berbeda untuk opsi berbeda dari kotak radio. 

<input type="radio" name="r1" id="r1_1" />

       <label for="r1_1">button text one</label>
       <br/>
       <input type="radio" name="r1" id="r1_2" />

       <label for="r1_2">button text two</label>
       <br/>
       <input type="radio" name="r1" id="r1_3" />

       <label for="r1_3">button text three</label>
Luaskan cuplikan

Ebrahim
sumber