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.

Reputation: 6655

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.

Upvotes: 192

Answers (11)

Federico Baù

Reputation: 7735

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/[email protected]/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>

Upvotes: 1

Quentin

Reputation: 944555

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.

Upvotes: 219

altgov3en

Reputation: 1206

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>

Upvotes: 14

mmsilviu

Reputation: 1461

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

Upvotes: 5

Collin Price

Reputation: 5860

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>

Upvotes: 67

Eric Sites

Reputation: 1544

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.

Upvotes: 38

DWoldrich

Reputation: 4027

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.

Upvotes: 4

Boris D. Teoharov

Reputation: 2388

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.

Upvotes: 8

Eric H.

Reputation: 7014

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.

Upvotes: 3

dthagard

Reputation: 853

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.

Upvotes: 14

Chuck Spohr

Reputation: 626

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.

Upvotes: 2

Why do we need a fieldset tag?

Answers (11)

Related Questions