Клавиша / esc

<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

На практике

Скопировано