Html 为什么我们需要一个字段集标签?
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/9741328/
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
Why do we need a fieldset tag?
提问by Eastern Monk
Why do we need a <fieldset>
tag? Whatever purpose it serves is probably a subset of the form tag.
为什么我们需要<fieldset>
标签?无论它的用途是什么,都可能是表单标签的一个子集。
I looked up some info on W3Schools, which says:
我在 W3Schools 上查找了一些信息,上面写着:
- The
<fieldset>
tag is used to group related elements in a form. - The
<fieldset>
tag draws a box around the related elements.
- 该
<fieldset>
标记用于在窗体组相关的元素。 - 该
<fieldset>
标签在相关元素周围绘制一个框。
More explanation for those who are mistaking "why it exists in specification" for "what it does". I think the drawing part is irrelevant, and I don't see why we need a special tag just to group some related elements in a form.
对于那些将“为什么它存在于规范中”误认为“它做什么”的人的更多解释。我认为绘图部分无关紧要,我不明白为什么我们需要一个特殊的标签来将一些相关元素组合到一个表单中。
回答by Quentin
The most obvious, practical example is:
最明显、最实际的例子是:
<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>
This allows each radio button to be labeled while also providing a label for the group as a whole. This is especially important where assistive technology (such as a screen reader) is being used where the association of the controls and their legend cannot be implied by visual presentation.
这允许标记每个单选按钮,同时还为整个组提供标签。这在使用辅助技术(如屏幕阅读器)的情况下尤其重要,因为视觉呈现不能暗示控件及其图例的关联。
回答by Collin Price
Another feature of fieldset is that disabling it disables all of the fields contained within it.
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>
回答by Eric Sites
It's needed for accessibility.
它是可访问性所必需的。
Check out: http://usability.com.au/2013/04/accessible-forms-1-labels-and-identification/
查看:http: //usability.com.au/2013/04/accessible-forms-1-labels-and-identification/
The HTML 4 elements fieldset
and legend
allow you to layout and organise a large form with many different areas of interest in a logical way without using tables. The fieldset
tag can be used to create boxes around selected elements and the legend
tag will give a caption to those elements. In this way form elements can be grouped together into identified categories.
HTML 4 元素fieldset
,legend
允许您在不使用表格的情况下以合乎逻辑的方式布局和组织具有许多不同兴趣区域的大型表单。该fieldset
标签可用于在选定元素周围创建框,该legend
标签将为这些元素提供标题。通过这种方式,表单元素可以被组合成识别的类别。
Different browsers may display the default fieldset
border in different ways. Cascading Style Sheets can be used to remove the border or change its appearance.
不同的浏览器可能fieldset
以不同的方式显示默认边框。级联样式表可用于移除边框或更改其外观。
回答by dthagard
回答by Boris D. Teoharov
Fieldset organizes items in forms logically but it also improves the accessibility for those who use aural browsers. Fieldset is handy and thus it was hugely popular in the past in many applications so they implemented it in html too.
Fieldset 以逻辑形式组织项目,但它也提高了使用听觉浏览器的人的可访问性。Fieldset 很方便,因此它在过去在许多应用程序中非常流行,所以他们也在 html 中实现了它。
回答by DWoldrich
I like it that when you surround your radios with fieldset, and you don't put id's on your radio button input tags, then the group represented by the fieldset is added to the tabchain as if it was a single item.
我喜欢当你用 fieldset 包围你的收音机,并且你没有把 id 放在你的单选按钮输入标签上时,那么由 fieldset 表示的组被添加到 tabchain 中,就好像它是单个项目一样。
This lets you tab through a form, and when you get to a fieldset, you can use arrow keys to change the selected radio, and then tab away when you're done.
这使您可以通过 Tab 键浏览表单,当您到达字段集时,您可以使用箭头键更改选定的单选,然后在完成后使用 Tab 键离开。
Also, don't forget accessibility. Screen readers need fieldset+legend in order to understand your form and be able to read it off to the user in some sort of natural way. Feel free to disappear the legend if you don't want sighted users to see it. Laying out and styling legend just right with CSS is sometimes dicey cross-browsers especially with legacy browsers, so I find making the legend tag invisible for screen reader users and adding a separate, aria-hidden="true" span styled like a label for sighted users makes things simple to style and keeps things accessible.
另外,不要忘记可访问性。屏幕阅读器需要 fieldset+legend 才能理解您的表单并能够以某种自然的方式将其读给用户。如果您不想让视力正常的用户看到它,请随意消失图例。使用 CSS 对图例进行布局和样式设置有时是跨浏览器的冒险行为,尤其是对于旧版浏览器,因此我发现让图例标签对屏幕阅读器用户不可见,并添加一个单独的 aria-hidden="true" 跨度,其样式类似于标签有视力的用户使事情变得简单,并使事情易于访问。
回答by Eric H.
回答by Chuck Spohr
I find it handy for CSS styling and associating labels to controls. It makes it easy to put a visual container around a group of fields and align the labels.
我发现它对于 CSS 样式和将标签与控件相关联很方便。它可以轻松地在一组字段周围放置可视容器并对齐标签。
回答by mmsilviu
Just summarising some advantages:
简单总结一些优点:
The?HTML?<fieldset>
?element?is used to group several controls as well as labels (<label>
) within a web form as it is defined by MDN.
的?HTML?<fieldset>
?element? 用于在MDN<label>
定义的 Web 表单中对多个控件和标签 ( )进行分组。
In other words: The fieldset tag allows you to logically group sets of fields in order that your forms be more descriptive.So, a set of form controls optionally grouped under a common name.
换句话说:fieldset 标签允许您对字段集进行逻辑分组,以便您的表单更具描述性。因此,一组表单控件可选地分组在一个通用名称下。
<fieldset>
<legend>Choose your favorite animal</legend>
<input type="radio" id="dog" name="animal">
<label for="dog">Dog</label><br/>
<input type="radio" id="cat" name="animal">
<label for="cat">Cat</label><br/>
</fieldset>
The "advantages" of using a fieldset are:
使用字段集的“优点”是:
- they allow you to mark up your data (in this case a form) in the most semanticway available. Consider that placing your fields in a fieldset is more descriptive than placing your fields in a div. The div tells you nothing about the relationship between the fields, a fieldset tells you there is a relationship.
- by using disabled, it allows you to disable the and all its contents in one go.
- it's helpful to accessibility
回答by altgov3en
As for me, one of the biggest advantages of the <fieldset>...</fieldset>
element is the ability to preserve <form>...</form>
context even if the <fieldset>...</fieldset>
is not inside the form.
对我来说,<fieldset>...</fieldset>
元素的最大优点之一是<form>...</form>
即使<fieldset>...</fieldset>
不在表单内也能保留上下文。
For example, the following form:
例如,以下表格:
<div class="header">
<form id="myForm">
<input type="text" name="someInput">
</form>
</div>
<div class="footer">
<fieldset form="myForm">
<input type="text" name="someInput1">
</fieldset>
</div>
is semantically identical to the following form:
在语义上与以下形式相同:
<form>
<input type="text" name="someInput">
<input type="text" name="someInput1">
</form>