Тег HTML `<legend>`
The <legend> tag sets the caption for the group of form elements defined by the <field> tag. Description, attributes and using examples.
Тег `<legend>` определяет заголовок для группы элементов формы, обернутых в тег `<fieldset>`. В браузере fieldset визуально обрамляется, а заголовок legend отображается внутри этой рамки. Обычно он должен быть первым дочерним элементом `<fieldset>`. Группировка связанных элементов формы с помощью `<fieldset>` и заголовков `<legend>` улучшает доступность и удобство использования для сложных форм.
Синтаксис
Тег `<legend>` парный. Содержимое записывается между открывающим `<legend>` и закрывающим `</legend>` тегами.
Пример использования тега HTML `<legend>`:
Тег HTML `<legend>`
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<form>
<fieldset>
<legend>Personal data:</legend>
Name:
<input type="text" />
<br>
<br> E-mail:
<input type="email" />
<br>
<br> Date of birth:
<input type="number" />
<br>
<br> Place of birth:
<input type="text" />
</fieldset>
</form>
</body>
</html>Результат
Пример использования тега HTML `<legend>` с CSS:
Пример использования тега `<legend>` со свойствами CSS:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
form {
width: 55%;
}
fieldset {
padding: 25px;
}
label {
display: inline-block;
width: 95px;
text-align: right;
}
legend {
display: block;
padding: 15px;
margin-bottom: 10px;
background-color: #cccccc;
color: #777777;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>Personal data:</legend>
<label>Name:</label>
<input type="text" />
<br>
<br>
<label>E-mail:</label>
<input type="email" />
<br>
<br>
<label>Date of birth:</label>
<input type="number" />
<br>
<br>
<label>Place of birth:</label>
<input type="text" />
</fieldset>
</form>
</body>
</html>Атрибуты
| Атрибут | Значение | Описание |
|---|---|---|
| align | left right center justify | Определяет выравнивание заголовка. Устарел в HTML5; вместо него используйте CSS text-align или padding. |
Тег `<legend>` поддерживает Глобальные атрибуты и Атрибуты событий.
Как стилизовать тег HTML `<legend>`
Вы можете стилизовать элемент `<legend>` с помощью стандартных свойств CSS, таких как padding, margin, background-color и font-weight, как показано в предыдущем примере.
Практика
Какова основная функция тега HTML <legend>?