Группировка элементов формы (fieldset, legend)

Тренажер по HTML для пользователей с начальным уровнем подготовки.

Опубликовано 04.04.2025
Просмотры 21
Автор
Рек. время прохождения 2 минуты
Упражнений 7
Комментарии 0
Тренажер HTML
В этой серии заданий мы поработаем с группировкой элементов формы. Часто, когда вы создаете большие формы, например, для регистрации или оформления заказа, поля можно объединить в логические блоки. Для этого в HTML существуют специальные теги — `<fieldset>` и `<legend>`. Тег `<fieldset>` создает рамку вокруг группы полей, визуально объединяя их, а `<legend>` добавляет заголовок для этой группы. Это не только улучшает внешний вид формы, но и делает ее более понятной и доступной для пользователей, в том числе для тех, кто использует скринридеры. Выполняя задания, вы научитесь правильно структурировать формы, делая их удобными и профессиональными.
Список тем

Создание первой группы полей

id: 37851_html_form_grouping_01

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

CSS
body {
  font-family: sans-serif;
}
form {
  padding: 10px;
}
fieldset {
  border: 2px solid #ccc;
  border-radius: 8px;
  padding: 15px;
}
input {
  margin-bottom: 10px;
  width: calc(100% - 10px);
  padding: 5px;
}
HTML
<form>
  <input1>
    <label for="product_id">ID товара:</label><br>
    <input type="text" id="product_id" name="product_id" value="A-541"><br>
    <label for="quantity">Количество:</label><br>
    <input type="number" id="quantity" name="quantity" value="1">
  <input2>
</form>
Чтобы сгруппировать элементы формы, используйте парный тег `<fieldset>`. Открывающий тег нужно поставить перед первым элементом, а закрывающий — после последнего.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Добавление заголовка к группе

id: 37851_html_form_grouping_02

Теперь, когда у нас есть группа полей, обрамленная рамкой, ей не хватает названия. Добавьте заголовок «Параметры фильтра» для этой группы, используя соответствующий тег.

CSS
body {
  font-family: sans-serif;
}
form {
  padding: 10px;
}
fieldset {
  border: 2px solid #ccc;
  border-radius: 8px;
  padding: 15px;
}
legend {
  font-weight: bold;
  color: #333;
  padding: 0 5px;
}
HTML
<form>
  <fieldset>
    <input1>Параметры фильтра</input2>
    <label for="category">Категория:</label><br>
    <input type="text" id="category" name="category" value="Электроника">
  </fieldset>
</form>
Для создания заголовка внутри `<fieldset>` используется тег `<legend>`. Его нужно разместить сразу после открывающего тега `<fieldset>`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Группировка флажков (checkbox)

id: 37851_html_form_grouping_03

Теги группировки отлично подходят для объединения связанных флажков. Сгруппируйте чекбоксы с выбором опций подписки и добавьте им заголовок «Настройки уведомлений».

CSS
body {
  font-family: sans-serif;
}
fieldset {
  border: 1px dotted #999;
  border-radius: 5px;
  padding: 10px 15px;
  margin: 15px 0;
}
legend {
  font-style: italic;
  color: #555;
}
HTML
<form>
  <input1>
    <input2>Настройки уведомлений</input2>
    <input type="checkbox" id="news" name="news" checked>
    <label for="news">Новости сайта</label><br>
    <input type="checkbox" id="promo" name="promo">
    <label for="promo">Акции и скидки</label><br>
    <input type="checkbox" id="updates" name="updates" checked>
    <label for="updates">Обновления продукта</label>
  </input1>
</form>
Вам снова понадобятся теги `<fieldset>` для создания группы и `<legend>` для её заголовка. Оберните все чекбоксы и их метки в `<fieldset>`, а затем добавьте `<legend>`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Группировка радиокнопок

id: 37851_html_form_grouping_04

Радиокнопки почти всегда используются группами. Давайте оформим выбор способа доставки. Создайте группу с заголовком «Способ доставки» для представленных радиокнопок.

CSS
body {
  font-family: sans-serif;
}
fieldset {
  background-color: #f9f9f9;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  padding: 15px;
}
legend {
  font-weight: bold;
  font-size: 1.1em;
  padding: 0 10px;
  margin-left: 10px;
}
HTML
<form>
  <input1>
    <input2>Способ доставки</input2>
    <input type="radio" id="courier" name="delivery" value="courier" checked>
    <label for="courier">Курьером</label><br>
    <input type="radio" id="pickup" name="delivery" value="pickup">
    <label for="pickup">Самовывоз</label><br>
    <input type="radio" id="post" name="delivery" value="post">
    <label for="post">Почта</label>
  </input1>
</form>
Задача аналогична предыдущей. Используйте `<fieldset>` для обертывания группы радиокнопок и `<legend>` для добавления заголовка.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Вложенные группы

id: 37851_html_form_grouping_05

Иногда требуется более сложная структура. Создайте основную группу «Настройки профиля». Внутри неё создайте еще одну, вложенную, группу «Приватность» для двух чекбоксов.

CSS
body {
  font-family: sans-serif;
}
fieldset {
  margin-bottom: 15px;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 10px;
}
fieldset fieldset {
  border-style: dashed;
  border-color: #999;
  background: #fdfdfd;
}
legend {
  font-weight: bold;
}
HTML
<form>
  <input1>
    <legend>Настройки профиля</legend>
    <label for="nickname">Никнейм:</label><br>
    <input type="text" id="nickname" name="nickname" value="User123"><br><br>

    <input2>
      <input3>Приватность</input3>
      <input type="checkbox" id="show_email">
      <label for="show_email">Показывать email</label><br>
      <input type="checkbox" id="show_activity">
      <label for="show_activity">Показывать активность</label>
    </input2>
  </input1>
</form>
Теги `<fieldset>` можно вкладывать друг в друга. Сначала создайте внешний `<fieldset>` с заголовком «Настройки профиля». Затем, внутри него, оберните чекбоксы еще одним `<fieldset>` с заголовком «Приватность».
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Отключение группы полей

id: 37851_html_form_grouping_06

Представьте, что раздел «Адрес доставки» нужно активировать, только если выбран определенный способ доставки. В HTML есть атрибут, который позволяет отключить все элементы внутри `<fieldset>` разом. Добавьте этот атрибут к группе полей.

CSS
body {
  font-family: sans-serif;
}
fieldset {
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 15px;
}
fieldset:disabled {
  background-color: #f1f1f1;
  opacity: 0.7;
}
legend {
  font-weight: bold;
}
HTML
<form>
  <fieldset input1>
    <legend>Адрес доставки</legend>
    <label for="city">Город:</label><br>
    <input type="text" id="city" name="city" value="Москва"><br>
    <label for="street">Улица:</label><br>
    <input type="text" id="street" name="street" value="Тверская">
  </fieldset>
</form>
Чтобы отключить все элементы внутри `<fieldset>`, добавьте к открывающему тегу атрибут `disabled`. Это булевый атрибут, ему не нужно значение.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Связь группы с формой

id: 37851_html_form_grouping_07

Иногда группа полей может находиться вне тега `<form>`, но должна быть его частью. Для этого используется специальный атрибут. Свяжите `<fieldset>` с формой, у которой `id="main-form"`.

CSS
body {
  font-family: sans-serif;
}
form {
  border: 2px dashed blue;
  padding: 10px;
  min-height: 50px;
}
fieldset {
  border: 2px solid green;
  border-radius: 5px;
  padding: 15px;
  margin-top: 20px;
}
legend {
  color: green;
}
HTML
<!-- Форма для отправки данных -->
<form id="main-form"></form>

<!-- Группа полей находится вне формы -->
<fieldset input1="main-form">
  <legend>Дополнительные опции</legend>
  <input type="checkbox" id="gift_wrap" name="gift_wrap">
  <label for="gift_wrap">Подарочная упаковка</label>
</fieldset>
Чтобы связать `<fieldset>` с формой, используйте атрибут `form`. В качестве его значения укажите `id` нужной формы. В данном случае это будет `form="main-form"`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку
Предыдущая темаСледующая тема
НайтиКурс.Ру