HTML тег <label>

HTML теги

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

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

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

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

Атрибуты

АтрибутЗначениеОписание
forelement_idОпределяеть к какому элементу формы относится текущая метка.
formhtml5form_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>

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

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

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

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

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

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

label {
cursor : default;
}

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

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

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

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

HTML теги