Тег <label>

Синтаксис

<label>

Описание

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

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

Есть два способа связывания объекта и метки. Первый заключается в использовании идентификатора id внутри элемента формы и указании его имени в качестве атрибута for тега <label>. При втором способе элемент формы помещается внутрь контейнера <label>.

Тег <label> не нужно закрывать. Его можно разместить в контейнере <form>, для создания формы на веб-странице.

Атрибуты, которые можно использовать в теге <label>, указаны ниже. Также тег поддерживает глобальные атрибуты и атрибуты события.

Атрибуты

Атрибут	Значение	Описание
accesskey	клавиша	Определяет горячую клавишу, с помощью которой можно перейти к привязанному к метке (через атрибут for) элементу формы
for	id элемента	Указывает, к какому элементу формы привязана метка
form	id формы	Указывает одну или несколько форм, к которым принадлежит метка

Пример

HTML-код:

<!DOCTYPE html>

<head>

<title>Тег label</title>

</head>

<body>

<form action="/action_page.php" method="post">

<label for="first-name">Имя: </label>

<input type="text" name="firstName" id="first-name"><br/>

<label for="last-name">Фамилия: </label>

<input type="text" name="lastName" id="last-name"><br/>

</form>

</body>

</html>

Отображение в браузере:

Параметры CSS по умолчанию

label {
cursor: default;
}

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

Элемент	Chrome	Opera	Firefox	Safari	Microsoft Edge
<label>	Да	Да	Да	Да	Да

Элемент

Chrome

Opera

Firefox

Safari

Microsoft Edge