Тег fieldset в HTML: что это такое?

Дата последнего обновления статьи: 2025-01-01

BODYTABLEFOOTERBUTTONBRHEADERDIVSECTIONIMGSPANARTICLEBODYTABLEFOOTERBUTTONBRHEADERDIVSECTIONIMGSPANARTICLEBODYTABLEFOOTERBUTTONBRHEADERDIVSECTIONIMGSPANARTICLEBODYTABLEFOOTERBUTTONBRHEADERDIVSECTIONIMGSPANARTICLEBODYTABLEFOOTERBUTTONBRHEADERDIVSECTIONIMGSPANARTICLEBODYTABLEFOOTERBUTTONBRHEADERDIVSECTIONIMGSPANARTICLEBODYTABLEFOOTERBUTTONBRHEADERDIVSECTIONIMGSPANARTICLEBODYTABLEFOOTERBUTTONBRHEADERDIVSECTIONIMGSPANARTICLE<fieldset>

Это изображениелицензировано подCC BY 4.0

Тег fieldset в HTML используется для группировки связанных элементов формы. Он создает рамку вокруг сгруппированных элементов и может включать заголовок группы с помощью тега legend. Это улучшает организацию формы и делает её более понятной для пользователей.

Синтаксис тега fieldset

<fieldset>
  <legend>Заголовок группы</legend>
  <!-- Элементы формы -->
</fieldset>

Атрибуты тега fieldset

disabled - делает все элементы формы внутри fieldset неактивными.
form - связывает fieldset с формой по её id, даже если он находится вне формы.
name - задает имя для fieldset.

Также поддерживает глобальные атрибуты.

Примеры использования тега fieldset

Простая группировка полей

<form>
  <fieldset>
    <legend>Личные данные</legend>
    <label>Имя: <input type="text" name="name"></label>
    <label>Email: <input type="email" name="email"></label>
  </fieldset>
</form>

Отключенная группа полей

<fieldset disabled>
  <legend>Неактивная секция</legend>
  <label>Поле: <input type="text"></label>
  <button>Кнопка</button>
</fieldset>

Несколько групп в форме

<form>
  <fieldset>
    <legend>Контактные данные</legend>
    <label>Телефон: <input type="tel"></label>
    <label>Адрес: <input type="text"></label>
  </fieldset>
  
  <fieldset>
    <legend>Предпочтения</legend>
    <label><input type="checkbox"> Подписка на новости</label>
    <label><input type="checkbox"> Получать уведомления</label>
  </fieldset>
</form>

Советы по использованию тега fieldset

Группируйте только логически связанные элементы формы.
Всегда используйте тег legend для описания группы полей.
Используйте атрибут disabled для отключения группы полей.
Применяйте CSS для стилизации fieldset. Свойство border по умолчанию равно 2px groove theedface.
Не злоупотребляйте вложенными fieldset - это может усложнить форму.

Часто задаваемые вопросы (FAQ)

1 Можно ли стилизовать fieldset с помощью CSS?

Да, fieldset можно стилизовать с помощью CSS. Можно изменять границы, отступы, фон и другие свойства.

2 Как сделать fieldset неактивным?

Используйте атрибут disabled для отключения всех элементов внутри fieldset: <fieldset disabled>...</fieldset>

3 Обязательно ли использовать legend внутри fieldset?

Хотя legend не является обязательным, рекомендуется его использовать для лучшей доступности и понятности формы.

Заключение

Тег fieldset является важным элементом для создания структурированных и понятных форм. Правильное использование этого тега вместе с legend улучшает доступность и удобство использования веб-форм.

Для получения дополнительной информации о теге fieldset, рекомендуем ознакомиться с официальной документацией на MDN.

Предыдущая страница

Следующая страница