HTML :: Тег <label>

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

Синтаксис

	<label>Текст<input></label>		 
	
	<input id="Идентификатор">
	<label for="Идентификатор">Текст</label>	 
	
	Закрывающий тег: обязателен.

Атрибуты

for – служит для установления связи с элементом пользовательского интерфейса формы и в качестве значения принимает id этого элемента.
form – связывает элемент <label> с формой, в качестве значения принимая соответствующее значение атрибута id формы. Это может потребоваться в случае, когда элемент расположен за пределами формы.
Также для элемента доступны универсальные атрибуты и соответствующие атрибуты-события.

Ссылки

Официальный сайт W3C: https://html.spec.whatwg.org/multipage/forms.html#the-label-element

Статья на Mozilla Firefox: https://developer.mozilla.org/ru/docs/Web/HTML/Element/label

Примеры

HTML Результат

htmlCodes

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Пример №1</title>
</head>
<body>
	
<form action="php/reg.php" method="POST" name="reg_form">
 
	<!-- Поле для загрузки фото -->
	<label>Загрузить фото: <input type="file"></label><br><br

	<!-- Связываем текст с текстовым полем -->
	<label for="comment"> Оставить комментарий: </label><br><br>
	 
	<!-- Ширина - 40 символов, высота - 5 строк -->
	<textarea id="comment" cols="40" rows="5"></textarea><br><br>

	<!-- Кнопка отправки данных на сервер -->
	<label style="border: 1px solid grey; padding: 2px">
		Отправить<button style="display: none"></button>
	</label>
	
</form>	
</body>
</html>

Пример №1