HTML-тег `<fieldset>`

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

Синтаксис

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

Пример использования HTML-тега `<fieldset>`:

HTML-тег <fieldset>

html

<!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-day">Place of birth:</label>
          <input type="text" id="birth-day" />
        </div>
      </fieldset>
    </form>
  </body>
</html>

Try it Yourself »

Результат

fieldset example

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

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

Атрибуты

Атрибут	Значение	Описание
disabled	disabled	Указывает, что группа связанных элементов формы должна быть отключена.
form	form_id	Определяет один или несколько идентификаторов формы (id), к которым принадлежит набор связанных элементов. Если идентификаторов несколько, они должны быть разделены пробелами.

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

Практика

Какова роль HTML-тега fieldset?

Он используется для управления выравниванием элементов.Он используется для отображения рамки вокруг содержащихся элементов.Он используется для предоставления заголовка для содержащихся элементов.Он используется для группировки связанных элементов в форме.Он используется только для стилизации.

HTML-тег <fieldset> ​

Синтаксис ​

Пример использования HTML-тега <fieldset>: ​

Результат ​

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

Атрибуты ​