Why do we need a fieldset tag?

问题

Why do we need a <fieldset> tag? Whatever purpose it serves is probably a subset of the form tag.

I looked up some info on W3Schools, which says:

The <fieldset> tag is used to group related elements in a form.
The <fieldset> tag draws a box around the related elements.

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.

回答1:

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.

回答2:

Another feature of fieldset is that disabling it disables all of the fields contained within it.

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

回答3:

It's needed for accessibility.

Check out: 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.

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.

回答4:

As described here, the purpose of this tag is to provide clarity to the organization of the form and allow a designer easier access to decorate form elements.

回答5:

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.

回答6:

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.

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.

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.

回答7:

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.

回答8:

I use fieldsets to group form inputs, when I have a huge form and want to break it up in a sort of form wizard.

This same questions was answered here on SO.

回答9:

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.

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

来源：https://stackoverflow.com/questions/9741328/why-do-we-need-a-fieldset-tag

标签

html

fieldset