Перейти к содержанию

<label>

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

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

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

Демо

Формы

Синтаксис

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

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

Атрибуты

for

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

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

for

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

Синтаксис

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

Значения

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

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

Нет.

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

Описание и примеры

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!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>

Ссылки

Комментарии