Зачем нужен тег 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

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

Answer 3

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

Answer 4

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

Answer 5

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

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

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

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

Answer 6

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

На эти же вопросы ответили here.

Answer 7

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

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

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

Answer 8

Другая особенность 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>