Атрибут тега label - for. назначение атрибута for

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

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

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

Правила написания атрибута for для тега label

<label for="Имя идентификатора">Текст</label>

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

Пример с тегом label и атрибутом for

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Тег label, атрибут for</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>

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