HTML <fieldset> Tag

The HTML <fieldset> tag represents a group of form elements in an HTML document.

The <fieldset> tag can be used with the <legend> tag to make a form more readable and/or easier to comprehend.

Syntax

The <fieldset> tag is written as <fieldset></fieldset> with the grouped form controls inserted between the start and end tags.

You can use the disabled attribute to disable all child form controls within the <fieldset> element. You can also use the form attribute to associate the element with a <form> element on the same document.

Like this:

<fieldset form="myForm" disabled>
...form controls here...
</fieldset>

Examples

Basic tag usage

Here we create two groups of form elements - one for name details, the other for gender.

CodeResult

First Name: Surname:

Preferred Name:

Male Female Other

Add a Legend

You can use the <legend> element to provide a legend for the <fieldset> elements. This makes it easier for users to understand what each <fieldset> element represents.

CodeResult

Name Details

First Name: Surname:

Preferred Name:

Gender Male Female Other

The disabled Attribute

You can disable all elements within a <fieldset> element by using the disabled attribute. This prevents users from being able to interact with the form controls.

The disabled attribute is a boolean attribute (its value is either true or false). The mere presence of this attribute sets its value to true. Therefore, you don't need to add a value (simply writing disabled is all that is required to disable the element).

Here, we disable the first <fieldset> element ("Name Details").

CodeResult

Name Details

First Name: Surname:

Preferred Name:

Gender Male Female Other

Add Styles

You can add styles to the <fieldset> element, just as you can with any other element.

CodeResult

Name Details

First Name: Surname:

Preferred Name:

Gender Male Female Other

Differences Between HTML 4 & HTML 5

HTML5 has added 3 new attributes for the <fieldset> element. These are:

  • disabled
  • form
  • name

Also, the align attribute is obsolete in HTML5 (it was already deprecated in HTML 4).

To see more detail on the two versions see HTML5 <fieldset> Tag and HTML4 <fieldset> Tag. Also check out the links to the official specifications below.

Template

Here's a template for the <fieldset> tag with all available attributes for the tag (based on HTML5). These are grouped into attribute types, each type separated by a space. In many cases, you will probably only need one or two (if any) attributes. Simply remove the attributes you don't need.

For more information on attributes for this tag, see HTML5 <fieldset> Tag and HTML4 <fieldset> Tag.

<fieldset  
 disabled=""
 form=""
 name=""
 
 accesskey=""
 class=""
 contenteditable=""
 contextmenu=""
 dir=""
 draggable=""
 dropzone=""
 hidden=""
 id=""
 itemid=""
 itemprop=""
 itemref=""
 itemscope=""
 itemtype=""
 lang=""
 spellcheck=""
 style=""
 tabindex=""
 title=""
 translate=""

 onabort=""
 onautocomplete=""
 onautocompleteerror=""
 onblur=""
 oncancel=""
 oncanplay=""
 oncanplaythrough=""
 onchange=""
 onclick=""
 onclose=""
 oncontextmenu=""
 oncuechange=""
 ondblclick=""
 ondrag=""
 ondragend=""
 ondragenter=""
 ondragexit=""
 ondragleave=""
 ondragover=""
 ondragstart=""
 ondrop=""
 ondurationchange=""
 onemptied=""
 onended=""
 onerror=""
 onfocus=""
 oninput=""
 oninvalid=""
 onkeydown=""
 onkeypress=""
 onkeyup=""
 onload=""
 onloadeddata=""
 onloadedmetadata=""
 onloadstart=""
 onmousedown=""
 onmouseenter=""
 onmouseleave=""
 onmousemove=""
 onmouseout=""
 onmouseover=""
 onmouseup=""
 onmousewheel=""
 onpause=""
 onplay=""
 onplaying=""
 onprogress=""
 onratechange=""
 onreset=""
 onresize=""
 onscroll=""
 onseeked=""
 onseeking=""
 onselect=""
 onshow=""
 onsort=""
 onstalled=""
 onsubmit=""
 onsuspend=""
 ontimeupdate=""
 ontoggle=""
 onvolumechange=""
 onwaiting=""
	>
</fieldset>

Tag Details

For more details about the <fieldset> tag, see HTML5 <fieldset> Tag and HTML4 <fieldset> Tag.

Specifications

Here are the official specifications for the <fieldset> element.

What's the Difference?

W3C creates "snapshot" specifications that don't change once defined. So the HTML5 specification won't change once it becomes an official recommendation. WHATWG on the other hand, develops a "living standard" that is updated on a regular basis. In general, you will probably find that the HTML living standard will be more closely aligned to the current W3C draft than to the HTML5 specification.