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


165

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

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

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

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


30
Зачем нам нужен тег? Зачем нам нужен тег img, когда мы можем создать изображение из 1px div с фоновыми цветами?
Одед

127
Обратите внимание: W3C не имеет ничего общего с w3schools.
Уэсли Марч

82
Не обращайтесь к w3schools. Просто используйте MDN: fieldset @ MDN .
Сирко

9
@Madmartigan Я знаю. Но W3C дает только спецификацию, которую я не нашел большой пользы, чтобы ответить на мой вопрос.
Восточный монах

2
О (не) использовании W3Schools и использовании более надежных сайтов для получения технической информации: w3fools.com
Denilson Sá Maia

Ответы:


187

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

<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>

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


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

8
@Madmartigan - Это хорошо, это означает, что вы знаете, что все еще имеете дело с тем же набором переключателей. (Это также причина, по которой легенда должна быть краткой ).
Квентин

1
«Вспомогательные технологии», которые имеют большой смысл.
Восточный монах

5
Кроме того, <fieldset> можно использовать для «отключения» сгруппированных элементов. Я ожидаю, что <fieldset> также следует использовать, чтобы указать, требуется ли группа, добавив в тег атрибут 'required', к сожалению, это не работает!
Саймон Савай

41

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


6
Конечно, можно привести аргумент, что disabledатрибут, так как он функционирует для fieldsetэлементов s и управления формой, должен по праву быть реализован и для formэлемента. Это имело бы смысл для этого, не так ли?
атп

25

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

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

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

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


fieldset отсутствует в HTML4. Это особенность HTML5
radio_head

5
Это вышло в HTML 4.0.1 - w3.org/TR/html401/interact/forms.html#h-17.10
Эрик

14

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


6

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


4

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

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

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


This lets you tab through a form, and when you get to a fieldset, you can use arrow keys to change the selected radio, and then tab away when you're done.- Это поведение по умолчанию для радиовходов и не имеет ничего общего с наборами полей. Флажки ведут себя по-разному по умолчанию.
Владимир Корнея

2

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


2

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

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


2

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

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

1

Как по мне, одно из самых больших преимуществ <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>
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.