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

<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>

Ссылки