Тег <label>
|
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
Идентификатор элемента, с которым следует установить связь.
Закрывающий тег
Обязателен.
Пример
<!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">Sitamet</label>
</p>
</form>
</body>
</html>
Браузеры
IE6 не позволяет активировать поле формы при щелчке по тексту, когда поле с текстом находится внутри тега <label>.
IE до версии 8.0 включительно корректно работает с <label> только при наличии в нём текста. Если добавить изображение (<label><img src="pic.jpg" alt=""></label> ), то активировать поле формы щелчком по картинке нельзя.
Формы