<fieldset>

Тег <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> немного отличается в зависимости от браузера и операционной системы:

На практике

Скопировать ссылку "На практике" Скопировано

Realetive советует

Скопировать ссылку "Realetive советует" Скопировано

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

+ Развернуть