Thanks to visit codestin.com
Credit goes to www.geeksforgeeks.org

Open In App

HTML fieldset Tag

Last Updated : 11 Jul, 2025
Comments
Improve
Suggest changes
8 Likes
Like
Report

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>

V

Vishal_Khoda
Improve
Article Tags :

Explore

Lightbox