W3docs
ru
Войти

HTML тег <fieldset>

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

Тег <fieldset> группирует логически связанные элементы управления внутри HTML <form>, позволяя разбить длинную форму на понятные разделы. По умолчанию браузер рисует рамку вокруг сгруппированного содержимого. В сочетании с <legend> это также правильный способ назначить группе элементов управления <input> общую, доступную метку.

На этой странице рассматриваются синтаксис, роль <legend>, все атрибуты (name, disabled, form), способы изменить стиль или убрать рамку, а также то, почему <fieldset> важен для доступных групп переключателей и флажков.

Синтаксис

Тег <fieldset> используется парами. Содержимое записывается между открывающим (<fieldset>) и закрывающим (</fieldset>) тегами.

Пример HTML тега <fieldset>:

HTML тег <fieldset>

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        margin-bottom: 10px;
      }
      label {
        display: inline-block;
        width: 120px;
      }
      fieldset {
        background: #e1eff2;
      }
      legend {
        padding: 20px 0;
        font-size: 20px;
      }
    </style>
  </head>
  <body>
    <form>
      <fieldset>
        <legend>Personal Information:</legend>
        <div>
          <label for="name">Name:</label>
          <input type="text" id="name" />
        </div>
        <div>
          <label for="email">Email:</label>
          <input type="email" id="email" />
        </div>
        <div>
          <label for="date">Date of birth:</label>
          <input type="date" id="date" />
        </div>
        <div>
          <label for="birth-place">Place of birth:</label>
          <input type="text" id="birth-place" />
        </div>
      </fieldset>
    </form>
  </body>
</html>
Попробуйте сами »

Результат

пример fieldset

Элемент <legend>

Элемент <legend> задаёт подпись для <fieldset>. Важны два правила:

  • Он должен быть первым дочерним элементом <fieldset>. Если он располагается где-либо ещё, браузеры игнорируют его как подпись группы.
  • Он является доступным именем группы. Вспомогательные технологии зачитывают текст legend вместе с каждым элементом управления внутри группы. Поэтому, когда пользователь программы чтения с экрана достигает элемента управления, он слышит нечто вроде «Личная информация — Имя, поле для ввода текста», что говорит ему, к какому разделу относится это поле.
<fieldset>
  <legend>Shipping address</legend>
  <!-- the inputs for this section go here -->
</fieldset>

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

Элемент <fieldset> для организации форм

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

Доступность: группировка переключателей и флажков

Одиночный текстовый <input> помечается своим <label>. Но набор переключателей или флажков требует двух уровней разметки: один для всего вопроса и один для каждого варианта ответа. <fieldset> + <legend> — это стандартный доступный способ сделать это: legend помечает вопрос, а каждый <label> помечает вариант ответа.

<fieldset>
  <legend>Choose a shipping method:</legend>
  <div>
    <input type="radio" id="standard" name="shipping" value="standard" />
    <label for="standard">Standard (3–5 days)</label>
  </div>
  <div>
    <input type="radio" id="express" name="shipping" value="express" />
    <label for="express">Express (1–2 days)</label>
  </div>
</fieldset>

Здесь программа чтения с экрана объявляет «Выберите способ доставки, Стандартный, переключатель» — пользователь всегда знает, на какой вопрос он отвечает. Без обёртки <fieldset>/<legend> варианты воспринимаются как несвязанный список. Используйте этот шаблон для каждой группы переключателей и для любого набора связанных флажков.

Удаление или изменение стиля рамки

Рамка по умолчанию — лишь стилевое оформление, она не обязательна. Очень распространённый вопрос — как её убрать. Задайте border: none для <fieldset>:

fieldset {
  border: none;
  padding: 0;
  margin: 0;
}

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

Атрибуты

АтрибутЗначениеОписание
disableddisabledОтключает всю группу. Каждый элемент управления формой внутри <fieldset> становится неактивным и не отправляется вместе с формой.
formform_idСвязывает fieldset с одной или несколькими формами по их id, позволяя ему располагаться за пределами принадлежащего ему <form>. Разделяйте несколько id пробелами.
nametextИмя группы. Оно не передаётся вместе с формой; используется главным образом для обращения к группе из JavaScript.

Атрибут disabled удобен, когда целый раздел формы нужно отключить одновременно — например, скрыть поля оплаты до тех пор, пока не установлен флажок:

<fieldset disabled>
  <legend>Payment details</legend>
  <label for="card">Card number:</label>
  <input type="text" id="card" />
</fieldset>

Атрибут form позволяет <fieldset> располагаться вне элемента <form> и по-прежнему принадлежать ему:

<form id="signup"></form>

<fieldset form="signup">
  <legend>Account</legend>
  <label for="user">Username:</label>
  <input type="text" id="user" />
</fieldset>

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

Практика

Практика
Какова роль HTML тега fieldset?
Какова роль HTML тега fieldset?
Was this page helpful?