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

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

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

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

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

8 140
html fieldset

8 ответов:

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

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

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

151

еще одна особенность 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>
20

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

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

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

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

17

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

14

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

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

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

5

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

4

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

2

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

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

2