What are the advantages of using the fieldset tag?

Question

What are the advantages of using the <fieldset> tag?

I don't really get what it is used for.

As a side note it also helps to reinforce semantic HTML. https://en.wikipedia.org/wiki/Semantic_HTML — AtheistP3ace, Oct 09 '15 at 14:05

score 30 · Accepted Answer · answered Jun 29 '11 at 12:03

30

Forms are often broken up into various sets of fields.

The fieldset tag allows you to logically group sets of fields in order that your forms be more descriptive.

You'll also note that you can use the fieldset to style your forms and display those logical associations between fields.

Just like forms you find in the "real" world.

The "advantages" of using a fieldset are that 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.

It's a similar principle to many of the new HTML5 tagsets. <footer> for example tells you more about the meaning of the data inside it compared to an ambiguous <div>.

answered Jun 29 '11 at 12:03

Jamie Dixon

53,019
19
125
162

http://www.456bereastreet.com/archive/200904/use_the_fieldset_and_legend_elements_to_group_html_form_controls/ for further information – Andreas Jun 29 '11 at 12:04
Summarizing it would only be to make the code more descriptive (because all the rest you can achieve with a `
`), right?
– Diego Jun 29 '11 at 12:51
3

@Diego: As with all HTML tags, it is not for "looks", it is meant to describe what the content ***is***. Sure, we could use a styled `
` for *every* element - but then everything would be equally meaningless.
– Wesley Murch Jun 29 '11 at 15:15
1

So it's my understanding that it's useful only when you use it more than once in the same form (except for style). – ecoologic Feb 08 '12 at 12:25

thirtydot · Answer 2 · 2011-06-29T12:13:35.997

6

If you take a look at the HTML5 spec for Developers:

http://developers.whatwg.org/forms.html#the-fieldset-element

The fieldset element represents a set of form controls optionally grouped under a common name.

(there's a lot more information if you follow the link)

Combined with the legend element, it allows you to easily do this, which is difficult to recreate without using fieldset/legend:

edited Jun 29 '11 at 12:13

answered Jun 29 '11 at 12:04

thirtydot

224,678
48
389
349

It's fairly easy to recreate with negative margins or positioning, it's styling the legend tag itself that can be impossible - it's one of those "odd" tags that doesn't follow the rules. – Wesley Murch Jun 29 '11 at 12:09
@Wesley Murch: It's easy if you can just cover the top border with the text. If you need proper transparency, I stand by my statement that it's difficult. – thirtydot Jun 29 '11 at 12:12
@Wesley Murch: I tried to do it myself :( http://stackoverflow.com/questions/5985009/how-can-i-make-a-fieldset-legend-style-background-line-on-heading-text – thirtydot Jun 29 '11 at 12:16
1

Understood and agreed, it's somewhat conditional that you can get it to look exactly the same, just not in the example provided. Of course it's easy if you assign a background to a heading ***if*** it's the same background as the fieldset's parent. I've [had issues](http://stackoverflow.com/questions/6133571/how-can-i-make-legend-text-wrap) with legend as well. – Wesley Murch Jun 29 '11 at 12:17
@thirtydot: I'd really like to be able to accept this answer to :(.. Thanks anyway!! – Diego Jul 01 '11 at 10:33

score 5 · Answer 3 · answered Jun 29 '11 at 12:05

It allows you to group a set of related fields and give them a legend.

<fieldset>
    <legend>Gender</legend>
    <input type="radio" name="gender" id="male" value="male">
    <label for="male">Male</label>
    <input type="radio" name="gender" id="female" value="female">
    <label for="female">Female</label>
<fieldset>

<fieldset>
    <legend>Address</legend>

    <label for="line1">Line 1</label>
    <input name="address1" id="line1">

    <label for="line2">Line 2</label>
    <input name="address2" id="line2">

    <label for="town">Town</label>
    <input name="town" id="town">

    <label for="country">country/label>
    <input name="country" id="country">
</fieldset>

would you place buttons within a separate `fieldset`? Take your example above, where would you feel the submit button would best lie? — Lea Hayes, Aug 03 '11 at 14:18
Assuming there is only one submit button, it would apply to the whole form and not be group with any subset, so there wouldn't be any fieldset for it. — Quentin, Aug 03 '11 at 14:20

score 1 · Answer 4 · answered Jun 29 '11 at 12:03

1

You group stuff together with it. Which is useful if you need to access things in it for CSS or JavaScript, and don't want to go through the hassle of assigning ID's to everything.

Also, the legend looks pretty good.

answered Jun 29 '11 at 12:03

Andreas Eriksson

8,979
8
47
65

fieldsets are intended to group multiple, related fields only. If it's in a fieldset it should either be an input or directly related to an input in that fieldset. Their entire purpose is for semantics (mostly for non-visual agents), not layout. – Jun 29 '11 at 12:12

What are the advantages of using the fieldset tag?

4 Answers4