What is the difference between the and tags?

The tag groups related form elements, while the tag is used within the to provide a caption or title for the grouped elements.

HTML fieldset Tag

Last Updated : 27 Nov, 2024

The <fieldset> tag in HTML is used to group related elements within a form. It provides a visual and semantic structure to the form, making it easier for users to understand the relationship between different input elements. The <fieldset> tag is often used with the <legend> tag, which provides a caption or title for the group of fields.

HTML

<!DOCTYPE html>
<html>

<head>
    <style>
        body {
            text-align: center;
        }

        input {
            margin: 10px;
        }

        fieldset {
            margin-top: 5px;
        }
    </style>
</head>

<body>
    <form>
        <p>Employee Personal Details:</p>
        <fieldset>
            <legend>Details:</legend>
            Name:<input type="text">
            Emp_Id:<input type="text">
            Designation:<input type="text">
        </fieldset>
    </form>
</body>

</html>

Syntax

<fieldset>
    <legend>Group Title</legend>
    <!-- Form elements go here -->
</fieldset>

Note: The <fieldset> tag also supports the Global Attribute and Event Attributes in HTML.

Attribute

Attribute Values	Description
disabled	When set as a Boolean attribute within the `<fieldset>`, it disables all descendant form controls, making them uneditable and unsubmitted in the form, ensuring they do not respond to browsing events, typically displayed as grayed out.
form	It is used to specify the one or more forms that the <fieldset> element belongs to.
name	It is used to specify the name for the Fieldset element.
autocomplete	It is used to specify that the field set has autocompleted on or off value.

Grouping Form Elements with <fieldset> Tag

HTML

<!DOCTYPE html>
<html>

<head>
  <style>
    fieldset {
      border: 2px solid #007BFF;
      padding: 10px;
      margin: 10px 0;
    }

    legend {
      font-weight: bold;
      padding: 0 10px;
    }
  </style>
</head>

<body>
  <h1>Contact Form</h1>
  <form>
    <fieldset>
      <legend>Personal Information</legend>
      <label for="name">Name:</label>
      <input type="text" id="name" 
             name="name" required><br><br>

      <label for="email">Email:</label>
      <input type="email" id="email" 
             name="email" required><br><br>
    </fieldset>

    <fieldset>
      <legend>Message Details</legend>
      <label for="subject">Subject:</label>
      <input type="text" id="subject" 
             name="subject" required><br><br>

      <label for="message">Message:</label>
      <textarea id="message" name="message" 
                required></textarea><br><br>
    </fieldset>

    <input type="submit" value="Send Message">
  </form>

</body>

</html>

HTML5 fieldset Tag – FAQs

What is the difference between the <fieldset> and <legend> tags?

The <fieldset> tag groups related form elements, while the <legend> tag is used within the <fieldset> to provide a caption or title for the grouped elements.

How do I disable all elements within a <fieldset>?

You can disable all form controls inside a <fieldset> by adding the disabled attribute to the <fieldset> tag. Example: <fieldset disabled>. All contained form elements will become non-interactive.

Can a <fieldset> tag contain multiple <legend> tags?

No, a <fieldset> should only contain one <legend> tag, which serves as the title or caption for the group of elements within the fieldset.

Is the <fieldset> tag block-level or inline-level?

The <fieldset> tag is a block-level element, meaning it takes up the full width available and starts on a new line by default.

Can I nest <fieldset> tags inside each other?

Yes, you can nest <fieldset> tags within each other to create sub-groups within a form. This can be useful for complex forms with multiple sections or related groups of inputs.