HTML тег - fieldset - определение и примеры использования
Меню
Веб-разработка
Мои услуги на Kwork
Тег 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> браузерами

Crome Поддерживает
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.

 

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