HTML тег <label>

Значение и применение

Тег <label> (англ. - метка) служит текстовой меткой для элемента <input>. По своему виду метка ничем не отличается от обычного текста, но благодаря ей пользователь может выбрать элемент формы кликом по тексту, расположенному внутри элемента <label>, а не по самому элементу <input>.

Попробуйте label в тренажёре HTML-форм: настройте поле, проверьте ввод и разберите результат.

Подпись связана с полем, если её for равен уникальному id поля. Другой вариант — вложить одно поле непосредственно в <label>. Подписывать можно также <select>, <textarea>, <output>, <meter> и <progress>. Видимый текст рядом без связи не заменяет метку.

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

Спецификация: multipage

Поддерживается во всех основных браузерах с 2015 года.

Показать браузеры
Совместимостьhtml.elements.label
ВозможностьКомпьютерыМобильные
ChromeEdgeFirefoxOperaSafariChrome AndroidFirefox for AndroidOpera AndroidSafari on iOSSamsung BrowserWebView AndroidWebView on iOS
label✓1✓12✓1✓15✓≤4✓18✓4✓14✓≤3.2✓1.0✓4.4✓≤3.2
for✓1✓12✓1✓15✓≤4✓18✓4✓14✓≤3.2✓1.0✓4.4✓≤3.2

поддерживаетсяс ограниченияминет поддержкинет данных≤31 — не позднее версии 31

Атрибуты

Атрибут Значение Описание
for element_id Определяеть к какому элементу формы относится текущая метка.
form form_id Устарело. Атрибут удалён из стандарта; для связи метки с полем используйте for. Свойство JavaScript label.form доступно только для чтения и возвращает форму связанного поля или null.

Примеры, попробуйте сами

Связь подписи и поля

Нажмите подпись: поле получает фокус, флажок переключается.

index.html
HTML
<p><label for="user">Имя</label><input id="user" /></p>
<p>
  <label><input type="checkbox" /> Получать новости</label>
</p>

Отличия HTML 4.01 от HTML 5

В HTML 5 был введён новый атрибут form.

Значение CSS по умолчанию

CSS
label {
cursor : default;
}

Поддержка глобальных атрибутов

Элемент поддерживает "глобальные атрибуты".

Атрибуты событий

Элемент поддерживает "атрибуты событий".