Fieldset html: Тег | htmlbook.ru

— журнал «Доктайп»

Тег <fieldset> используется для группирования элементов формы в логически связанные блоки. Это позволяет разделить форму на более понятные и логические части, что упрощает её использование для пользователей.

Кроме того, <fieldset> используется вместе с тегом <legend>, который позволяет добавить заголовок для каждого блока.

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

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

Спецификация HTML

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

Семантический или нет

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

Пример использования

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

• <fieldset> используется для группирования элементов формы в блоки по смыслу
• <legend> используется для добавления заголовка для каждого блока

Блоки могут содержать любые элементы формы: текстовые поля, переключатели, флажки, список выбора и другие элементы.

Для чего использовать тег <fieldset>

• Создание формы для ввода контактной информации с помощью <fieldset> и <legend>.
• Группировка элементов формы, которые относятся к одной категории, например, кредитных карт, с помощью <fieldset> и <legend>.
• Создание разделов формы для поиска с использованием <fieldset> и <legend> для разделения категорий поиска, таких как местоположение, тип объекта и т. д.

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

• disabled — указывает, что группа элементов формы должна быть отключена.
• form — указывает форму, к которой относится группа элементов формы.
• name — задает имя группы элементов формы.

Глобальные атрибуты

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

Ограничения

Тег <fieldset> не может быть вложен в тег <legend>. Также не рекомендуется использовать тег <fieldset> внутри тега <table>.

Поддержка браузерами

Тег <fieldset>поддерживается всеми современными браузерами.

Альтернативные теги

Вместо тега <fieldset> можно использовать тег <data> или <section>, но в этом случае потребуется дополнительный CSS-код для создания рамки вокруг группы элементов формы.

Актуальность

Тег <fieldset> актуален и широко используется в веб-разработке.

Хотите узнать больше об HTML-тегах?

Прочитайте справочник по HTML или познакомьтесь с вёрсткой на интерактивных тренажёрах в HTML Academy.

Попробовать

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

ТелеграмПодкастБесплатные учебники

HTML/Элемент fieldset

Синтаксис

<form>
  . ..
  <fieldset> ... </fieldset>
  ...
</form>

Описание

Элемент fieldset (от англ. «field set» ‒ «набор полей») группирует элементы формы. Границы элемента fieldset обрамляются рамкой. Рамка в разных браузерах может отображаться по-разному, но, как правило, она отличается не сильно.

Примечание

• Cтиль рамки элемента можно изменить при помощи CSS свойста «border».
• Указать заголовок для сгруппированных элементов формы можно с помощью элемента legend.

Поддержка браузерами

Chrome

Поддерж.

Firefox

Поддерж.

Opera

Поддерж.

Maxthon

Поддерж.

IExplorer

Поддерж.

Safari

Поддерж.

iOS

Поддерж.

Android

Поддерж.

Спецификация

Верс.	Раздел
HTML
2.0	—
3.2	—
4.01	17.10 Adding structure to forms: the FIELDSET and LEGEND elements DTD: Transitional Strict Frameset
5.0	4.10.16 The fieldset element
5.1	4.10.16. The fieldset element
XHTML
1.0	Extensible HyperText Markup Language DTD: Transitional Strict Frameset
1.1	Extensible HyperText Markup Language

Атрибуты

disabled

Блокирует вложенные элементы формы.

form

Присоединяет вложенные элементы к форме.

name

Задаёт общее имя группе элементов формы.

Глобальные атрибуты

accesskey, class, contenteditable, contextmenu, data-*, dir, draggable, dropzone, hidden, id, inert, lang, spellcheck, style, tabindex, title, translate, xml:lang

Пример использования

Листинг кода

<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>Элемент fieldset</title>
</head>
<body>
<h2>Пример с элементом «fieldset»</h2>
<form action=»/examples/php-scripts/chocolate.php» method=»get»>
<fieldset><legend>Какой шоколад вы любите</legend>
<label><input type=»radio» name=»chocolate» value=»milk»> молочный</label>
<label><input type=»radio» name=»chocolate» value=»bitter»> горький</label>
<label><input type=»radio» name=»chocolate» value=»other»> другой</label>
</fieldset>
<p><input type=»reset»> <input type=»submit»></p>
</form>
</body>
</html>

Элемент fieldset

HTML-форма fieldset Атрибут

❮ Тег HTML

Пример

Элемент

, расположенный вне формы (но все же часть формы):

php» method=»get»>
  Какой ваш любимый цвет?
 
 

 

Персоналия:

Имя:
 


  Фамилия:

Попробуйте сами »

---

Определение и использование

Атрибут формы определяет форму, которой принадлежит набор полей.

Значение этого атрибута должно быть равно атрибуту id <форма> элемент в том же документе.

---

Поддержка браузера

Атрибут
форма	Да	Да	Да	Да	Да

---

Синтаксис

Значения атрибутов

Значение	Описание
form_id	Указывает элемент формы, которому принадлежит элемент . Значение этого атрибута должно быть атрибутом id элемента в том же документе.

---

❮ Тег HTML

ВЫБОР ЦВЕТА

---

---

---

Лучшие учебники

Учебное пособие по HTML
Учебное пособие по CSS
Учебное пособие по JavaScript
Учебное пособие
Учебное пособие по SQL
Учебное пособие по Python
Учебное пособие по W3.CSS
Учебное пособие по Bootstrap

Учебное пособие по PHP
Учебное пособие по Java
Учебное пособие по C++
Учебное пособие по jQuery
9000 3

Лучшие ссылки

Справочник по HTML
Справочник по CSS
Справочник по JavaScript
Справочник по SQL
Справочник по Python
Справочник по W3.CSS
Справочник по Bootstrap
Справочник по PHP
Цвета HTML
Справочник по Java
Справочник по Angular
Справочник по jQuery

Основные примеры

Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3. CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery

---

ФОРУМ | О

W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания. Используя W3Schools, вы соглашаетесь прочитать и принять наши условия использования, куки-файлы и политика конфиденциальности.

Copyright 1999-2023 Refsnes Data. Все права защищены.
W3Schools работает на основе W3.CSS.

: Элемент Field Set — HTML: язык гипертекстовой разметки

HTML-элемент

используется для группировки нескольких элементов управления, а также меток ( ) в веб-форме.

Как показано в приведенном выше примере, элемент

обеспечивает группировку части HTML-формы с вложенным Элемент

, предоставляющий заголовок для

. Требуется несколько атрибутов, наиболее заметными из которых являются form , которые могут содержать id

на той же странице, что позволяет вам сделать

частью этого , даже если он не вложен внутри него, и disabled , что позволяет отключить

и все его содержимое за один раз.

Этот элемент включает глобальные атрибуты.

инвалиды

Если этот логический атрибут установлен, все элементы управления формы, являющиеся потомками

, отключаются, то есть они недоступны для редактирования и не будут отправлены вместе с . Они не будут получать никаких событий просмотра, таких как щелчки мышью или события, связанные с фокусом. По умолчанию браузеры отображают такие элементы управления серым цветом. Обратите внимание, что элементы формы внутри

Элемент не будет отключен.

форма

Этот атрибут принимает значение атрибута id элемента , частью которого должен быть

, даже если он не находится внутри формы. Обратите внимание, что использование этого сбивает с толку — если вы хотите, чтобы элементов внутри

были связаны с формой, вам нужно использовать форма атрибута непосредственно на этих элементах. Вы можете проверить, какие элементы связаны с формой через JavaScript, используя HTMLFormElement.elements .

имя

Имя, связанное с группой.

Примечание: Заголовок набора полей задается первым элементом

, вложенным в него.

Существует несколько особых соображений по стилю для <набор полей> .

Его значение display равно block по умолчанию, и оно устанавливает контекст форматирования блока. Если

оформлен со значением display встроенного уровня , он будет вести себя как inline-block , в противном случае он будет вести себя как block . По умолчанию существует граница 2px канавка , окружающая содержимое, и небольшое количество отступов по умолчанию. Элемент имеет min-inline-size: по умолчанию min-content .

Если присутствует <легенда> , он помещается поверх границы block-start . <легенда> сокращает, а также устанавливает контекст форматирования. Значение на дисплее заблокировано. (Например, display: inline ведет себя как block .)

Будет анонимный блок, содержащий содержимое

, который наследует определенные свойства от 9002 <набор полей> . Если

имеет стиль display: grid или display: inline-grid , то анонимное поле будет контекстом форматирования сетки. Если

имеет стиль display: flex или display: inline-flex , то анонимное поле будет контекстом форматирования flex. В противном случае он устанавливает контекст форматирования блока.

Вы можете свободно стилизовать

и <легенда> в любом случае, который вы хотите, чтобы соответствовать дизайну вашей страницы.

Simple fieldset

В этом примере показан очень простой пример

с

и одним элементом управления внутри него.

 <форма действие="#">
  <набор полей>
    
Вы согласны?
    
    Я согласен
  

 

Результат

Отключенный набор полей

В этом примере показан отключенный

с двумя элементами управления внутри него. Обратите внимание, что оба элемента управления отключены из-за того, что они находятся внутри отключенного

.

 <форма действие="#">
  <набор полей отключен>
    
Отключенный набор полей входа
    <дел>
      Имя: