Використання "label for" на радіо кнопок

Якщо ви користуєтесь параметром "label for" на перемикачах, щоб відповідати 508 *, чи правильним є наступне?

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

чи це?

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

Причину, яку я прошу, полягає в тому, що у другому прикладі "мітка" охоплює лише текст, а не власне перемикач.

* Розділ 508 Закону про реабілітацію 1973 року вимагає від федеральних відомств забезпечувати програмне забезпечення та доступність веб-сайтів для людей з обмеженими можливостями.

Ви майже отримали це. Це має бути так:

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

Значення в forмає бути ідентифікатором елемента, який ви маркуєте.

Будь-яка структура є дійсною та доступною, але forатрибут повинен дорівнювати idвхідному елементу:

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

або

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

forАтрибут є необов'язковим , у другому варіанті (етикетка , що містить вхід), але IIRC там були деякі старі браузери , які не роблять текст етикетки клікабельним , якщо ви не включили його. Першу версію (мітка після введення) простіше в стилі CSS, використовуючи сусідній селектор вибору +:

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

(Спочатку прочитайте інші відповіді, які пояснили forв <label></label>тегах. Ну, обидва відповіді вершини є правильними, але для моєї проблеми це було, коли у вас є декілька радіосигналів, ви повинні вибрати для них загальну назву, як, name="r1" але з різними ідентифікаторами id="r1_1" ... id="r1_2"

Таким чином, відповідь більш чітка, а також усуває конфлікти між ім'ям та ідентифікаторами.

Вам потрібні різні ідентифікатори для різних варіантів радіосигналу.

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