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

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

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

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

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

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

<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">Blue</label>

</fieldset>

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

Еще одной особенностью 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>

Это нужно для доступности.

Проверьте: http://usability.com.au/2013/04/accessible-forms-1-labels-and-identification/

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

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

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

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

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

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

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

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

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

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

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

Элемент HTML  <fieldset> используется для группировки нескольких элементов управления, а также label ( <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 ничего не говорит вам об отношениях между полями, набор полей говорит вам, что есть отношения.
• с помощью отключен , он позволяет отключить и все его содержимое за один раз.
• это полезно для доступности

Как по мне, одно из самых больших преимуществ <fieldset>...</fieldset>элемента - способность сохранять <form>...</form>контекст, даже если <fieldset>...</fieldset>он не находится внутри формы.

Например, следующая форма:

<div class="header">
    <form id="myForm">
        <input type="text" name="someInput">
    </form>
</div>

<div class="footer">
    <fieldset form="myForm">
        <input type="text" name="someInput1">
    </fieldset>
</div>

семантически идентичен следующей форме:

<form>
    <input type="text" name="someInput">
    <input type="text" name="someInput1">
</form>