/ ↲
    Расширенный поиск

    HTML

    <label>

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

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

    Кратко

    Скопировано

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

    Пример

    Скопировано
            
          
          <div class="form-row">  <label for="bread">Купить хлеб</label>  <input type="checkbox" name="bread" id="bread"></div>
          <div class="form-row">
  <label for="bread">Купить хлеб</label>
  <input type="checkbox" name="bread" id="bread">
</div>

    Как пишется

    Скопировано
            
          
          <!-- Прямая связь с элементом формы (элемент формы внутри <label>) --><label>Click me <input type="text"></label><!-- Связь с элементом формы через атрибут for --><label for="username">Click me</label><input type="text" id="username">
          <!-- Прямая связь с элементом формы (элемент формы внутри <label>) -->
<label>Click me <input type="text"></label>

<!-- Связь с элементом формы через атрибут for -->
<label for="username">Click me</label>
<input type="text" id="username">

    Как понять

    Скопировано

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

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

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

    1. Задаём элементу формы атрибут id. Такое же значение задаём атрибуту for тега <label>.
    2. Оборачиваем элемент формы в тег <label>. В этом случае связь создаётся автоматически и нет необходимости в атрибутах id и for.
            
          
          <form action="">  <label for="phone">Ваш телефон:</label>  <input type="tel" name="phone" id="phone">  <label>    <input type="checkbox" name="agree">Согласен на обработку данных  </label></form>
          <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, становится связанным с нашим <label>. Единственное условие — элемент должен принадлежать к группе связываемых элементов: <button>, <input>, <meter>, <output>, <progress>, <select> и <textarea>.

    Если элемент с нужным id не является связываемым, то связь не создаётся, и даже если дальше по документу найдётся связываемый элемент с таким же id, то он уже не будет учитываться.

    Подсказки

    Скопировано

    💡 Один элемент формы может быть связан с несколькими <label>, но один <label> может быть связан ровно с одним элементом формы.

    💡 При клике на <label> событие клика вызывается также и на связанном элементе формы.

    💡 По умолчанию <label> является строчным элементом и стилизуется аналогично <span> или <a>.

    На практике

    Скопировано

    Денис Ежков советует

    Скопировано

    🛠 Обязательно связывайте <label> с чекбоксами и радиокнопками. Это небольшие элементы интерфейса, в которые довольно сложно попасть курсором мыши или пальцем на мобильных устройствах. Если у них есть связанный <label>, то пользователь может кликать по тексту подписи, а не целиться в сам чекбокс. Любите своих пользователей! 😉

    Алёна Батицкая советует

    Скопировано

    🛠 Даже если дизайнер нарисовал форму, в которой не предусмотрены явные лейблы для элементов, то вам нужно всё равно прописать их в разметке и скрыть через стили. В этом случае их будет не видно, но скринридер их прочитает.

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

    На собеседовании

    Скопировано
    Задать вопрос в рубрику
    🤚 Я знаю ответ

    Матвей Романов  отвечает

    Скопировано

    Элемент <legend> используется для создания группового заголовка или подписи элементов внутри <fieldset>. Он помогает описать или идентифицировать группу элементов в форме. С точки зрения доступности использование <legend> может быть полезным для сценариев чтения с экрана, поскольку он явно связывает группу элементов с их заголовком.

    Элемент <caption> используется для создания заголовка таблицы <table>. Он помещается перед телом таблицы и предоставляет описание или общую информацию о таблице. Относительно доступности элемент <caption> помогает пользователям понять содержание и контекст таблицы, что особенно важно для людей, использующих скринридеры.

    Элемент <label> используется для связывания подписи с элементом формы — <input>, <select> или <textarea>. Он помогает пользователю понять, какому полю ввода принадлежит текст подписи. С точки зрения доступности использование элемента <label> позволяет пользователям использовать элементы формы без необходимости точного наведения на соответствующее поле ввода и повышает удобство использования для людей с инвалидностью.

    Таким образом, сходство между этими элементами заключается в том, что все они предоставляют текстовое содержимое, которое помогает описывать, идентифицировать или связывать элементы в HTML-документе. Однако каждый элемент имеет свою специфическую функциональность и применение, относящиеся к разным компонентам HTML-структуры.

    Читайте также