<label>

Что делает тег

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

Использовать тег можно двумя способами:

• Добавить рядом с элементом формы. В таком случае <label> добавляется атрибут for, значением которого будет идентификатор соответствующего элемента формы.
• Обернуть элемент формы в тег <label>.

Синтаксис тега <label>

Первый способ:

<label for="input-id">Метка</label>
<input type="text" id="input-id">>

Второй способ:

<label>Метка<input type="text"></label>

Спецификация HTML

Тег <label> является частью спецификации HTML Living Standard.

Семантический или нет

Тег <label> считается семантическим, поскольку несёт в себе смысл и точно передаёт назначение своего содержимого.

Примеры использования

Описание для поля ввода имени:

<label for="username">Имя пользователя:</label>
<input type="text" id="username" name="username">>

Описание для поля ввода почты:

<label for="email">Электронная почта:</label>
<input type="email" id="email" name="email">>

Описание для поля ввода адреса

<label>Адрес<input type="text" name="address"></label>

Для чего использовать тег <label>

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

Атрибуты тега <label>

for — указывает, к какому элементу формы привязана подпись.

Глобальные атрибуты

Тег поддерживает все глобальные атрибуты HTML.

Ограничения

Для использования тега <label> нет никаких ограничений.

Нюансы

Чтобы связать подпись с элементом формы, ID элемента должен совпадать со значением атрибута for тега <label>.

Поддержка браузерами

Тег поддерживается всеми современными браузерами. Актуальная информация — на сaniuse.

Альтернативные теги

Альтернативных тегов для тега <label> не существует.

Чем заменить тег

Прямой замены тегу <label> не существует.

Актуальность

Тег <label> не устарел, можете использовать его в веб-разработке.

Хотите узнать больше об HTML-тегах?

Прочитайте справочник по HTML или познакомьтесь с вёрсткой на интерактивных тренажёрах в HTML Academy.

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.