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.

Answer 1

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

Answer 2

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:

Answer 3

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>

Answer 4

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.