Тег HTML <label>
Тег <label> определяет текстовую метку для тега <input>. Нажатие на метку фокусирует или активирует связанный элемент формы. Это улучшает удобство использования форм, так как не всегда удобно точно наводить курсор на небольшие элементы управления.
Тег <label> также используется для определения сочетаний клавиш для фокусировки связанного элемента.
Поле ввода может быть связано с несколькими метками. Если вы нажмете или коснетесь <label>, связанного с элементом управления формой, событие нажатия будет сгенерировано для этого элемента управления.
Связывание <label> с элементом <input> имеет несколько преимуществ:
- Текстовая метка визуально и программно связана с полем ввода.
- Вы можете нажать на связанную метку для фокусировки или активации поля ввода, а также на само поле ввода.
Синтаксис
Тег <label> является парным. Содержимое записывается между открывающим (<label>) и закрывающим (<​/label>) тегами.
Существует два способа связать текстовую метку с элементом формы, к которому она относится:
- Установите идентификатор (
id) внутри элемента<input>и укажите его имя в качестве атрибутаforдля тега<label>.
Пример тега HTML <label>:
Пример тега HTML <label>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<form>
<label for="lfname">First name:</label>
<input id="lfname" name="fname" type="text" />
</form>
</body>
</html>Результат
- Вставьте
<input>внутрь элемента<label>. Примечание: Вложение поля ввода внутрь метки обычно предпочтительнее для обеспечения доступности и простоты кода.
Пример тега HTML <label> с элементом <input> внутри:
Пример тега HTML <label> с включенным тегом HTML <input>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<form>
<label>Name
<input id="User" name="Name" type="text" />
</label>
</form>
</body>
</html>Пример HTML <form> с тегом <label>, используемым с типом radio тега <input>:
Пример тега HTML <label> с типом radio тега HTML <input>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<form>
<label for="barca">Barcelona</label>
<input type="radio" name="team" id="barca" value="Barcelona" />
<br />
<label for="real">Real Madrid</label>
<input type="radio" name="team" id="real" value="Real Madrid" />
<br />
</form>
</body>
</html>Пример тега HTML <label> со свойствами CSS font:
Пример тега HTML <label> со свойствами CSS font
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
padding: 20px;
}
label {
font-size: 20px;
font-weight: 700;
color: #1c87c9;
}
input {
width: 50%;
height: 28px;
padding: 4px 10px;
border: 1px solid #666;
background: #cce6ff;
color: #1c87c9;
font-size: 16px;
}
</style>
</head>
<body>
<form>
<label>Your Name:</label>
<input id="User" name="Name" type="text"/>
</form>
</body>
</html>Атрибуты
| Атрибут | Значение | Описание |
|---|---|---|
accesskey | accesskey | Определяет сочетание клавиш для фокусировки связанного элемента формы (не перемещает и не прыгает к нему). |
for | element\_id | Устанавливает ID элемента, к которому должна быть привязана метка. |
form | form\_id | Указывает форму(ы), с которыми будет связана метка. Этот атрибут позволяет размещать теги в произвольном месте документа, а не только в качестве потомка элемента <form>. |
Элемент <label> также поддерживает Глобальные атрибуты и Атрибуты событий.
Пример атрибута form:
<form id="myForm">
<input type="text" name="username" />
</form>
<label for="username" form="myForm">Username:</label>Как стилизовать тег HTML <label>
{
"tag_name": "label"
}Практика
Какова цель тега HTML <label>?