<legend>

Добавляет заголовок полям ввода, сгруппированным при помощи <fieldset>.

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

Кратко

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

Добавляет заголовок в <fieldset>, который по умолчанию оформляется браузером как текст, органично вписанный в рамку.

Пример

Секция статьи "Пример"
        
          
          <fieldset>  <legend>Заголовок для группы контролов</legend></fieldset>
          <fieldset>
  <legend>Заголовок для группы контролов</legend></fieldset>

        
        
          
        
      

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

Секция статьи "Как это понять"

<legend> позволяет описать содержимое <fieldset>, но семантически он не является «представителем» заголовков, хотя выполняет схожую функцию. Он не задаёт иерархию, а лишь характеризует контент внутри «своей» группы — как <label> для соответствующего контрола.

Как пишется

Секция статьи "Как пишется"
        
          
          <fieldset>  <legend>Заголовок для группы</legend></fieldset>
          <fieldset>
  <legend>Заголовок для группы</legend></fieldset>

        
        
          
        
      
Открыть демо в новой вкладке

Атрибуты

Секция статьи "Атрибуты"

У <legend> нет никаких своих атрибутов, ему доступны все глобальные атрибуты.

Подсказки

Секция статьи "Подсказки"

Внешний вид оформления рамки по умолчанию у <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
Samsung Galaxy S7
Samsung Galaxy S7
Google Nexus 6
Google Nexus 6

На практике

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

Realetive советует

Секция статьи "Realetive советует"

🛠 Для выравнивания положения текста часто советуют использовать атрибут align, но он исключён из современной спецификации, а привычные CSS-правила, например, с text-align: center с <legend> работать не будут, т. к. у него блочный контекст, но уникальная строчно-блочная контекстная модель содержимого, которая и создаёт неповторимую обводку от <fieldset>. Поэтому для выравнивания <legend> относительно ширины <fieldset> нужно использовать… внезапно margin!

Открыть демо в новой вкладке

За счёт особой формы обтекания рамкой текста, это можно использовать для характерной стилизации блока и заголовка:

Открыть демо в новой вкладке