HTML тег label. Правила написания HTML тега label

HTML тег label устанавливает связь между определенной меткой и элементом формы (input, select, textarea)

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

Настольные Мобильные

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

Есть два способа связывания объекта и метки:

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

Правила написания тега label

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

<!-- Вариант 2 -->
<label><input type="...">Текст</label>

Атрибуты HTML тега label

Пример с тегом label

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Тег label</title>
</head>
<body>

<form action="handler.php" method="post">
 <h3>Выберите товары:</h3>
 <div>
    <input type="radio" name="ans" value="a1" id="check1" selected>
    <label for="check1">планшет</label>
 </div>
 <div>
    <input type="radio" name="ans" value="a2" id="check2">
    <label for="check2">защитная пленка</label>
 </div>
 <div>
    <input type="radio" name="ans" value="a3" id="check3">
    <label for="check3">чехол</label>
 </div>
 <div>
    <input type="radio" name="ans" value="a4" id="check4">
    <label for="check4">клавиатура</label>
 </div>
 <div><input type="submit"></div>
</form>

</body>
</html>

Результат примера вы можете увидеть на рисунке ниже: