Зачем нужен label HTML?
w3schools.com/tags/tag_label.asp — повышает удобство интерфейса при использовании мыши, так как щелчок по тексту элемента передается элементу с id , указанным в аттрибуте for .
– user176262
20 апр 2016 в 18:25
2 ответа 2
Сортировка: Сброс на вариант по умолчанию
Если речь именно про тег, то:
Тег устанавливает связь между определенной меткой, в качестве которой обычно выступает текст, и элементом формы ( , , ). Такая связь необходима, чтобы изменять значения элементов формы при нажатии курсором мыши на текст. Кроме того, с помощью можно устанавливать горячие клавиши на клавиатуре и переходить на активный элемент подобно ссылкам.
Существует два способа связывания объекта и метки. Первый заключается в использовании идентификатора id внутри элемента формы и указании его имени в качестве атрибута for тега . При втором способе элемент формы помещается внутрь контейнера .
Если речь про всё же про атрибут, то:
Атрибут предназначен для указания метки пункта списка, сокращённой по сравнению с текстом внутри . Если атрибут label присутствует, то текст внутри тега игнорируется и в списке выводится значение label .
Зачем input оборачивать в label
Тег устанавливает связь между определенной меткой, в качестве которой обычно выступает текст, и элементом формы ( , , ). Такая связь необходима, чтобы изменять значения элементов формы при нажатии курсором мыши на текст. Кроме того, с помощью можно устанавливать горячие клавиши на клавиатуре и переходить на активный элемент подобно ссылкам.
Существует два способа связывания объекта и метки. Первый заключается в использовании идентификатора id внутри элемента формы и указании его имени в качестве атрибута for тега . При втором способе элемент формы помещается внутрь контейнера .
Синтаксис
Текст Атрибуты
accesskey Доступ к элементам формы с помощью горячих клавиш. for Идентификатор элемента, с которым следует установить связь.
Закрывающий тег
HTML5 IE Cr Op Sa Fx
Тег LABEL Браузеры
IE6 не позволяет активировать поле формы при щелчке по тексту, когда поле с текстом находится внутри тега .
IE до версии 8.0 включительно корректно работает с только при наличии в нём текста. Если добавить изображение ( ), то активировать поле формы щелчком по картинке нельзя.
Form: input и label. Полезно ли всегда использовать label?
Как вы считаете, всегда ли необходим label в связке с input ? Даже если нет текста, по которому можно кликнуть и перескочить в поле ввода. Или допустим, тег label , не используется в качестве контейнера.
Встречал примеры, где тег label , связывают через идентификатор с input и при этом, прячут его, с помощью visually-hidden. Зачем? Причём так делают, некоторые школы и опытные разработчики.
- Вопрос задан более двух лет назад
- 265 просмотров
Комментировать
Решения вопроса 1
Дмитрий Беляев @bingo347 Куратор тега HTML
Crazy on performance.
Как вы считаете, всегда ли необходим label в связке с input? Даже если нет текста, по которому можно кликнуть и перескочить в поле ввода. Или допустим, тег label, не используется в качестве контейнера.
Пустой label крайне вреден, особенно если его можно кликнуть и клик приводит к непредсказуемому поведению — взаимодействию с input, взаимодействию, которого не ожидает пользователь. Все не ожиданное ведет к плохому UX.
Хотя о каком UX я говорю?
Если у нас невозможно купить мышку онлайн не пользуясь мышкой (в том числе ее заменителями вроде тачскрина или тачпада). Я пробовал как-то, обошел первые 2 страницы в яндексе по запросу «купить мышку». Самое обидное было, что на некоторых сайтах все обламывалось уже на форме заказа.
Встречал примеры, где тег label, связывают через идентификатор с input и при этом, прячут его, с помощью visually-hidden. Зачем? Причём так делают, некоторые школы и опытные разработчики.
Так делают для скринридеров, когда придурок дизайнер не предусмотрел label в дизайне, а без него никак. Делаем нормальный UX, не ломая визуал заложенный тем ущербом, который «я дисигнер я так вижу».
P.S. совет от меня лично, выделяйте фокус не только для input, но и для связанного с ним label, это удобно.
Зачем input оборачивать в label
**HTML-элемент **представляет собой подпись к элементу пользовательского интерфейса.
| Категории контента | Общий поток, текстовый контент, интерактивный контент, элемент формы, ощутимый контент. |
|---|---|
| Допустимый контент | Текстовый контент, но без вложенных элементов label . Недопустимы другие оборачиваемые в label элементы помимо целевого. |
| Пропуск тегов | Нет, открывающий и закрывающий теги обязательны. |
| Допустимые родители | Любой элемент, разрешающий текстовый контент. |
| Допустимые ARIA-роли | Нет |
| DOM-интерфейс | HTMLLabelElement (en-US) |
Атрибуты
ID labelable-элемента, который находится в том же документе, что и элемент label. Первый такой элемент в документе, ID которого совпадает со значением атрибута for , становится labeled-* контролом для данного label .
Примечание: Элемент label может иметь как атрибут for, так и отдельный элемент управления, если атрибут for указывает на содержащийся элемент управления.
Элемент формы, с которым связан label (его владелец формы). Если указано, значением атрибута является идентификатор элемента в том же документе. Это позволяет размещать элементы label в любом месте документа, а не только как потомки их элементов формы.
Примечание: Этот атрибут содержимого был удалён из спецификации HTML 28 апреля 2016 г. Однако сценарии по-прежнему имеют доступ только для чтения HTMLLabelElement.form (en-US); он возвращает форму, членом которой является связанный элемент управления label, или значение NULL, если label не связана с элементом управления или элемент управления не является частью формы.
Примечания по использованию
- можно связать с элементом управления, поместив элемент управления внутри элемента или используя атрибут for . Такой элемент управления называется помеченным элементом управления надписью. Один вход может быть связан с несколькими метками.
- Метки сами по себе не связаны с формами. Они только косвенно связаны с формами через элементы управления, с которыми они связаны.