<label> ^HTML

Become a Patron!

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

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

Существует два способа связывания объекта и метки. Первый заключается в использовании идентификатора id внутри элемента формы и указании его имени в качестве атрибута for элемента <label>. При втором способе элемент формы помещается внутрь контейнера <label>.

Синтаксис

<input id="<идентификатор>"><label for="<идентификатор>">Текст</label>
<label><input> Текст</label>

Закрывающий тег обязателен.

WAI ARIA

Нет значения role по-умолчанию.

Атрибуты

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

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

for

Задаёт уникальный идентификатор, определяемый с помощью атрибута id элемента <input>, с которым следует установить связь. Атрибут for необходимо задавать в том случае, когда элемент формы и текст разделены. Если <input> размещается внутри контейнера <label>, то применять атрибут for не требуется.

Синтаксис

    <label for="<идентификатор>">...</label>

Значения

Имя идентификатора. Такое имя чувствительно к регистру, поэтому его следует писать так же, как оно описано внутри элемента <input>.

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

Нет.

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

Примеры

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8">
        <title>LABEL</title>
    </head>
    <body>
        <form action="handler.php">
            <p><b>Выберите напиток</b></p>
            <p><input type="checkbox" id="check1"><label for="check1">Коньяк</label><br>
            <input type="checkbox" id="check2"><label for="check2">Арманьяк</label><br>
            <input type="checkbox" id="check3"><label for="check3">Кальвадос</label><br>
        </form> 
    </body>
</html>

В начало

<label> HTML