In this section, we will learn what HTML <fieldset> element is and how it works.

What is <fieldset> Tag in HTML?

HTML <fieldset> element is used to group together related elements in a form.

For example, in a form there might be username and password boxes that we want to group them together. So we can use the <fieldset> element for this purpose.

Grouping elements in a form allows us to apply a specific style only to those grouped elements and left the other elements in a form unchanged.

By default, using <fieldset> element puts a line around those elements within its body.

HTML <fieldset> Tag Syntax:

<fieldset> </fieldset>

HTML <fieldset> Tag Values

The body of <fieldset> element is filled with those elements of a form that we want them to be grouped together.

Also, <fieldset> can take another element called <legend>. This element that comes exactly after the opening tag of the <fieldset>, takes a text value and that is considered as the caption of the grouped elements.

Example: using <field set> tag in HTML

See the Pen using <fieldset> tag in HTML by Omid Dehghan (@odchan1) on CodePen.

Fieldset legend tag

As mentioned before, HTML <legend> element is used to create a caption for the elements grouped via <fieldset>.

Note: the <legend> element comes exactly after the opening tag of the <fieldset> element.

HTML <fieldset> Tag Attributes

The <fieldset> has 3 attributes:

• disabled: using this attribute, we can disable the target <fieldset> element and hence the entire elements within that <fieldset>
• form: with this attribute, we can set the name of the form from which the <fieldset> belongs to.
• name: This attribute is used to set a name for the target <fieldset> attribute. This name later can be used in other languages like CSS and JavaScript to access the fieldset element.

What is disabled Attribute in HTML <fieldset> Tag?

The `disabled` attribute is used to disable the child elements of the target fieldset.

After applying this attribute to a <fieldset> element, the entire elements in the group will turn into a gray color to show that we can’t select and interact with those elements anymore.

HTML disabled Attribute in <fieldset> Tag Syntax:

<fieldset disabled> </fieldset>

<fieldset> Tag disabled Attribute Values

The disabled attribute is a Boolean and that means we only need to use this attribute in the opening tag of the <fieldset> element. Basically, this attribute doesn’t take any value.

Example: using disabled attribute in HTML <fieldset> tag

See the Pen using disabled attribute in HTML <fieldset> tag by Omid Dehghan (@odchan1) on CodePen.

What is form attribute in HTML <fieldset> Tag?

The form attribute is used to declare what form this <fieldset> element belongs to.

When using form attribute, you don’t need to put the target <fieldset> within the body of the target <form> element anymore.

HTML form Attribute in <fieldset> Tag Syntax:

<fieldset form = “form_id”> </fieldset>

<fieldset> Tag form Attribute Values

The value we set for the form attribute is the id of the target <form> element that we want to relate this <fieldset> to.

Example: using form attribute in HTML <fieldset> tag

See the Pen using form attribute in HTML <fieldset> tag by Omid Dehghan (@odchan1) on CodePen.

What is name attribute in HTML <fieldset> Tag?

The name attribute is used to set a name for the target <fieldset> element.

Later on, we can use this name in other languages like JavaScript and CSS to access and reference the <fieldset> element.

HTML name Attribute in <fieldset> Tag Syntax:

<fieldset name = “fielsset-name”> </fieldset>

<fieldset> Tag name Attribute Values

The value we set for the name attribute is the name we want that fieldset to have. This name could be anything from general names to specific ones.

Usually try to put names that help you differentiate the target fieldset from others in the document.

Example: using name attribute in HTML <fieldset> tag

See the Pen using name attribute in HTML <fieldset> tag by Omid Dehghan (@odchan1) on CodePen.