Тег <legend>
Тег <legend> (укр. — “легенда”, “заголовок групи полів”) в HTML використовується для додавання заголовка до елемента <fieldset>. Він описує призначення групи полів форми та покращує як візуальне сприйняття, так і доступність для допоміжних технологій (екранних читалок, навігаторів тощо). Зазвичай текст у <legend> відображається у верхній частині рамки <fieldset>.
Атрибути
Специфічні атрибути
Тег <legend> не має власних специфічних атрибутів.
Глобальні атрибути
Тег <legend> підтримує всі глобальні атрибути HTML, зокрема:
- id — унікальний ідентифікатор для елемента. Наприклад:
<fieldset>
<legend id="user-data-legend">Дані користувача</legend>
<input type="text" name="username">
</fieldset>- class — задає клас для стилізації елемента за допомогою CSS. Наприклад:
<fieldset>
<legend class="section-title">Контактна інформація</legend>
<input type="email" name="email">
</fieldset>- style — дозволяє задавати інлайн-стилі безпосередньо на елемент. Наприклад:
<fieldset>
<legend style="font-weight: bold; color: darkgreen;">Особисті дані</legend>
<input type="text" name="first-name">
</fieldset>- title — текстова підказка, яка з’являється при наведенні курсора на елемент. Наприклад:
<fieldset>
<legend title="Це заголовок групи">Параметри</legend>
<input type="checkbox" name="subscribe"> Підписатися
</fieldset>- lang — вказує мову контенту елемента. Наприклад:
<fieldset>
<legend lang="en">Personal Info</legend>
<input type="text" name="name">
</fieldset>Приклад використання
<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Приклад використання <legend></title>
</head>
<body>
<form action="/submit" method="post">
<fieldset>
<legend>Дані користувача</legend>
<label for="name">Ім’я:</label>
<input type="text" id="name" name="name"><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email">
</fieldset>
<fieldset>
<legend>Опції</legend>
<label><input type="checkbox" name="newsletter"> Підписатися на новини</label>
</fieldset>
<button type="submit">Відправити</button>
</form>
</body>
</html>Додаткові моменти
- Тег
<legend>може з’являтися тільки всередині<fieldset>і повинен бути першим дочірнім елементом у ньому. - Допомагає покращити доступність, дозволяючи читачам з порушенням зору легше орієнтуватися в групах полів.
- Може містити будь-який текстовий вміст, а також інші інлайн-елементи (наприклад,
<span>,<strong>). - Тег
<legend>є семантичним, тому його слід використовувати завжди, коли є логічна група полів. - Тег не підтримує вкладені блокові елементи всередині (наприклад,
<div>). - Підтримується всіма сучасними браузерами без проблем із сумісністю.
- Може бути стилізований за допомогою CSS як будь-який інший блоковий або рядковий елемент, хоча деякі браузери додають специфічне оформлення за замовчуванням.
