skip to main content

<fieldset>

html

Кратко 🔗

Тег <fieldset> группирует элементы формы (поля ввода <input> / <textarea>, выпадающие списки <select> и другие) в блок с характерным выделением границ. Опционально с помощью тега <legend> внутри <fieldset> можно задать заголовок для создаваемой группы (он может быть только один и обязательно должен идти первым вложенным элементом).

Пример 🔗

<form>
<fieldset>
<legend>Прозвище Дракса из «Стражей Галактики»?</legend>
<label>
<input type="radio" name="answer" value="Exterminator">
Уничтожитель
</label>
<label>
<input type="radio" name="answer" value="Destroyer">
Разрушитель
</label>
<label>
<input type="radio" name="answer" value="Accuser">
Обвинитель
</label>
<label>
<input type="radio" name="answer" value="Sweet-tooth">
Сладкоежка
</label>
</fieldset>
</form>

Как это понять 🔗

В сложный формах количество контролов может устрашающе перегружать интерфейс и правильным решением в этом случае будет группировка смысловых элементов.

Как пишется 🔗

<fieldset></fieldset>

Для добавления подписи внутри <fieldset> следует использовать <legend>:

<fieldset>
<legend>Заголовок для группы</legend>

</fieldset>

Атрибуты 🔗

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

Подсказки 🔗

See the Pen fieldset demo by Roman Ganin (@Realetive) on CodePen.

Внешний вид оформления рамки по умолчанию у <legend> немного отличается в зависимости от браузера и операционной системы:

Windows 10, Google Chrome 71.0
Windows 10, Google Chrome 71.0
MacOS Big Sur, Google Chrome 71.0
MacOS Big Sur, Google Chrome 71.0
Windows 10, Edge 18.0
Windows 10, Edge 18.0
MacOS Big Sur, Safari 14.0
MacOS Big Sur, Safari 14.0
Windows 8, Internet Explorer 10.0
Windows 8, Internet Explorer 10.0
Windows 7, Internet Explorer 9.0
Windows 7, Internet Explorer 9.0
Samsung Galaxy S7
Samsung Galaxy S7
Google Nexus 6
Google Nexus 6

В работе 🔗

Чтобы убрать (или стилизовать рамку), используется «CSS-семейство свойств» border: border, border-radius и других:

See the Pen <legend> by Roman Ganin (@Realetive) on CodePen.