除了对表单进行分组之外，使用 fieldset HTML 标记是否还有意义？

Question

通常，我在表单中见过它，但我发现将相关数据集分组很有帮助（例如，当您在页面上有多个表时，使用围绕每个表或一组相关表的字段集来定义一个可见的含义和一个组名（图例））。这是否滥用了 fieldset 标签，在我的使用中，它不再具有语义意义？

Answer 1

我认为这是滥用行为。 http://www.w3.org/TR/REC-html40/interact/forms.html#h-17.10 声明“FIELDSET 元素允许作者对与主题相关的 controls 和标签进行分组”。

Answer 2

名称fieldset 中的“字段”位指的是<form> 字段。

在forms 之外使用fieldset 对任意数据进行分组显然是语义滥用。

但是，您的 HTML 将通过验证，而上帝不会杀死一只小猫。

Answer 3

fieldset 是关于形成控制组。通过对相关的表单控件进行分组，作者可以将表单分成更小、更易于管理的部分，从而改善在用户遇到太多表单控件时可能发生的可用性灾难。

not means a fieldset always group fields within a form 确实如此，尽管规范仅在用户与表单交互的上下文中讨论字段集...

因此，“滥用”可能来自 HTML 4 和 XHTML 规范不要求表单元素中包含字段集和图例这一事实。 FIELDSET 甚至可以是 BODY 元素的子元素。将字段集放在表单之外是有效的语法。

但是，当您将某些东西描述为不是真正的字段集的字段集时，您只会引起混淆。

最好将 HTML / XHTML 标记视为描述元素的含义而不是其外观。然后你可以使用 CSS 让元素看起来像你想要的任何东西。

如果您出于演示目的对数据进行分组，您可以在此处找到nice CSS alternative。

供参考：

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

Answer 4

如果您想对表格进行分组，请考虑为每个组使用适当的标题 (h1-h6) 元素。可以使用“caption”元素来描述各个表。 'summary' 属性也可用于每个表。

来自规范：

每个表可能有一个关联的 说明（参见 CAPTION 元素） 提供了一个简短的描述 表的目的。更长的描述 也可以提供（通过摘要 属性）为人民谋福利 使用语音或盲文用户 代理。

为了记录，'fieldset' 元素不打算在表单之外使用。在表单中，它旨在从概念上对输入字段进行分组 - 例如“个人信息”或“账单地址”等。

这是一篇有趣的文章，讨论了屏幕阅读器用户在导航字段集时听到的内容。 http://www.rnib.org.uk/wacblog/articles/too-much-accessibility/too-much-accessibility-fieldset-legends/

Answer 5

我可以看到将内容阻塞到带有图例的字段集中的语义优势。

尽管 W3C 将字段集和图例的使用与表单相关联，但允许在表单标签之外使用为实验开辟了新的界限。可能类似于使用中的定义列表。

我个人不认为 fieldset 中的“字段”是特定于表单字段的。它只是从它在表单标签中的使用继承关系。 字段引用分组。

想象一下去您当地的公园和娱乐场所与您的朋友打垒球。有 3 个可用字段。栅栏上都有“仅限棒球”的标志

你收拾行装回家了吗？

在表单标签滥用之外标记字段集和图例的使用是狭隘的。

定义中没有提到形式：

FIELDSET 元素允许作者 分组与主题相关的控件 和标签。分组控制使它 让用户更容易理解他们的 目的同时 促进标签导航 视觉用户代理和语音 面向语音用户的导航 代理。正确使用该元素 使文档更易于访问。

我考虑xhtml标签格式控制。 div p 块引用等

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

Answer 6

fieldset 标签也可用于屏幕阅读器和其他一些辅助技术。