Html div 与 fieldset 元素——图例验证
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4588169/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
div vs fieldset elements -- legend validation
提问by John Livermore
I need some advice from the HTML guru's out there.
我需要一些 HTML 专家的建议。
Semantically I feel FIELDSET best fits a form that contains a list of fields for a user to fill in and submit. However, without a embedded LEGEND element, the page fails HTML 5 validation. We are using an H1 tag to title the form and don't need a LEGEND.
从语义上讲，我觉得 FIELDSET 最适合包含供用户填写和提交的字段列表的表单。但是，如果没有嵌入的 LEGEND 元素，页面将无法通过 HTML 5 验证。我们使用 H1 标签为表单命名，不需要 LEGEND。
We can add an empty LEGEND element to the FIELDSET and that fixes the validation issue. However is there something better to use for this situation (other than just DIV)?
我们可以向 FIELDSET 添加一个空的 LEGEND 元素并修复验证问题。但是，有没有更好的方法可以用于这种情况（不仅仅是 DIV）？
Appreciate any insights!
欣赏任何见解！
采纳答案by Jochie Nabuurs
I often find myself using a form fieldset without a legend and have come up with an elegant and screenreader friendly solution, while retaining the correct document outline and HTML5 validation. See the following code:
我经常发现自己使用没有图例的表单字段集，并提出了一个优雅且屏幕阅读器友好的解决方案，同时保留了正确的文档大纲和 HTML5 验证。请参阅以下代码：
<section>
<h2 id="legend-heading">
Inputfield buttons
</h2>
<form method="post" action="" name="inputfield-form">
<fieldset aria-labelledby="legend-heading">
<legend class="hide"></legend>
...
</fieldset>
</form>
</section>
The class "hide" on the legend element has the rule "display:none" assigned which hides the content from view. Also, screen readers skip content that has display:none assigned. By setting the aria-labelledby attibute on the fieldset we tell screen readers to use the element with the corresponding id (multiple id's are allowed here). By using the h2 (or any other heading element) we get a proper document outline and we end up with DRY code that's accessible, valid and SEO friendly.
图例元素上的“隐藏”类具有分配的规则“显示：无”，该规则将内容从视图中隐藏。此外，屏幕阅读器会跳过具有 display:none 分配的内容。通过在字段集上设置 aria-labelledby 属性，我们告诉屏幕阅读器使用具有相应 id 的元素（此处允许使用多个 id）。通过使用 h2（或任何其他标题元素），我们获得了正确的文档大纲，最终得到了可访问、有效且对 SEO 友好的 DRY 代码。
回答by Bruno Torquato
A fieldset without a legend should indeed be fine as a means of grouping form inputs. Don't be afraid to use divs or form elements, though, especially if you intend to reuse this code somewhere where you do want something like a legend. This is because fieldsets withlegends should be avoided unless you are using them to group a single set of checkboxes or radio buttons.
没有图例的字段集确实应该可以作为对表单输入进行分组的一种方式。不过，不要害怕使用 div 或表单元素，特别是如果您打算在确实需要图例之类的地方重用此代码时。这是因为应该避免带有图例的字段集，除非您使用它们来对一组复选框或单选按钮进行分组。
Why? Some screen readers assume that field sets will only be used that way and are optimized for that use case, causing the screen reader to announce the legend on every single input in the list, making it annoyingly verbose to tab through the inputs and decreasing the accessibility of the form. This is one of those rare cases where you can reduce the usability of your HTML by making it too semantically rich.
为什么？一些屏幕阅读器假设字段集只会以这种方式使用并针对该用例进行了优化，导致屏幕阅读器在列表中的每个输入上宣布图例，使得在输入中切换并降低可访问性变得冗长烦人的形式。这是一种罕见的情况，您可以通过使其语义过于丰富来降低 HTML 的可用性。
For a lengthier explanation, see this old (but still relevant) link: https://web.archive.org/web/20130922062411/http://www.rnib.org.uk/professionals/webaccessibility/wacblog/Lists/Posts/Post.aspx?id=40
有关更长的解释，请参阅这个旧的（但仍然相关）链接：https: //web.archive.org/web/20130922062411/http: //www.rnib.org.uk/professionals/webaccessibility/wacblog/Lists/Posts /Post.aspx?id=40
回答by Lightness Races in Orbit
You're right in that FIELDSETfits the bill.
你说得对，FIELDSET符合要求。
DIVis used too often, IMO, for catch-all situations where the designer doesn't really know what else to use for a container, much as TABLEused to be so often used for layout (mostly out of laziness).
DIVIMO，它经常用于设计者不知道容器还可以使用什么的所有情况，就像TABLE过去经常用于布局一样（主要是出于懒惰）。
I don't see a problem with an empty LEGENDelement, but consider replacing your H1with a styled LEGENDfor maximum semantic yumminess.
我不认为空LEGEND元素有问题，但考虑将您的替换为具有最大语义美味H1的样式LEGEND。
