26

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

4

6 回答 6

21

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

于 2008-11-24T15:31:09.707 回答
5

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

使用fieldsetoutside forms 对任意数据进行分组显然是语义滥用。

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

于 2008-11-24T19:22:28.147 回答
3

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>
于 2008-11-24T15:34:48.013 回答
2

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

从规范：

每个表格都可能有一个相关的标题（参见 CAPTION 元素），它提供了表格用途的简短描述。为了使用语音或基于盲文的用户代理的人们的利益，也可以提供更长的描述（通过摘要属性）。

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

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

于 2008-11-24T19:15:15.510 回答
1

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

于 2008-11-24T15:30:41.750 回答
1

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

尽管 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>
于 2009-11-29T18:23:04.930 回答