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

136

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

— niico
источник

Ответы:

216

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

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

Развернуть фрагмент

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

— Марк W
источник

Вы отвечаете, конечно, верно, но Марта имеет правильный ответ. Оба примера Марты являются абсолютно корректными HTML5. И, например, если вы хотите, чтобы все это было в кадре, проще оформить второй с помощью css. Если вы хотите, чтобы ярлыки были где-то еще, сначала. Но оба в порядке. С уважением!

— Яцек Ковалевски

Хм .. Как сделать одну метку для переключения между двумя переключателями? У вас не может быть двух одинаковых идентификаторов ...: /

— Nils Sens

@NilsSens Каждая пара радио и лейбла должна иметь уникальные идентификаторы, которые никогда не должны делиться идентификаторами

— Дэниел Уотерс

@NilsSens Переключение между 2 переключателями, и у них есть только 1 ярлык? Это звучит как очевидный случай, чтобы использовать вместо этого флажок: D

— T_D

Ах, нет, я имел в виду один супер-лейбл, который переключает переключатели. Например: категория «любимый фрукт», и когда вы щелкаете по ней, вы переключаетесь между idk «банан» и «клубника». Потому что, зачем применять движение мыши UX, когда вы можете просто переключать опции. Сегодня я бы использовал JS, чтобы просто написать код, но было бы интересно узнать, есть ли единственный способ CSS :)

— Nils Sens

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

<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 не обязателен.

— Измаил

Я думаю, что были некоторые версии браузера, которые делали текст кнопки «кликабельным» только в том случае, если вы использовали атрибут «for», то есть недостаточно было обернуть ввод внутри метки.

— Март

@Martha - Вы знаете, какие браузеры?

— Киркланд,

@Kirkland - w3.org/TR/html401/interact/forms.html#h-17.9, кажется, указывает на то, что вторая форма действительна, но несколько источников указывают, что поддержка может быть не универсальной. Вероятно, лучше предоставить forатрибут в любом случае.

— Измаил

@RalphDavidAbernathy Да, те же правила применяются для флажков.

— Измаил

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

Развернуть фрагмент

— Ebrahim
источник