Имеет ли значение использование HTML-тега fieldset помимо группирования форм? - PullRequest
25 голосов
/ 24 ноября 2008

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

Ответы [ 6 ]

18 голосов
/ 24 ноября 2008

Я считаю, что это было бы злоупотреблением. http://www.w3.org/TR/REC-html40/interact/forms.html#h-17.10 гласит: «Элемент FIELDSET позволяет авторам группировать тематически связанные элементы управления и метки».

4 голосов
/ 24 ноября 2008

Бит "field" в имени fieldset относится к <form> полям.

Использование fieldset за пределами form s для группировки данных Aribtrary явно семантическое неправильное использование.

Однако ваш HTML будет подтвержден, и Бог не убьет котенка.

3 голосов
/ 29 ноября 2009

Я вижу семантические преимущества в блокировании контента с наборами полей с легендами.

Хотя W3C связывает использование наборов полей и легенд с формами, разрешение на использование вне тега формы открывает новые границы для экспериментов. Потенциально похож на список определения в использовании.

Лично я не думаю, что "поле" в fieldset является специфическим для поля формы. Он просто унаследовал отношения от его использования в теге формы. поле относится к группировке.

Представьте себе, что вы идете в местные парки и отдыхаете, чтобы поиграть в софтбол с друзьями. Есть 3 доступных поля. Все они имеют таблички на заборе "ТОЛЬКО БЕЙСБОЛ"

Собираешь вещи и едешь домой?

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

Нет, где в определении упоминаются формы:

Элемент FIELDSET позволяет авторам группа тематически связанных элементов управления и этикетки. Группировка элементов управления делает это пользователям легче понять их цель в то же время облегчение навигации по вкладкам для визуальные агенты пользователя и речь навигация для речевого пользователя агенты. Правильное использование этого элемента делает документы более доступными.

Я считаю управление форматированием тегов xhtml. div p blockquote и т. д.

<h1>The Big Book about Everything</h1>
<fieldset>
    <legend>Jokes</legend>
    <h2>30 pages of humorous Jokes</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p>Cras nec diam eu lectus condimentum faucibus in et odio.</p>
</fieldset>
<fieldset>
    <legend>Poems</legend>
    <h2>20 pages of well written poems</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p>Cras nec diam eu lectus condimentum faucibus in et odio.</p>
</fieldset>
<fieldset>
    <legend>Horror</legend>
    <h2>3 Short and scary stories</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p>Cras nec diam eu lectus condimentum faucibus in et odio.</p>
</fieldset>
<fieldset>
    <legend>Mystery</legend>
    <h2>3 Short and mysterious stories</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p>Cras nec diam eu lectus condimentum faucibus in et odio.</p>
</fieldset>
2 голосов
/ 24 ноября 2008

Если вы хотите сгруппировать таблицы, рассмотрите возможность использования соответствующего элемента заголовка (h1-h6) для каждой группы. Отдельные таблицы можно описать с помощью элемента caption . Атрибут «Summary» также доступен для каждой таблицы.

Из спецификации:

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

И для записи, элемент 'fieldset' не предназначен для использования вне форм. А в формах он предназначен для концептуальной группировки, например, полей ввода - таких как «личная информация» или «адрес для выставления счета» и т. Д.

Вот интересная статья, в которой рассказывается, что слышат пользователи программы чтения с экрана при навигации по наборам полей. http://www.rnib.org.uk/wacblog/articles/too-much-accessibility/too-much-accessibility-fieldset-legends/

2 голосов
/ 24 ноября 2008

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

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

Таким образом, «злоупотребление» может быть связано с тем, что спецификации HTML 4 и XHTML не требуют, чтобы набор полей и легенда содержались внутри элементов формы. FIELDSET может даже быть дочерним элементом элемента BODY. Это правильный синтаксис для размещения наборов полей вне форм.

Но когда вы описываете что-то как набор полей, который на самом деле не является набором полей, вы просто вызываете путаницу.

Лучше всего думать о тегах HTML / XHTML как о значении элемента, а не о том, как он будет выглядеть. Затем вы можете использовать CSS, чтобы элемент выглядел так, как вы хотите.

Если вы группируете данные для целей презентации, вы можете найти здесь хорошую альтернативу CSS .

Для справки:

.fieldset {
border-right: 1px solid #75736E;
border-bottom: 1px solid #75736E;
border-left: 1px solid #F2F0EE;
border-top: 1px solid #F2F0EE;
padding: 10px 3px 3px 3px;

}

.outer {
border-left: 1px solid #75736E;
border-top: 1px solid #75736E;
border-right: 1px solid #F2F0EE;
border-bottom: 1px solid #F2F0EE;
width: 200px; /* CHANGE THIS FOR BOX SIZE */
} 

.legend {
float: left;
margin-left: 15px;
margin-top: -8px;
padding-left: 5px;
padding-right: 5px;
font-weight: bold;
background: #FFF;
} 

<div class="legend">Lipsum.com Is The Best</div>
<div class="outer">
<div class="fieldset">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
Donec congue fermentum metus. Quisque vel ante. 
Cras purus metus, dignissim at, luctus et, sollicitudin eget, urna. 
Maecenas eget lacus. Aenean bibendum risus non erat mattis semper. 
Aliquam placerat nibh eget lacus. Sed blandit eleifend justo. Nam elit. 
Fusce feugiat orci id eros facilisis laoreet. 
Integer vestibulum condimentum purus. 
Proin vehicula congue lacus. Quisque placerat diam nec enim. 
Nunc lorem. Maecenas nec sem sed nulla tristique faucibus.</div></div>
1 голос
/ 24 ноября 2008

Тег fieldset также используется для чтения с экрана и некоторых других вспомогательных технологий.

...