HTML тег <label>

Поддержка браузерами

Описание

HTML тег <label> (в переводе с англ. - метка) определяет текстовую метку для элемента <input>. По своему виду метка ничем не отличается от обычного текста, однако она позволяет пользователю выбрать элемент формы простым кликом по тексту, расположенному внутри элемента <label>, а не по самому элементу <input>. Чтобы определить к какому элементу формы относится текущая метка, необходимо использовать атрибут for тега <label>. Значение атрибута for должно быть эквивалентно значению атрибута id того элемента формы, к которому будет относится метка.

Атрибутом "for" можно не пользоваться, если элемент <input> будет находиться внутри элемента <label>.

Атрибуты

for:

Устанавливает связь с элементом формы, к которому будет относится метка. В качестве значения для атрибута выступает идентификатор целевого элемента. Пример »

form:

Определяет форму с которой будет связана метка. В качестве значения атрибута выступает идентификатор элемента <form>. Этот атрибут позволяет размещать метки в произвольном месте документа, а не только в качестве потомка элемента <form>. Пример »

Тег <label> так же поддерживает Глобальные атрибуты и События

Стиль по умолчанию

label {
    cursor: default;
}  

Пример

<form>
  <label for="male">Male</label>
  <input type="radio" name="sex" id="male">
  <br>
  <label for="female">Female</label>
  <input type="radio" name="sex" id="female">
</form>

<p>или тоже самое только без использования атрибута for</p>

<form>
  <label>Male<input type="radio" name="sex" id="male"></label>
  <br>
  <label>Female<input type="radio" name="sex" id="female"></label>
</form> 

Результат данного примера в окне браузера: