HTML тег <fieldset>

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

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

Синтаксис

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

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      div { 
        margin-bottom: 10px; 
      }
      label { 
        display: inline-block; 
        width: 120px; 
      }
    </style>
  </head>
  <body>
    <form>
      <fieldset style="background:#e1eff2;">
        <legend style="padding:20px 0; font-size:20px;">Персональные данные:</legend>
        <div><label>Имя:</label><input type="text"></div>
        <div><label>Электронная почта:</label><input type="text"></div>
        <div><label>Дата рождения:</label><input type="text"></div>
        <div><label>Место рождения:</label><input type="text"></div>
      </fieldset>
    </form>
  </body>
</html>

Результат

Атрибут

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

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

Browser support




Related articles