Тег <fieldset>
Описание
Тег <fieldset> группирует связанные элементы формы, создавая визуальную и семантическую структуру. Часто используется вместе с <legend> для заголовка группы.
<form>
<fieldset>
<legend>Контактная информация</legend>
<label>Имя: <input type="text"></label><br>
<label>Email: <input type="email"></label>
</fieldset>
<fieldset>
<legend>Настройки</legend>
<label><input type="checkbox"> Получать уведомления</label>
</fieldset>
</form>
<style>
fieldset {
border: 2px solid #3498db;
border-radius: 8px;
padding: 15px;
margin-bottom: 20px;
}
legend {
color: #3498db;
padding: 0 10px;
font-weight: bold;
}
</style>
<fieldset>
<legend>Адрес доставки</legend>
<!-- Поля формы -->
</fieldset>
<fieldset disabled>
<legend>Административные настройки (только для админов)</legend>
<label>Уровень доступа: <input type="number"></label>
</fieldset>
Ключевые особенности:
- Создает семантическую группу связанных элементов формы
- По умолчанию имеет рамку и отступы
- Поддерживает атрибут
disabledдля отключения всех вложенных элементов - Лучше всего работает с
<legend>в качестве заголовка - Важен для доступности (скринридеры объявляют группу полей)
Рекомендации по использованию:
- Используйте для логической группировки полей формы
- Всегда добавляйте содержательный заголовок через
<legend> - Для сложных форм создавайте иерархию с вложенными
<fieldset> - Сочетайте с ARIA-атрибутами для улучшения доступности
Тег <fieldset> значительно улучшает организацию и юзабилити сложных HTML-форм.
Атрибуты
| disabled | Отключает все элементы внутри fieldset |
| form | Связывает fieldset с формой |
| name | Имя для идентификации fieldset |
| accesskey | Горячая клавиша для активации элемента |
| class | CSS-классы для стилизации элемента |
| id | Уникальный идентификатор элемента |
| style | Инлайновые CSS-стили |
| title | Всплывающая подсказка для элемента |
| align | Выравнивание элемента (устарел в HTML5) |
Поддержка браузерами
 |
 |
 |
 |
 |
|---|---|---|---|---|
| 4.0 | 1.0 | 6.0 | 1.0 | 1.0 |