<label>

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

HTML-элемент <label> представляет собой подпись к элементу пользовательского интерфейса.

Категории контента Общий поток, текстовый контент, интерактивный контент, элемент формы, ощутимый контент.
Допустимый контент Текстовый контент, но без вложенных элементов label. Недопустимы другие оборачиваемые в label элементы помимо целевого.
Пропуск тегов Нет, открывающий и закрывающий теги обязательны.
Допустимые родители Любой элемент, разрешающий текстовый контент.
Допустимые ARIA-роли Нет
DOM-интерфейс HTMLLabelElement

Атрибуты

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

for

ID labelable-элемента, который находится в том же документе, что и элемент label. Первый такой элемент в документе, ID которого совпадает со значением атрибута for, становится labeled-* контролом для данного label.

Примечание: Элемент label может иметь как атрибут for, так и отдельный элемент управления, если атрибут for указывает на содержащийся элемент управления.

form

Элемент формы, с которым связан label (его владелец формы). Если указано, значением атрибута является идентификатор элемента <form> в том же документе. Это позволяет размещать элементы label в любом месте документа, а не только как потомки их элементов формы.

Примечание: Этот атрибут содержимого был удалён из спецификации HTML 28 апреля 2016 г. Однако сценарии по-прежнему имеют доступ только для чтения HTMLLabelElement.form; он возвращает форму, членом которой является связанный элемент управления label, или значение NULL, если label не связана с элементом управления или элемент управления не является частью формы.

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

  • <label> можно связать с элементом управления, поместив элемент управления внутри элемента <label> или используя атрибут for. Такой элемент управления называется помеченным элементом управления надписью. Один вход может быть связан с несколькими метками.
  • Метки сами по себе не связаны с формами. Они только косвенно связаны с формами через элементы управления, с которыми они связаны.

Examples

Simple label example

html
<label>Click me <input type="text" /></label>

Using the "for" attribute

html
<label for="username">Click me</label> <input type="text" id="username" />

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

Specification
HTML
# the-label-element

Совместимость с браузерами

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
label
for

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

Смотрите также