<fieldset> in HTML

Learn via video course
FREE
View all courses
JavaScript Course With Certification: Unlocking the Power of JavaScript
JavaScript Course With Certification: Unlocking the Power of JavaScript
by Mrinal Bhattacharya
1000
4.8
Start Learning
JavaScript Course With Certification: Unlocking the Power of JavaScript
JavaScript Course With Certification: Unlocking the Power of JavaScript
by Mrinal Bhattacharya
1000
4.8
Start Learning
Topics Covered

Overview

The fieldset in HTML is used to group logically related fields within the <form> tag. This element is used mostly in the large forms and is also used to group logically related controls and labels within a form and due to this the readability of the form increases. It helps to break down the large sections of the forms into various logical sections. When the fieldset in HTML is used, it'll create a boundary or a border around the related items that are grouped inside the fieldset tag in HTML.

To learn more about different tags in HTML, you can refer to Scaler Topics - HTML tags.

Syntax:

Like all the other tags in HTML, the fieldset tag in HTML is easy to use. The <fieldset> tag has an opening tag and a closing tag.

Attributes

You already know that HTML tags can contain one or more attributes. Attributes consist of a name and value separated by equals sign (=) and the value is surrounded by double-quotes.

The fieldset tag in HTML supports global attributes. Along with the global attributes, there are additional attributes supported by fieldset tag in HTML and they are mentioned below:

AttributesDescription
disabledThe disabled attribute is used to turn off all the form elements inside the <fieldset> element. It uses "disabled" as its value. It indicates that whenever this attribute is used, the group of the elements for which it is used, are disabled i.e. you cannot edit or type in the input details in the forms.
formThe form attribute of fieldset tag in HTML specifies one or more forms the fieldset belongs to. You can also refer to more than one form using a space-separated list. The value of the form attribute in fieldset tag in HTML must be equal to the id of the form it belongs to. In other words, the form attribute in fieldset tag in HTML takes its value from the id attribute of <form>.
nameThe name attribute defines a name for the logically grouped elements on the form. The value of the name attribute is a text. However, the name does not get displayed on the browser, it is used only while submitting the form to the server and client-side scripting.

What is the Use of the Fieldset Element in HTML?

  • The forms in HTML are hard to use and are mostly unorganized and unstructured. The fieldset tag in HTML solves this issue by organizing the forms and arranging them or grouping them into the logical sections on the web page.
  • The major usage of the fieldset tag in HTML is that you can break the forms into logical sections and these type of forms are easily readable for the users.
  • You can also use the <legend> element with the fieldset tag in HTML, it'll make your forms more structured and easy to use.
  • The fieldset tag in HTML when used with the disabled attribute, is used to disable all the form fields so that a user cannot enter any information in the input fields.

The Fieldset Tag Examples

Now, let's take some examples of the fieldset tag in HTML. The examples discussed below explains how to use the fieldset tag in HTML with the attributes, also how you can apply CSS to the fieldset tags to beautify it. Example: Simple fieldset In this example, a form is created and all the elements of the form are grouped together with the help of fieldset tag in HTML. The legend tag is also used to provide the caption for the <fieldset> element.

HTML:

Output: Output image of fieldset tag in HTML As you can see in the above output image, the fieldset tag in HTML is used to provide grouping of the form elements. Also, note that because of the <fieldset> tag in HTML, a border is created which includes all the grouped elements. And to provide the caption to the fieldset element, the <legend> tag is used.

Example: Disabled fieldset

In this example, a similar form is created with the attributes that are available with the fieldset tag in HTML. The below example demonstrates the use of fieldset element with the disabled attribute.

HTML:

Output:

Output of the above code snippet which explains disabled attribute tag in HTML

As shown in the above output, the attribute disabled is set to the value disabled. This means that all the child elements are disabled i.e. a user cannot edit or input the values in the form. If you want that the user should not enter any information in the form fields then you can use disabled attribute which is a boolean attribute, to disable the form fields. Example: Use of fieldset tag to make groups of related elements

In this example, fieldset tag in HTML is used to group the related items within the form so that readability of the form increases.

HTML:

Output:

Output of the above HTML code snippet which explains the grouping of related form elements As shown in the above output, various form elements can be grouped together with the use of fieldset tag in HTML. This improves the readability of the form as well as the form looks more organized and structured. The fieldset tag in HTML is widely used if the forms are large and contains various fields. It helps to organize and structure the large forms and improves the readability.

Example: Use CSS to style fieldset tag

In this example, you'll learn how to style the fieldset tag in HTML using CSS.

HTML:

CSS:

Output: Output of the above example in which CSS is used to apply  styling

As shown in the above example, you can use CSS and apply various styles to the fieldset tag in HTML. Just like the normal text in HTML you can apply borders, colors, alignment to the fieldset tag in HTML. In the above example, borders and paddings are applied to the fieldset tag having class name of group-1. And just like the normal text in the HTML, you can align the form elements, add the font family to the content, and many such CSS properties can be applied to the fieldset tag in HTML.

Accessibility concerns

  • You should not use the fieldset tag in HTML when there is only single piece of form element is available in the web page.
  • For the people who cannot see the visual layout of the web page or the form, you should use <fieldset> and <legend> tags while creating the HTML forms.
  • You can also apply the fieldset tag when you have a single multiple choice question which has radio buttons or checkboxes as an options.
  • Although it is possible to nest the fieldset tag in HTML, it is not recommended as the screen readers cannot automatically indicate the ending of the fieldset element. Due to this, it is impossible for the screen readers to know which fields belong within which fieldset.

Browser support

The <fieldset> tag in HTML is supported by various modern browsers and some of them are listed below:

BrowserYes/No
ChromeYes
EdgeYes
FirefoxYes
SafariYes
Internet ExplorerYes

Conclusion

  • The fieldset in HTML is used to group logically related fields within the <form> tag.
  • The fieldset element creates a box around the grouped items. It helps to break down the large sections of the forms into various logical sections.
  • There are various attributes such as disabled, form, name which can used with the fieldset tag in HTML.
  • The major usage of the fieldset tag in HTML is that you can break the forms into logical sections and these type of forms are easily readable for the users.
  • The fieldset tag has a <legend> tag that is used to define the caption for the grouped elements.
  • <label> element
  • <form> element
  • <input> element
  • <span> element