Тег label в html для чего нужен
Перейти к содержимому

Тег label в html для чего нужен

  • автор:

Тег label в html для чего нужен

Подписывает поля ввода и другие элементы формы.

Время чтения: меньше 5 мин

Открыть/закрыть навигацию по статье

  1. Кратко
  2. Пример
  3. Как пишется
  4. Как понять
  5. Атрибуты
  6. Подсказки
  7. На практике
    1. Денис Ежков советует
    2. Алёна Батицкая советует
    1. Какая разница между legend, caption и label с точки зрения доступности? Что между ними общего?

    Контрибьюторы:

    Обновлено 8 сентября 2022

    Кратко

    Скопировать ссылку «Кратко» Скопировано

    Элемент используется для создания подписи к элементу формы:

    Пример

    Скопировать ссылку «Пример» Скопировано

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

    Как понять

    Скопировать ссылку "Как понять" Скопировано

    На многих веб-страницах есть формы — группы интерактивных элементов (полей ввода, выпадающих списков, чекбоксов и т.п.), связанных общим функциональным назначением. Яркие примеры форм — форма регистрации, форма входа, фильтры в каталогах. Формами удобно пользоваться, когда мы понимаем назначение каждого элемента. Для этого необходимо подписывать каждый элемент. И вот как раз для этих целей служит элемент .

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

    Чтобы связать с элементом формы можно пойти двумя путями:

    1. Задаём элементу формы атрибут id . Такое же значение задаём атрибуту for тега .
    2. Оборачиваем элемент формы в тег . В этом случае связь создаётся автоматически и нет необходимости в атрибутах 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-структуры.

    Тег 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

    Тег label в html для чего нужен

    **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 . Такой элемент управления называется помеченным элементом управления надписью. Один вход может быть связан с несколькими метками.
    • Метки сами по себе не связаны с формами. Они только косвенно связаны с формами через элементы управления, с которыми они связаны.

    Что такое label в HTML5?

    HTML тег .

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

    Атрибуты:

    • for - в качестве значения устанавливается id поля, к которому label принадлежит;
    • accesskey - устанавливает горячую клавишу для поля.

    Пример:

     

    Доступ по гарячим клавишам осуществляется в разных браузерах по разному:

    • Explorer: Alt + S
    • Google Chrome: Alt + S
    • Opera: Shift + Esc, S
    • Safari: Alt + S
    • Mozilla Firefox: Shift + Alt + S

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *