What are the advantages of using the fieldset tag?

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

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

Answers


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


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:


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>

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.


Need Your Help

Knitr style table with CSS

css r knitr r-markdown

I am sure that I am overlooking something obvious, but I want to style my tables produced and kable with custom css.

When can I safely use the new <main> element in HTML5?

html html5 semantic-markup specifications

On the 16th December, a HTML5 extension specification for the &lt;main&gt; element was submitted to the W3C under something called an editors draft. The abstract is as follows: