<label> на флажках: есть ли причина, по которой другие сайты не используют его?

Question

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

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

или

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

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

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

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

Примечание: Если люди не знают о теге <label>, у него есть ряд преимуществ:

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

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

Answer 1

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

Answer 2

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

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

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

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

Answer 3

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

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

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

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

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

Answer 4

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

Answer 5

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

Answer 6

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

Answer 7

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

1. Возьми на себя удар.
2. Загрузите его в браузер и посмотрите, что не так.
3. Поиск в Google исправлений.
4. Повтор.

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

Answer 8

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