HTML тег <label>

Значение и применение

Тег <label> (англ. - метка) служит текстовой меткой для элемента <input>. По своему виду метка ничем не отличается от обычного текста, но благодаря ей пользователь может выбрать элемент формы кликом по тексту, расположенному внутри элемента <label>, а не по самому элементу <input>.

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

Тег	Chrome	Firefox	Opera	Safari	IExplorer	Edge
<label>	Да	Да	Да	Да	Да	Да

Атрибуты

Атрибут	Значение	Описание
for	element_id	Определяеть к какому элементу формы относится текущая метка.
form	form_id	Определяет форму/формы с которой будет связана метка. В качестве значения атрибута выступает идентификатор элемента <form> (<form id = "вот это значение">). Этот атрибут позволяет размещать метки в произвольном месте конкретного документа, а не только внутри тега <form>. Этот атрибут был удален из спецификации HTML 28 апреля 2016 года, но скрипты имеют доступ только для чтения `HTMLLabelElement.form` (возвращает форму с которой связана метка, либо "0", если метка не связана с формой).

Пример использования

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

Рассмотрим пример использования:

<!DOCTYPE html>
<html>
	<head>
		<title>Пример использования тега <label></title>
	</head>
	<body>
		<form>
			<label for = "yes">Да</label> <!--Здесь мы создаём метку для тега input c id = "yes"-->
			<input type = "radio" id = "yes"name = "choice" value = "yes" checked> 
			<label for = "no">Нет</label><!--Здесь мы создаём метку для тега input c id = "no"-->
			<input type = "radio"id = "no" name = "choice" value = "no">
		</form><br>
		<form>
			<label>Да <input type = "radio" name = "choice2" value = "yes"> </label><!--Здесь мы  помещаем теги <input>
			внутрь тегов <label> (при этом атрибут for не требуется)-->
			<label>Нет <input type = "radio"name = "choice2" value = "no" checked></label> 
		</form> 
	</body>
</html>

В этом примере мы:

Внутри первой формы:
- Разместили две радиокнопки (<input type = "radio">) для выбора одного из ограниченного числа вариантов. Еще раз обратите внимание, что для радиокнопок внутри одной формы необходимо указывать одинаковое имя, значения мы указали разные. Для первой радиокнопки мы указали атрибут checked, который указывает, что элемент должен быть предварительно выбран при загрузке страницы (в данном случае радиокнопка со значением yes). Кроме того, мы указали для радиокнопок глобальные атрибуты id, которые определяют уникальный идентификатор для элемента.
- Разместили два элемента <label>, которые определяют текстовые метки для наших текстовых полей. Обратите внимание, что мы использовали атрибут for, чтобы определить к какому элементу формы относится текущая метка. Значение атрибута for соответствует значению глобального атрибута id необходимой нам радиокнопки.
Внутри второй формы:
- Разместили две радиокнопки (<input type = "radio">) для выбора одного из ограниченного числа вариантов. Для второй радиокнопки мы указали атрибут checked, который указывает, что элемент должен быть предварительно выбран при загрузке страницы (в данном случае радиокнопка со значением no). Кроме того, мы указали для радиокнопок уникальные значения в рамках формы и одинаковые имена.
- Разместили два элемента <label>, внутри них мы разместили наши радиокнопки. В отличии от предыдущего метода отсутствует необходимость указывать для радиокнопок глобальные атрибуты id (идентификатор для элемента), а для текстовых меток использовать атрибут for, чтобы на них сослаться (сделать привязку).

В браузере оба варианта (метода) использования текстовых меток выглядят идентично:

Пример использования HTML тега <label> (использование текстовой метки).

Отличия HTML 4.01 от HTML 5

В HTML 5 был введён новый атрибут form html5

Значение CSS по умолчанию

label {
cursor : default;
}

Поддержка глобальных атрибутов

Элемент поддерживает "глобальные атрибуты".

Атрибуты событий

Элемент поддерживает "атрибуты событий".

HTML теги