Элементы fieldset и legend

Элементы fieldset и legend

Coursme
13 мин.
31 янв. 2024

Сегодня мы поговорим о двух важных элементах в HTML, которые используются для группировки и структурирования форм – <fieldset> и <legend>

Эти элементы придают вашим формам не только организованный вид, но и улучшают их доступность для пользователей.

<fieldset> Создание группы элементов формы

Элемент <fieldset> представляет собой контейнер, который служит для группировки связанных элементов формы. Он создает визуальный блок вокруг этих элементов, делая форму более структурированной. Давайте рассмотрим пример использования:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Form with Fieldset and Legend</title>
    <style>
        /* Добавим стили для красивого вида формы */
        fieldset {
            border: 2px solid #007BFF;
            border-radius: 8px;
            padding: 16px;
            margin-bottom: 20px;
        }

        label {
            display: block;
            margin-bottom: 8px;
        }

        input, textarea {
            width: 100%;
            padding: 8px;
            box-sizing: border-box;
            margin-bottom: 12px;
        }
    </style>
</head>
<body>

    <form>
        <fieldset>
            <legend>Контактная информация</legend>
            <label for="name">Имя:</label>
            <input type="text" id="name" name="name" required>

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

        <fieldset>
            <legend>Дополнительная информация</legend>
            <label for="comments">Комментарии:</label>
            <textarea id="comments" name="comments" rows="4"></textarea>
        </fieldset>

        <button type="submit">Отправить</button>
    </form>

</body>
</html>

В этом примере у нас есть два <fieldset> – один для контактной информации и другой для дополнительной информации. Обратите внимание на использование стилей для придания форме более привлекательного вида.

<legend> Добавление заголовка к группе полей

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

<fieldset>
   <legend>Контактная информация</legend>
   <label for="name">Имя:</label>
   <input type="text" id="name" name="name" required>
   <br>
   <label for="email">Email:</label>
   <input type="email" id="email" name="email" required>
</fieldset>

Теперь текст "Контактная информация" будет отображаться как заголовок для этой группы полей.

Элементы <fieldset> и <legend> – отличные инструменты для улучшения структуры форм и обеспечения лучшей визуальной организации. Используйте их с умом в своих проектах! Удачи в изучении HTML!

Заключение

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

Назад
Следующий тест
Комментарии
Чтобы оставлять комментарии — надо авторизоваться
Комментариев еще нет
Будьте первым
Главная
Курсы
Блог
Меню