Label html что это
Тег устанавливает связь между определенной меткой, в качестве которой обычно выступает текст, и элементом формы ( , , ). Такая связь необходима, чтобы изменять значения элементов формы при нажатии курсором мыши на текст. Кроме того, с помощью можно устанавливать горячие клавиши на клавиатуре и переходить на активный элемент подобно ссылкам.
Существует два способа связывания объекта и метки. Первый заключается в использовании идентификатора id внутри элемента формы и указании его имени в качестве атрибута for тега . При втором способе элемент формы помещается внутрь контейнера .
Синтаксис
Текст Атрибуты
accesskey Доступ к элементам формы с помощью горячих клавиш. for Идентификатор элемента, с которым следует установить связь.
Закрывающий тег
HTML5 IE Cr Op Sa Fx
Тег LABEL Браузеры
IE6 не позволяет активировать поле формы при щелчке по тексту, когда поле с текстом находится внутри тега .
IE до версии 8.0 включительно корректно работает с только при наличии в нём текста. Если добавить изображение ( ), то активировать поле формы щелчком по картинке нельзя.
Label html что это
Существует два способа связывания объекта и метки. Первый заключается в использовании идентификатора id внутри элемента формы и указании его имени в качестве атрибута for элемента . При втором способе элемент формы помещается внутрь контейнера .
Синтаксис
">Текст Атрибуты
for Идентификатор элемента, с которым следует установить связь.
Также для этого элемента доступны универсальные атрибуты и события.
Пример
Примечание
IE до версии 6.0 включительно не позволяет активировать поле формы при щелчке по тексту, когда поле с текстом находится внутри .
IE до версии 8.0 включительно корректно работает с только при наличии в нём текста. Если добавить изображение ( ), то активировать поле формы щелчком по картинке нельзя.
Спецификация
| Спецификация | Статус |
|---|---|
| HTML Living Standard | Живой стандарт |
| HTML 4.01 Specification | Заменённая рекомендация |
Спецификация
Каждая спецификация проходит несколько стадий одобрения.
- Recommendation ( Рекомендация ) — спецификация одобрена W3C и рекомендована как стандарт.
- Candidate Recommendation ( Возможная рекомендация ) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
- Proposed Recommendation ( Предлагаемая рекомендация ) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
- Working Draft ( Рабочий проект ) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
- Editor’s draft ( Редакторский черновик ) — черновая версия стандарта после внесения правок редакторами проекта.
- Draft ( Черновик спецификации ) — первая черновая версия стандарта.
Браузеры
| 3 | 12 | 1 | 15 | 4 | 1 |
| 4.4 | 4 | 14 | 3.2 |
В таблице браузеров применяются следующие обозначения.
- — элемент полностью поддерживается браузером;
- — элемент браузером не воспринимается и игнорируется;
- — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.
Число указывает версию браузреа, начиная с которой элемент поддерживается.
См. также
- Аккордеон меню
- Вкладки на CSS
- Выпадающее меню
- Использование :checked
- Подсказка в поле формы
- Пользовательские формы
- Стилизация переключателей
- Стилизация флажков
- Формы в Bootstrap 4
- Формы в HTML
- Элемент label
HTML тег
Атрибутом «for» можно не пользоваться, если элемент будет находиться внутри элемента .
Атрибуты
for: Устанавливает связь с элементом формы, к которому будет относится метка. В качестве значения для атрибута выступает идентификатор целевого элемента. Пример » form: Определяет форму с которой будет связана метка. В качестве значения атрибута выступает идентификатор элемента . Этот атрибут позволяет размещать метки в произвольном месте документа, а не только в качестве потомка элемента . Пример »
Стиль по умолчанию
label
Пример
Результат данного примера в окне браузера:
div class="form-row"> label for="bread">Купить хлебlabel> input type="checkbox" name="bread" id="bread"> div>
Как пишется
Скопировать ссылку «Как пишется» Скопировано
) --> ) --> label>Click me input type="text">label> label for="username">Click melabel> input type="text" id="username">
Как понять
Скопировать ссылку "Как понять" Скопировано
На многих веб-страницах есть формы — группы интерактивных элементов (полей ввода, выпадающих списков, чекбоксов и т.п.), связанных общим функциональным назначением. Яркие примеры форм — форма регистрации, форма входа, фильтры в каталогах. Формами удобно пользоваться, когда мы понимаем назначение каждого элемента. Для этого необходимо подписывать каждый элемент. И вот как раз для этих целей служит элемент .
Помимо текстовой подписи создаётся программная связь между подписью и элементом формы. Это сильно облегчает взаимодействие с формами незрячим или слабовидящим пользователям, использующим скринридеры. Когда фокус попадает на элемент формы, с которым связан , скринридер автоматически зачитывает текст подписи, и пользователь понимает, какие данные необходимо ввести или какие данные представлены в текущем элементе формы.
Чтобы связать с элементом формы можно пойти двумя путями:
- Задаём элементу формы атрибут id . Такое же значение задаём атрибуту for тега .
- Оборачиваем элемент формы в тег . В этом случае связь создаётся автоматически и нет необходимости в атрибутах id и for .
Согласен на обработку данныхform action=""> label for="phone">Ваш телефон:label> input type="tel" name="phone" id="phone"> label> input type="checkbox" name="agree">Согласен на обработку данных label> form>
Атрибуты
Скопировать ссылку "Атрибуты" Скопировано
for — значение этого атрибута должно соответствовать значению атрибута id связываемого элемента. Первый же элемент в документе, чей id будет совпадать со значением атрибута for , становится связанным с нашим . Единственное условие — элемент должен принадлежать к группе связываемых элементов: , , , , , и .
Если элемент с нужным id не является связываемым, то связь не создаётся, и даже если дальше по документу найдётся связываемый элемент с таким же id , то он уже не будет учитываться.
Подсказки
Скопировать ссылку "Подсказки" Скопировано
�� Один элемент формы может быть связан с несколькими , но один может быть связан ровно с одним элементом формы.
�� При клике на событие клика вызывается также и на связанном элементе формы.
�� По умолчанию является строчным элементом и стилизуется аналогично или .
На практике
Скопировать ссылку "На практике" Скопировано
Денис Ежков советует
Скопировать ссылку "Денис Ежков советует" Скопировано
�� Обязательно связывайте с чекбоксами и радиокнопками. Это небольшие элементы интерфейса, в которые довольно сложно попасть курсором мыши или пальцем на мобильных устройствах. Если у них есть связанный , то пользователь может кликать по тексту подписи, а не целиться в сам чекбокс. Любите своих пользователей! ��
Алёна Батицкая советует
Скопировать ссылку "Алёна Батицкая советует" Скопировано
�� Даже если дизайнер нарисовал форму, в которой не предусмотрены явные лейблы для элементов, то вам нужно всё равно прописать их в разметке и скрыть через стили. В этом случае их будет не видно, но скринридер их прочитает.
�� При нажатии на лейбл, связанный с полем ввода или другим элементом формы, фокус будет перемещён на этот элемент.
На собеседовании
Скопировать ссылку "На собеседовании" Скопировано
Какая разница между legend , caption и label с точки зрения доступности? Что между ними общего?
Скопировать ссылку "Какая разница между legend, caption и label с точки зрения доступности? Что между ними общего?" Скопировано
Скопировать ссылку "Матвей Романов отвечает" Скопировано
Элемент используется для создания группового заголовка или подписи элементов внутри . Он помогает описать или идентифицировать группу элементов в форме. С точки зрения доступности использование может быть полезным для сценариев чтения с экрана, поскольку он явно связывает группу элементов с их заголовком.
Элемент используется для связывания подписи с элементом формы — , или . Он помогает пользователю понять, какому полю ввода принадлежит текст подписи. С точки зрения доступности использование элемента позволяет пользователям использовать элементы формы без необходимости точного наведения на соответствующее поле ввода и повышает удобство использования для людей с инвалидностью.
Таким образом, сходство между этими элементами заключается в том, что все они предоставляют текстовое содержимое, которое помогает описывать, идентифицировать или связывать элементы в HTML-документе. Однако каждый элемент имеет свою специфическую функциональность и применение, относящиеся к разным компонентам HTML-структуры.