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

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


html radio-button label section508
person Community    schedule 06.10.2009    source источник

Ответы (3)


arrow_upward
221
arrow_downward

Вы почти получили это. Должно получиться так:

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

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

person Marc W    schedule 06.10.2009
comment
Вы ответ, конечно, верный, но у Марты есть правильный ответ. Оба примера Марты полностью соответствуют HTML5. И, например, если вы хотите, чтобы все это было во фрейме, проще стилизовать второй с помощью css. Если вы хотите, чтобы ярлыки были где-то еще, сначала. Но оба в порядке. С наилучшими пожеланиями! - person Jacek Kowalewski; 07.02.2014
comment
Хм .. Как сделать так, чтобы одна метка переключалась между двумя переключателями? У вас не может быть двух одинаковых идентификаторов ...: / - person Nils Sens; 02.03.2016
comment
@NilsSens Каждая пара радио и метки должна иметь уникальный идентификатор, идентификаторы никогда не должны делиться. - person Daniel Waters; 06.09.2017
comment
@NilsSens Переключаетесь между двумя переключателями, и у них только одна метка? Звучит как очевидный случай использовать вместо этого флажок: D - person T_D; 13.03.2020
comment
Ах, нет, я имел в виду один супер-лейбл, который переключает переключатели. Например: Категория любимые фрукты, и когда вы нажимаете на нее, вы переключаетесь между idk бананом и клубникой. Потому что зачем принудительно использовать UX движения мыши, когда вы можете просто переключать параметры. Сегодня я бы использовал JS, чтобы просто вручную его кодировать, но было бы интересно узнать, есть ли единственный способ CSS :) - person Nils Sens; 21.05.2020

arrow_upward
89
arrow_downward

Любая структура действительна и доступна, но атрибут for должен быть равен id входного элемента:

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

or

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

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

input[type="radio"]:checked+label {font-weight:bold;}
person Martha    schedule 06.10.2009
comment
Верно, хотя во втором примере атрибут for не требуется. - person Ishmael; 07.10.2009
comment
Я думаю, что были некоторые версии браузеров, которые делали текст кнопки доступным только в том случае, если вы использовали атрибут 'for', т.е. обертывания ввода внутри метки было недостаточно. - person Martha; 07.10.2009
comment
@Martha - Вы знаете, в каких браузерах? - person Kirkland; 12.09.2013
comment
@Ishmael - Вы можете процитировать источник? - person Kirkland; 12.09.2013
comment
@Kirkland - w3.org/TR/html401/interact/forms .html # h-17.9, похоже, указывает на то, что вторая форма действительна, но несколько источников указывают, что поддержка может быть не универсальной. В любом случае, вероятно, лучше всего указать атрибут for. - person Ishmael; 12.09.2013
comment
@Ishmael То же самое касается флажков? - person Ralph David Abernathy; 21.06.2016
comment
@RalphDavidAbernathy Да, те же правила применяются для флажков. - person Ishmael; 23.06.2016

arrow_upward
1
arrow_downward

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

person Ebrahim    schedule 23.04.2019