HTML тег - fieldset - определение и примеры использования
Меню
Веб-разработка
Тег fieldset HTML

HTML - тег <fieldset> используется для группировки связанных элементов в форме.


Тег <fieldset> - синтаксис и код

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

Пример группировки связанных элементов в форме:

<form>
 <fieldset>
  <legend>Персональная форма:</legend>
  <label for="fname">Имя:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">Фамилия:</label>
  <input type="text" id="lname" name="lname"><br><br>
  <label for="email">Email:</label>
  <input type="email" id="email" name="email"><br><br>
  <label for="birthday">Дата Рождения:</label>
 <input type="date" id="birthday" name="birthday"><br><br>
</fieldset>
</form>

Элемент fieldset

Персональная форма:








Определение и использование

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

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

Chrome Поддерживает
Yandex Browser Поддерживает
Edge Поддерживает
Firefox Поддерживает
Safari Поддерживает
Opera Поддерживает

Атрибуты

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

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

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

Атрибуты событий

Тег <fieldset> также поддерживает атрибуты событий в HTML


Настройки CSS по умолчанию

Большинство браузеров отображают элемент fieldset со следующими значениями по умолчанию:

fieldset {
  display: block;
  margin-left: 2px;
  margin-right: 2px;
  padding-top: 0.35em;
  padding-bottom: 0.625em;
  padding-left: 0.75em;
  padding-right: 0.75em;
  border: 2px groove (internal value);
}


Полный список всех доступных тегов HTML см. в Справочнике по тегам HTML.

 

Поделиться ссылкой