187

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.

TylerH
  • 20,799
  • 66
  • 75
  • 101
Eastern Monk
  • 6,395
  • 8
  • 46
  • 61
  • 37
    Why do we need any tag? Why do we need an img tag when we can create an image from 1px divs with background colors? – Oded Mar 16 '12 at 16:53
  • 134
    Please note: [W3C](http://www.w3.org/) has ***nothing*** to do with w3schools. – Wesley Murch Mar 16 '12 at 16:54
  • 89
    Don't refer to w3schools. Just use MDN: [fieldset@MDN](https://developer.mozilla.org/en/HTML/Element/fieldset). – Sirko Mar 16 '12 at 16:54
  • 11
    @Madmartigan I know. But W3C gives only specification which I did not find of much use to get my question answered. – Eastern Monk Mar 16 '12 at 20:05
  • 3
    About (not) using W3Schools and using more trustworthy sites for technical information: http://www.w3fools.com/ – Denilson Sá Maia Sep 03 '13 at 16:34
  • @oded, I now want to try that, though spans within a div may be easier, since they are inline. less code! – ps2goat Oct 14 '13 at 20:10
  • 2
    Seems like the recommendation to no trust w3schools is no longer valid. The w3fools site links to their archived version for posterity and currently says that w3schools addressed their concerns. – Tim Partridge Oct 21 '21 at 20:31
  • MDN is still preferred, as w3fools mentions. – Nick McCurdy Sep 03 '22 at 07:49

11 Answers11

213

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">Blue</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.

Asons
  • 84,923
  • 12
  • 110
  • 165
Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335
  • 4
    I don't have a link handy, but apparently many screen readers read the legend text before *each* label in the fieldset. – Wesley Murch Mar 16 '12 at 16:59
  • 8
    @Madmartigan — That is a good thing, it means that you know you are still dealing with the same set of radio buttons. (It is also a reason to ensure the legend is *concise*). – Quentin Mar 16 '12 at 17:01
  • 2
    "assistive technology" that makes a lot of sense. – Eastern Monk Mar 16 '12 at 20:06
  • 8
    In addition,
    can be used to 'disable' grouped elements. I'd expect
    should also be used to specify whether a group is required by adding 'required' attribute to the tag, unfortunately that doesn't work!
     – Simon Savai Jun 04 '15 at 14:05
  • I'm testing this in VoiceOver and it does not repeat the fieldset legend until you reach the bottom of the fieldset. – Nick McCurdy Sep 03 '22 at 10:20
64

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>
Collin Price
  • 5,620
  • 3
  • 33
  • 35
33

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.

Smi
  • 13,850
  • 9
  • 56
  • 64
Eric Sites
  • 1,494
  • 10
  • 16
14

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.

dthagard
  • 823
  • 7
  • 23
10

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.

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>
altgov3en
  • 1,100
  • 2
  • 18
  • 33
7

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.

Boris D. Teoharov
  • 2,319
  • 4
  • 30
  • 49
5

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
mmsilviu
  • 1,211
  • 15
  • 25
4

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.

DWoldrich
  • 3,817
  • 1
  • 21
  • 19
  • `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.` -- That's the default behavior of radio inputs and has nothing to do with fieldsets. Checkboxes behave differently by default. – Val Kornea Sep 11 '17 at 03:42
3

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.

Community
  • 1
  • 1
Eric H.
  • 6,894
  • 8
  • 43
  • 62
2

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.

Chuck Spohr
  • 626
  • 4
  • 10
0

The fieldset is used for accessibility, organize and have a clearer form.

I found quite handy to wrap up radios where the title of the radios is what database field the user would choose (in the example below the state) but especially in fields such as the textarea.

That's because I would not put a label but instead use the tag as title / label.

Below a very simple example with pure.css

<link rel="stylesheet" href="https://unpkg.com/purecss@2.0.6/build/pure-min.css" integrity="sha384-Uu6IeWbM+gzNVXJcM9XV3SohHtmWE+3VGi496jvgX1jyvDTXfdK+rfZc8C1Aehk5" crossorigin="anonymous">

<div class="pure-g" style="    position: relative;
top: 50%;
left: 50%;
transform: translate(-18%);
}">
    <div class="pure-u-5-5">
        <form class="pure-form" method="get" action="#">

            <fieldset name="field-set-main">
                <legend>Create A Project</legend>
                <input type="text" placeholder="Name" />
                <div>
                    <input type="datetime-local" placeholder="Date Start" />
                    <input type="datetime-local" placeholder="Date End" />
                </div>
            </fieldset>

            <fieldset name="field-set-state">
                <legend>State</legend>
                <span>
                        <input type="radio" id="stateDraft" name="state" value="draft" checked>
                        <label for="stateDraft">Draft</label>
                    </span>
                <span>
                        <input type="radio" id="stateProgress" name="state" value="in_progress">
                        <label for="stateProgress">In Progress</label>
                    </span>
                <span>
                        <input type="radio" id="stateDone" name="state" value="done">
                        <label for="done">Done</label>
                    </span>
                <span>
                        <input type="radio" id="stateDiscarded" name="state" value="discarded">
                        <label for="discarded">Discarded</label>
                    </span>
            </fieldset>

            <fieldset name="field-set-description">
                <legend>Description</legend>
                <textarea id="story" name="description"
                          rows="5" cols="30" placeholder="Write Description here.." style="width=100;">

                </textarea>
            </fieldset>

            <fieldset name="field-set-control">
                <legend>Action</legend>
                <button type="submit" class="pure-button pure-button-primary">Submit</button>
                <button type="submit" class="pure-button pure-button-danger">Cancel</button>
            </fieldset>
        </form>
    </div>
</div>
Federico Baù
  • 6,013
  • 5
  • 30
  • 38