Пример
Сгруппируйте связанные элементы в форме:
form action="/action_page.php"
fieldset
legendPersonalia:/legend
label for="fname"Имя:/label
input type="text" id="fname" name="fname"brbr
label for="lname"Фамилия:/label
input type="text" id="lname" name="lname"brbr
label for="email"Email:/label
input type="email" id="email" name="email"brbr
label for="birthday"День рождение:/label
input type="date" id="birthday" name="birthday"brbr
input type="submit" value="Submit"
/fieldset
/form
Попробуйте сами »
Определение и использование legend
Тег legend тег определяет заголовок для элемента fieldset.
Поддержка браузеров legend
| Элемент | |||||
|---|---|---|---|---|---|
| legend | Да | Да | Да | Да | Да |
Глобальные атрибуты legend
Тег legend также поддерживает Глобальные атрибуты в HTML.
События атрибутов legend
Тег legend также поддерживает События атрибутов в HTML.
Еще примеры legend
Пример
Пусть заголовок набора полей плавает вправо (с помощью CSS):
form action="/action_page.php"
fieldset
legend style="float:right"Персона:/legend
label for="fname"Имя:/label
input
type="text" id="fname" name="fname"brbr
label
for="lname"Фамилия:/label
input type="text"
id="lname" name="lname"brbr
label
for="email"Email:/label
input type="email"
id="email" name="email"brbr
label
for="birthday"День рождение:/label
input type="date"
id="birthday" name="birthday"brbr
input
type="submit" value="Submit"
/fieldset
/form
Попробуйте сами »
Пример
Используйте CSS для стилизации fieldset и legend:
html
head
style
fieldset {
background-color: #eeeeee;
}
legend {
background-color: gray;
color: white;
padding: 5px 10px;
}
input {
margin: 5px;
}
/style
/head
body
form action="/action_page.php"
fieldset
legendПерсона:/legend
label for="fname"Имя:/label
input type="text" id="fname" name="fname"brbr
label for="lname"Фамилия:/label
input type="text" id="lname" name="lname"brbr
label for="email"Email:/label
input type="email" id="email" name="email"brbr
label for="birthday"День рождение:/label
input type="date" id="birthday" name="birthday"brbr
input type="submit" value="Submit"
/fieldset
/form
/body
/html
Попробуйте сами »
Связные страницы legend
HTML DOM справочник: Объект legend
Настройки CSS по умолчанию legend
Большинство браузеров будут отображать элемент legend со следующими значениями по умолчанию:
Пример
legend {
display: block;
padding-left: 2px;
padding-right: 2px;
border: none;
}
Попробуйте сами »