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

Ответ 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>

Ответ 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>

Ответ 3

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

Отъезд: http://usability.com.au/2013/04/accessible-forms-1-labels-and-identification/

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

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

Ответ 4

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

Ответ 5

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

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

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

Ответ 6

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

Ответ 7

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

Ответ 8

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

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

Ответ 9

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

Элемент 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>