Использование «метки для» на переключателях - PullRequest
Новая
       8

Использование «метки для» на переключателях

129 голосов
/ 06 октября 2009

При использовании параметра «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 года федеральные агентства должны предоставлять доступ к программному обеспечению и веб-сайтам людям с ограниченными возможностями.

Ответы [ 3 ]

200 голосов
/ 06 октября 2009

Ты почти понял. Должно быть так: 

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

Значение в for должно быть идентификатором элемента, который вы помечаете.

81 голосов
/ 07 октября 2009

Любая структура является допустимой и доступной, но атрибут 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;}
0 голосов
/ 24 апреля 2019

(Сначала прочитайте другие ответы, которые объяснили 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>
...