<fieldset>

25 января 2023

Тег <fieldset> используется для группирования элементов формы в логически связанные блоки. Это позволяет разделить форму на более понятные и логические части, что упрощает её использование для пользователей.

Кроме того, <fieldset> используется вместе с тегом <legend>, который позволяет добавить заголовок для каждого блока.

Синтаксис тега <fieldset>

<fieldset>
  <legend>Заголовок блока</legend>
  <!-- Элементы формы -->
</fieldset>

Спецификация HTML

<fieldset> является актуальным тегом и поддерживается всеми современными браузерами.

Семантический или нет

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

Пример использования

<form>
  <fieldset>
    <legend>Личные данные</legend>
    <label>
      Имя:
      <input type="text" name="first_name">
    </label>
    <label>
      Фамилия:
      <input type="text" name="last_name">
    </label>
  </fieldset>
</form>

<fieldset> используется для группирования элементов формы в блоки по смыслу
<legend> используется для добавления заголовка для каждого блока

Блоки могут содержать любые элементы формы: текстовые поля, переключатели, флажки, список выбора и другие элементы.

Для чего использовать тег <fieldset>

Создание формы для ввода контактной информации с помощью <fieldset> и <legend>.
Группировка элементов формы, которые относятся к одной категории, например, кредитных карт, с помощью <fieldset> и <legend>.
Создание разделов формы для поиска с использованием <fieldset> и <legend> для разделения категорий поиска, таких как местоположение, тип объекта и т. д.

Атрибуты тега <fieldset>

disabled — указывает, что группа элементов формы должна быть отключена.
form — указывает форму, к которой относится группа элементов формы.
name — задает имя группы элементов формы.

Глобальные атрибуты

Тег поддерживает все глобальные атрибуты HTML.

Ограничения

Тег <fieldset> не может быть вложен в тег <legend>. Также не рекомендуется использовать тег <fieldset> внутри тега <table>.

Поддержка браузерами

Тег <fieldset>поддерживается всеми современными браузерами.

Альтернативные теги

Вместо тега <fieldset> можно использовать тег <data> или <section>, но в этом случае потребуется дополнительный CSS-код для создания рамки вокруг группы элементов формы.