Элемент label

Атрибут Описание
for Ссылается на идентификатор целевого элемента: for="surname"
form Является устаревшим. Ссылка на форму, содержащую целевой элемент. Элементы <label> ожидаются в элементе <form>, а использование атрибута form="someFormId" позволяет помещать ярлык в любом месте документа.

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

Данный элемент может содержать в себе элемент управления:

<label>
    <input type="checkbox" name="Cats">
    Мне нравятся кошки!
</label>

(Щелчок на тексте сменит состояние флажка)

Не используйте более одного элемента управления в элементе <label>

Используя атрибут for, не нужно помещать элемент управления внутрь <label>, достаточно указать в атрибуте for соответствующий идентификатор:

<input id="cats" type="checkbox" name="Cats">
<label for="cats" >Мне нравятся кошки!</label>

Простая форма с метками:

<form action="/login" method="POST">
    <label for="username">Имя пользователя:</label>
    <input id="username" type="text" name="username" />
    <label for="pass">Пароль:</label>
    <input id="pass" type="password" name="pass" />
<input type="submit" name="submit" />
</form>

или

<form id="my-form" action="/login" method="POST">
    <input id="username" type="text" name="username" />
    <label for="pass">Пароль:</label>
    <input id="pass" type="password" name="pass" />
    <input type="submit" name="submit" />
</form>
<label for="username" form="my-form">Имя пользователя:</label>