HTML-тег <легенда>

HTML-тег <legend> используется для определения заголовка или подписи для элемента <fieldset> . Он обеспечивает контекст и помогает группировать связанные элементы управления форм внутри <fieldset> , улучшая структуру и доступность форм.

Тег <legend> обычно отображается в верхней части элемента <fieldset> , предоставляя четкую метку для группы полей, которые он представляет.

Базовый синтаксис тега HTML <legend>

Тег <legend> используется внутри элемента <fieldset> следующим образом:

<fieldset>
    <legend>Caption for the fieldset</legend>
    Form controls go here.
</fieldset>

Тег <legend> повышает удобство использования и доступность сгруппированных элементов управления форм, предоставляя описательную подпись.

Атрибуты HTML-тега <legend>

Глобальные атрибуты: Тег <legend> поддерживает все глобальные атрибуты, такие как id , class и style .
Атрибуты событий: также поддерживаются такие атрибуты событий, как onclick , onmouseover и onfocus .

Базовый пример HTML-тега <legend>

Вот простой пример использования тега <legend> для маркировки группы связанных полей формы:

<!DOCTYPE html>
<html>
    <body>
        <fieldset>
            <legend>Personal Information</legend>
            <label for="name">Name:</label>
            <input type="text" id="name" name="name">



            <label for="email">Email:</label>
            <input type="email" id="email" name="email">


        </fieldset>
    </body>
</html>

Пояснение: Тег <legend> предоставляет заголовок для группы полей, связанных с персональными данными.

Пример с несколькими наборами полей

Тег <legend> полезен при работе с несколькими элементами <fieldset> :

<!DOCTYPE html>
<html>
    <body>
        <form>
            <fieldset>
                <legend>Personal Information</legend>
                <label for="fname">First Name:</label>
                <input type="text" id="fname" name="fname">



                <label for="lname">Last Name:</label>
                <input type="text" id="lname" name="lname">


            </fieldset>

            <fieldset>
                <legend>Contact Details</legend>
                <label for="phone">Phone:</label>
                <input type="tel" id="phone" name="phone">



                <label for="address">Address:</label>
                <input type="text" id="address" name="address">


            </fieldset>
        </form>
    </body>
</html>

Пояснение: Форма содержит два набора полей, каждый из которых помечен тегом <legend> , что позволяет четко распределять входные данные по категориям.

Оформление тега <legend> с помощью CSS

Вы можете стилизовать тег <legend> так, чтобы он соответствовал дизайну формы, используя CSS:

<!DOCTYPE html>
<html>
    <head>
        <style>
            fieldset {
                border: 2px solid #007BFF;
                padding: 15px;
                margin-bottom: 20px;
            }

            legend {
                font-weight: bold;
                font-size: 1.2em;
                color: #007BFF;
                padding: 5px 10px;
                background-color: #f0f0f0;
                border-radius: 5px;
            }

            label {
                display: block;
                margin-bottom: 5px;
                font-size: 1em;
            }
        </style>
    </head>
    <body>
        <fieldset>
            <legend>User Details</legend>
            <label for="username">Username:</label>
            <input type="text" id="username" name="username">



            <label for="password">Password:</label>
            <input type="password" id="password" name="password">
        </fieldset>
    </body>
</html>

Результат: Тег <legend> отображается с жирным текстом, особым фоном и отступами, что делает его визуально привлекательным.

Практическое применение тега <legend>

Организация форм: четко обозначьте группы связанных полей ввода в форме.
Улучшение доступности: предоставьте понятные подписи для программ чтения с экрана, упрощающие навигацию по формам.
Эстетика формы: используйте <legend> для создания визуально привлекательных заголовков для разделов формы.
Сложные формы: улучшение читаемости и структуры многосекционных форм.