Тег <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-код для создания рамки вокруг группы элементов формы.

Актуальность

Тег <fieldset> актуален и широко используется в веб-разработке.


Хотите узнать больше об HTML-тегах?

Прочитайте справочник по HTML или познакомьтесь с вёрсткой на интерактивных тренажёрах в HTML Academy.


«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

ТелеграмПодкастБесплатные учебники

Читать дальше

<div>

Синтаксис, примеры использования, основные атрибуты.

  • 25 января 2023

<dl>

Синтаксис, примеры использования, основные атрибуты.

  • 25 января 2023

<option>

Синтаксис, примеры использования, основные атрибуты.

  • 25 января 2023

<ul>

Синтаксис, примеры использования, основные атрибуты.

  • 25 января 2023

<video>

Синтаксис, примеры использования, основные атрибуты.

  • 25 января 2023

<datalist>

Синтаксис, примеры использования, основные атрибуты.

  • 25 января 2023

<caption>

Синтаксис, примеры использования, основные атрибуты.

  • 25 января 2023