<fieldset>

Объединяет контролы формы группы.

Время чтения: меньше 5 мин

Кратко

Секция статьи "Кратко"

Тег <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>
          <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></fieldset>

        
        
          
        
      

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

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

        
        
          
        
      

Атрибуты

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

Подсказки

Секция статьи "Подсказки"
Открыть демо в новой вкладке

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

Windows 10, Google Chrome 71.0
Windows 10, Google Chrome 71.0
macOS Big Sur Big Sur, Google Chrome 71.0
macOS Big Sur Big Sur, Google Chrome 71.0
Windows 10, Edge 18.0
Windows 10, Edge 18.0
macOS Big Sur Big Sur, Safari 14.0
macOS Big Sur Big Sur, Safari 14.0
Samsung Galaxy S7
Samsung Galaxy S7
Google Nexus 6
Google Nexus 6

На практике

Секция статьи "На практике"