Зачем нам нужен тег fieldset?

Question

Зачем нам нужен тег <fieldset>? Какой бы цели он ни служил, это, вероятно, подмножество тега формы.

Я посмотрел некоторую информацию о W3Schools, которая говорит:

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

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

Answer 1

Наиболее очевидный практический пример:

<fieldset>
  <legend>Colour</legend>

  <input type="radio" name="colour" value="red" id="colour_red">
  <label for="colour_red">Red</label>

  <input type="radio" name="colour" value="green" id="colour_green">
  <label for="colour_green">Green</label>

  <input type="radio" name="colour" value="blue" id="colour_blue">
  <label for="colour_blue">Red</label>

</fieldset>

Это позволяет маркировать каждую радиокнопку, а также метку для группы в целом. Это особенно важно в тех случаях, когда используется вспомогательная технология (например, программа для чтения с экрана), когда связь элементов управления и их легенды не может быть выражена визуальным представлением.

Answer 2

Еще одной особенностью fieldset является то, что его отключение отключает все поля, содержащиеся в нем.

<fieldset disabled>
  <legend>Disabled Fields</legend>
  <input type="text" value="Sample">
  <textarea>Text Area</textarea>
</fieldset>

<fieldset>
  <legend>Enabled Fields</legend>
  <input type="text" value="Sample">
  <textarea>Text Area</textarea>
</fieldset>

Answer 3

Это необходимо для доступности.

Выезд: http://usability.com.au/2013/04/accessible-forms-1-labels-and-identification/

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

Различные браузеры могут отображать границу fieldset по умолчанию по-разному.Каскадные таблицы стилей можно использовать для удаления рамки или изменения ее внешнего вида.

Answer 4

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

Answer 5

Мне нравится, что когда вы окружаете свои радиостанции набором полей, и вы не ставите идентификаторы на входные теги переключателей, тогда группа, представленная набором полей, добавляется в цепочку вкладок, как если бы это был один элемент.

Это позволяет перемещаться по форме, а когда вы добираетесь до набора полей, вы можете использовать клавиши со стрелками, чтобы изменить выбранное радио, а затем переключаться, когда закончите.

Также не забывайте о доступности. Программы чтения с экрана нуждаются в fieldset + легенде, чтобы понять вашу форму и иметь возможность читать ее пользователю каким-то естественным способом. Не стесняйтесь исчезать легенда, если вы не хотите, чтобы зрячие пользователи видели ее. Разметка и стилизация легенды прямо с помощью CSS иногда являются сложными кросс-браузерами, особенно в старых браузерах, поэтому я считаю, что сделать тег легенды невидимым для пользователей программ чтения с экрана и добавить отдельный диапазон aria-hidden = "true", стилизованный под метку зрячие пользователи упрощают стилизацию и делают их доступными.

Answer 6

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

Answer 7

Просто суммируя некоторые преимущества:

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

Другими словами: Тег fieldset позволяет вам логически группировать наборы полей, чтобы ваши формы были более информативными. Итак, набор элементов управления формы, необязательно сгруппированных под общим именем.

<fieldset>
  <legend>Choose your favorite animal</legend>

  <input type="radio" id="dog" name="animal">
  <label for="dog">Dog</label><br/>

  <input type="radio" id="cat" name="animal">
  <label for="cat">Cat</label><br/>
</fieldset>

« преимущества » при использовании набора полей:

• они позволяют разметить ваши данные (в данном случае форму) наиболее доступным семантическим способом. Учтите, что размещение ваших полей в fieldset является более информативным, чем размещение ваших полей в div. DIV ничего не говорит вам об отношениях между полями, набор полей говорит вам, что есть отношения.
• с помощью отключено , оно позволяет отключить и все его содержимое за один раз.
• полезно для доступности

Answer 8

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

На эти же вопросы ответили здесь на SO.

Answer 9

Я считаю, что это удобно для CSS-стилей и привязки ярлыков к элементам управления.Это позволяет легко разместить визуальный контейнер вокруг группы полей и выровнять метки.