Тег <label>

23.09.2010

Влад Мержевич

Internet Explorer		Chrome	Opera	Safari	Firefox	Android	iOS
5.0+	7.0+	1.0+	4.0+	1.2+	1.0+	1.0+	1.0+

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

HTML:

3.2

4.01

5.0

XHTML:

1.0

1.1

Описание

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

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

Синтаксис

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

Атрибуты

accesskey: Доступ к элементам формы с помощью горячих клавиш.
for: Идентификатор элемента, с которым следует установить связь.

Закрывающий тег

Обязателен.

Пример

HTML5IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег LABEL</title>
 </head>
 <body>
  <form action="handler.php">
   <p><b>Lorem ipsum dolor sit amet...</b></p>
   <p><input type="checkbox" id="check1"><label for="check1">Lorem</label><Br>
   <input type="checkbox" id="check2"><label for="check2">Ipsum</label><Br>
   <input type="checkbox" id="check3"><label for="check3">Dolor</label><Br>
   <input type="checkbox" id="check4"><label for="check4">Sit amet</label></p>
  </form> 
 </body>
</html>

Браузеры

IE6 не позволяет активировать поле формы при щелчке по тексту, когда поле с текстом находится внутри тега <label>.

IE до версии 8.0 включительно корректно работает с <label> только при наличии в нём текста. Если добавить изображение (<label><img src="pic.jpg" alt=""></label> ), то активировать поле формы щелчком по картинке нельзя.

Строчные элементы Формы