HTML Tutorial: Complete HTML Tutorial
About Lesson

HTML <fieldset> Tag


The <fieldset> tag in HTML is utilized to group related elements within a form. It’s a way to organize form controls, making the form more user-friendly. This tag often works in conjunction with the <legend> tag to provide a caption for the fieldset.


Example: Grouping Contact Information

Sponsored by Google

Imagine you are creating a registration form, and you want to group the contact information together. You can use the <fieldset> tag to achieve this:

    <legend>Contact Information</legend>
    <label for="email">Email:</label>
    <input type="email" id="email" name="email">
    <label for="phone">Phone:</label>
    <input type="tel" id="phone" name="phone">

Example: Grouping Payment Details

In an e-commerce checkout form, you might want to group the payment details together:

    <legend>Payment Details</legend>
    <label for="cardNumber">Card Number:</label>
    <input type="text" id="cardNumber" name="cardNumber">
    <label for="expiryDate">Expiry Date:</label>
    <input type="date" id="expiryDate" name="expiryDate">

Try it out below:



Attribute Value Description
disabled disabled Specifies that a group of related form elements should be disabled.
form form_id Specifies which form the fieldset belongs to.
name text Specifies a name for the fieldset.

Global Attributes

The <fieldset> tag supports all the global attributes in HTML.

Event Attributes

The <fieldset> tag also supports all the event attributes in HTML.

Browser Support

Browser Support
Chrome Yes
Firefox Yes
Safari Yes
Opera Yes
IE Yes

Default CSS Settings

Most browsers will display the <fieldset> element with the following default CSS settings:

fieldset {
  display: block;
  margin-left: 2px;
  margin-right: 2px;
  padding-top: 0.35em;
  padding-bottom: 0.625em;
  padding-left: 0.75em;
  padding-right: 0.75em;
  border: 2px groove (internal value);


The <fieldset> tag is valuable for web developers, allowing for the logical grouping of form elements.

It enhances the user experience by providing a clear structure to forms, making them more accessible and easier to navigate.