Używanie „etykiety dla” na przyciskach opcji

136

Czy w przypadku używania parametru „etykieta dla” na przyciskach opcji, aby zapewnić zgodność ze standardem 508 *, czy poniższe stwierdzenia są prawidłowe?

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

czy to jest?

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

Pytam, dlaczego w drugim przykładzie „etykieta” obejmuje tylko tekst, a nie faktyczny przycisk opcji.

* Paragraf 508 Ustawy o rehabilitacji z 1973 r. Nakłada na agencje federalne obowiązek zapewnienia osobom niepełnosprawnym dostępu do oprogramowania i stron internetowych.

— niico
źródło

Odpowiedzi:

216

Prawie to masz. Powinno być tak:

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

Rozwiń fragment

Wartość w forpowinna być identyfikatorem etykietowanego elementu.

— Marc W.
źródło

Twoja odpowiedź jest oczywiście prawdziwa, ale Marta ma właściwą odpowiedź. Oba przykłady Marty są doskonale poprawnymi HTML5. Na przykład, jeśli chcesz, aby całość była w ramce, łatwiej jest stylizować drugą za pomocą css. Jeśli chcesz, aby etykiety były gdzie indziej, najpierw. Ale oba są w porządku. Z poważaniem!

— Jacek Kowalewski,

Hmm ... Jak sprawić, by jedna etykieta przełączała się między dwoma przyciskami opcji? Nie możesz mieć dwóch identycznych identyfikatorów ...: /

— Nils Sens

@NilsSens Każda para radia i etykiety powinna mieć unikalne identyfikatory, których nigdy nie powinny udostępniać

— Daniel Waters

@NilsSens Przełączasz między 2 przyciskami radiowymi i mają tylko 1 etykietę? To brzmi jak jasny przypadek, aby zamiast tego użyć pola wyboru: D

— T_D

Ach, nie, miałem na myśli jedną super-etykietę, która przełącza przyciski radiowe. Na przykład: Kategoria ulubiony owoc, a po kliknięciu tej opcji przełączasz się między idk "banan" i "truskawka". Po co wymuszać UX ruchów myszy, skoro możesz po prostu przełączać opcje. Dzisiaj użyłbym JS do ręcznego kodowania, ale byłoby interesujące wiedzieć, czy istnieje tylko CSS :)

— Nils Sens

Obie struktury są prawidłowe i dostępne, ale foratrybut powinien być równy idelementowi wejściowemu:

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

lub

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

forAtrybut jest opcjonalny w wersji drugiej (etykieta zawierająca wejście), ale IIRC było kilka starszych przeglądarek, które nie sprawiają klikalny tekst etykiety, chyba że włączyła ją. Pierwsza wersja (etykieta po wejściu) jest łatwiejsza do stylizacji za pomocą CSS przy użyciu sąsiedniego selektora rodzeństwa +:

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

— Martha
źródło

Prawda, chociaż w drugim przykładzie atrybut „for” nie jest wymagany.

— Ishmael

Wydaje mi się, że w niektórych wersjach przeglądarek tekst przycisku był „klikalny” tylko wtedy, gdy użyłeś atrybutu „for”, tj. Zawinięcie danych wejściowych wewnątrz etykiety nie wystarczyło.

— Martha

@Martha - Czy wiesz, które przeglądarki?

— Kirkland

@Kirkland - w3.org/TR/html401/interact/forms.html#h-17.9 wydaje się wskazywać, że druga forma jest ważna, ale kilka źródeł wskazuje, że wsparcie może nie być uniwersalne. W forkażdym przypadku najlepiej podać atrybut.

— Ishmael

@RalphDavidAbernathy Tak, te same zasady dotyczą pól wyboru.

— Ishmael

(Najpierw przeczytaj inne odpowiedzi, które wyjaśniły forw <label></label>tagach. Cóż, obie górne odpowiedzi są poprawne, ale dla mojego wyzwania było to, gdy masz kilka skrzynek radiowych, powinieneś wybrać dla nich wspólną nazwę, taką jak name="r1" ale z różnymi identyfikatorami id="r1_1" ... id="r1_2"

W ten sposób odpowiedź jest jaśniejsza i usuwa również konflikty między nazwą a identyfikatorami.

Potrzebujesz różnych identyfikatorów dla różnych opcji skrzynki radiowej.

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

Rozwiń fragment

— Ebrahim
źródło