<label> on checkboxes: есть ли причина, по которой другие веб-сайты не используют ее?

Я всегда стараюсь сделать следующее:

<label><input type="checkbox" /> Some text</label>

или

<label for="idOfField"><input type="checkbox" id="idOfField" /> Some text</label>

Мой вопрос связан с тегом метки, в частности, на флажке.

Большинство веб-сайтов (скажем, 40%) не используют тег <label>.

Есть ли причина для этого? Есть ли проблема в браузере или какая-то другая проблема?

Примечание.. Люди, которые не знают о теге <label>, имеют ряд преимуществ:

  • флажки и радиоприемники: вы можете щелкнуть по тексту, а также установить флажок, чтобы установить флажок (а также фокус, который я считаю): Blah blah blah
  • другие входы: если вы нажмете на текст, он будет фокусировать вход (textarea, текст, файл) (эта функциональность не так полезна, как флажки и радиоприемники).

Примечание 2: Некоторые люди упомянули, что пример № 2 более правильный, чем № 1 (см. выше), но в соответствии с документацией здесь, либо правильный

Ответы

Ответ 1

Я думаю, что это, вероятно, больше фактор, который люди не знают о <label> тег. Я этого не делал до этого сообщения.

Ответ 2

Я согласен, что ярлык часто является неизвестным тегом. Я использую его в форме

<label for="chk1">Some text</label><input id="chk1" type="checkbox"/>

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

Я попробую ваше решение, хотя

Ответ 3

Нет недостатка в использовании <label>, о котором я знаю. Я использовал его много в последние несколько лет.

На самом деле есть 3 способа установить ярлык, первые два соответствуют тем, которые вы задали в своем вопросе:

<label for="xa">XA: <input type="text" id="xa" /></label><br />
<label for="xb">XB:</label> <input type="text" id="xb" /><br />
<label>XC: <input type="text" id="xc" /></label>

Все три из вышеперечисленных работ работают в FF3 и IE7. Я помню, что по какой-то причине я мысленно обозначил последние два как "чтобы их можно было избежать, только частично работать". Поэтому я бы поставил хорошие деньги, что только первый работает в IE6.

Чтобы уточнить: "лучший" способ сделать это - мой пример №1, ваш пример № 2.

Ответ 4

Некоторые старые браузеры не интерпретируют атрибут для и вместо этого требуют, чтобы элемент формы был вложен в тег label.

Ответ 5

Разработчик, работающий на сайте, не знал, что существует тег <label>.

Ответ 6

Большинство веб-сайтов были сделаны людьми, которые делают только то, что нужно, чтобы заставить сайт работать, как они думают. Поток процесса:

  • Возьмите удар.
  • Загрузите его в браузере и посмотрите, что не так.
  • Поиск google для исправлений.
  • Повтор.

Поскольку большинство из этих людей никогда не пытаются сфокусировать любые входы без использования мыши, проблема никогда не становится очевидной.

Ответ 7

Преимущества очевидны, но я не думаю, что большинство из них знают об этом, потому что ярлык, кажется, не передает ничего конкретного. Очевидно, вы можете увидеть преимущество использования сильного тега, потому что он делает текст полужирным, но ярлык тега? Вы не заметите ничего другого.

Ответ 8

Потому что это недоработанный тег, который должен привлечь больше внимания. Пока вы на нем (улучшая доступность), не забывайте свойство tabindex.