<label>¶

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

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

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

Демо¶

Формы

Синтаксис¶

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

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

Атрибуты¶

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 />
            </p>
        </form>
    </body>
</html>

Ссылки¶

Тег <label> ^{MDN (рус.)}