Radyo düğmelerinde "etiket" işlevini kullanma

136

Radyo düğmelerinde "label for" parametresini 508 uyumlu * olarak kullanırken, aşağıdakiler doğru mu?

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

yoksa bu mu?

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

Sormamın nedeni, ikinci örnekte "etiket" in gerçek radyo düğmesini değil, yalnızca metni kapsadığıdır.

* 1973 Rehabilitasyon Yasası'nın 508. Bölümü federal kurumların engelli kişilere yazılım ve web sitesi erişilebilirliği sağlamasını gerektirmektedir.

— niico
kaynak

Yanıtlar:

216

Neredeyse anladın. Bu olmalı:

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

Snippet'i genişlet

İçindeki değer for, etiketlediğiniz öğenin kimliği olmalıdır.

— Marc W
kaynak

Cevap elbette doğrudur, ama Martha doğru cevaba sahiptir. Martha örneklerinin her ikisi de mükemmel şekilde geçerli HTML5'tir. Örneğin, her şeyin bir çerçeve içinde olmasını istiyorsanız, ikincisini css kullanarak biçimlendirmek daha kolaydır. Etiketlerin başka bir yerde olmasını istiyorsanız, ilk önce. Ama ikisi de iyi. Saygılarımla!

— Jacek Kowalewski

Hmm .. Bir etiket iki radyo düğmesi arasında nasıl geçiş yapar? İki özdeş kimliğiniz olamaz ...: /

— Nils Sens

@NilsSens Her radyo ve etiket çifti, asla kimlik paylaşmaması gereken benzersiz kimliklere sahip olmalıdır

— Daniel Waters

@NilsSens 2 radyo düğmesi arasında geçiş yapın ve sadece 1 etiketi var mı? Bunun yerine bir onay kutusu kullanmak açık bir vaka gibi görünüyor: D

— T_D

Ah, demek istediğim, radyo düğmelerini değiştiren bir süper etiket değildi. Beğen: Kategori favori meyve ve bunu tıkladığınızda, idk "muz" ve "çilek" arasında geçiş yaparsınız Çünkü seçenekleri sadece geçiş yapabildiğinizde neden fare hareketini UX uygularsınız. Bugün, JS'yi sadece el kodlaması için kullanıyordum, ancak tek bir CSS olup olmadığını bilmek ilginç olurdu :)

— Nils Sens

Her iki yapı da geçerli ve erişilebilir, ancak forözellik idgiriş öğesinin değerine eşit olmalıdır :

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

veya

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

forNitelik (etiket girişi içeren) ikinci versiyonunda isteğe bağlıdır, ancak IIRC bunu dahil sürece etiket metni tıklanabilir yapmadığını bazı eski tarayıcılar vardı. İlk sürümün (girişten sonraki etiket) bitişik kardeş seçicisini kullanarak CSS ile biçimlendirilmesi daha kolaydır +:

input[type="radio"]:checked+label {font-weight:bold;}

— Martha
kaynak

Doğru, ancak ikinci örnekte "for" özelliği gerekli değildir.

— Ishmael

Ben sadece 'for' özniteliğini kullandıysanız, yani etiketin içine girdi kaydırma yeterli değildi sadece düğme metni "tıklanabilir" yapan bazı tarayıcı sürümleri olduğunu düşünüyorum.

— Martha

@Martha - Hangi tarayıcıları biliyor musunuz?

— Kirkland

@Kirkland - w3.org/TR/html401/interact/forms.html#h-17.9 ikinci formun geçerli olduğunu gösteriyor, ancak çeşitli kaynaklar desteğin evrensel olmayabileceğini gösteriyor. forHer durumda özelliği sağlamak muhtemelen en iyisidir .

— İsmail

@RalphDavidAbernathy Evet, onay kutuları için aynı kurallar geçerlidir.

— İsmail

(Öncelikle izah etmiştir Diğer yanıtları okumak foriçinde <label></label>Eh. Etiketleri, hem üstleri cevaplar doğru ancak benim meydan okuma için, bu birkaç radyo kutuları varken, onlar için seçmelidir oldu ortak bir isim gibi name="r1" ancak farklı kimlikleri ile id="r1_1" ... id="r1_2"

Böylece cevap daha açıktır ve isim ile kimlikler arasındaki çatışmaları da ortadan kaldırır.

Radyo kutusunun farklı seçenekleri için farklı kimliklere ihtiyacınız vardır.

<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>

Snippet'i genişlet

— İbrahim
kaynak