HTML Fieldset Tag

HTML <fieldset> tag groups the logically related fields/labels in an HTML form.

Using this tag is optional while creating an HTML form, but using the <fieldset> tag makes it easier to understand the purpose of the grouped elements of the form.

The <legend> tag is used with the <fieldset> element as a first child to define the caption for the grouped related fields.

This combination of <fieldset> tag and <legend> tag helps organize and structure the form, which makes it more understandable and accessible to users.

Syntax of <fieldset> Tag

The above syntax contains :

<fieldset>: It is the starting tag of the <fieldset> element.
</fieldset>: It is the closing tag of the <fieldset> element.

The form elements are placed between <fieldset> tag.

Syntax of <legend> Tag

The above syntax contains :

<legend>: It is the starting tag of the <legend> element.
</legend>: It is the closing tag of the <legend> element.

The caption is written inside the opening tag and closing tag of the <legend> element.

Examples of the <fieldset> Tag

Example 1:

We create a "User basic information" group using the <fieldset> tag in this example.

Code:

<!DOCTYPE html>
<html>
<head>
<title>Example-1 of &ltfieldset&gt tag</title>
<style>
   body {
        text-align: center;
       }  
    p {
        color: #db7093;  
        text-align: center;
        font-size: 40px;  
        font-weight: bold;  
        }  
    form{  
        color: white;
        width: 600px;  
        height: 315px;  
        margin: auto;
        }  
    div {
        background-color: #28455e;  
        }  
    .feedback {
        margin-left: 15px;  
        }  
</style>  
</head>  
<body>  
 <h1>Example-1 of the &ltfieldset&gt tag</h1>  
 <p>User Feedback Form</p>  
 <div>  
 <form class="wd">  
     <fieldset class="wd">  
        <legend>User basic information:</legend>  
        <label>First Name</label> <br>  
        <input type="text" name="fname"> <br>  
        <label>Last Name</label> <br>  
        <input type="text" name="lname"> <br>  
        <label>Enter Email</label> <br>  
        <input type="email" name="email"> <br><br>  
     </fieldset> <br>  
    <label class="feedback">Enter your feedback:</label> <br>  
    <textarea class="feedback" cols="30"></textarea> <br><br>  
     <input  class="feedback" type="Submit" value="Submit"> <br>  
  </form>  
 </div>  
</body>  
</html>    

Output:

As you can see below, the group name is displayed, and a boundary line is drawn around the grouped elements.

Example 2

In this example, we are creating two groups, which are named "Contact Information" and "Address Information", using the <fieldset> tag.

Code:

 <!DOCTYPE html>
<html>
<head>
    <title>Example-2 of the &ltfieldset&gt tag</title>
    <style>
        body {
            font-family:'Courier New', Courier, monospace;
            text-align: center;
        }
        form {
            width: 350px;
            margin: auto;
        }
        fieldset {
            border: 2px solid #f8afaf;
            border-radius: 5px;
            margin-bottom: 15px;
            padding: 10px;
        }
        legend {
            font-weight: bold;
            color: #910c0c;
        }
        label {
            display: inline-block;
            text-align: right;
            margin-right: 5px;
        }
        .submit {
            background-color: #9c2f0e;
            color: #fde2e2;
            font-size: 18px;
            padding: 6px 15px;
            border: none;
            border-radius: 6px;
        }
    </style>
</head>
<body>
    <h1>Example-2 of the &ltfieldset&gt tag</h1>
    <form>
        <fieldset>
            <legend>Contact Information</legend>
            <label for="name">Name:</label>
            <input type="text" id="name" name="name"> <br><br>
            <label for="email">Email:</label>
            <input type="email" id="email" name="email"> <br><br>
            <label for="phone">Phone:</label>
            <input type="tel" id="phone" name="phone"> <br><br>
        </fieldset>
        <fieldset>
            <legend>Address Information</legend>
            <label for="street">Street:</label>
            <input type="text" id="street" name="street"> <br><br>
            <label for="city">City:</label>
            <input type="text" id="city" name="city"> <br><br>
            <label for="state">State:</label>
            <input type="text" id="state" name="state"> <br><br>
        </fieldset>
        <input type="submit" value="Submit" class="submit">
    </form>
</body>
</html>

Output:

As you can see below, a boundary line is drawn around the two groups.

Example 3

In this example, we are creating two groups, which are named "Product Details" and "Shipping Details", using the <fieldset> tag.

Code:

<!DOCTYPE html>
<html>
<head>
    <title>Example-3 of the &ltfieldset&gt tag</title>
    <style>
        body {
            font-family:Arial, Helvetica, sans-serif;
            background-color: #fdf8e7;
        }
        h1 {
            text-align: center;
        }
        form {
            max-width: 500px;
            margin: auto;
            background-color: #fbeb75;
            padding: 25px;
            border-radius: 6px;
        }
        fieldset {
            border: 3px dotted #68541d;
            border-radius: 6px;
            padding: 10px;
            margin-bottom: 20px;
        }
        legend {
            font-weight: bold;
            color: #261e1e;
        }
        label {
            display: inline-block;
            font-size: 18px;
            color: #cf6610;
            text-align: right;
        }
        #product, #quantity, textarea {
            padding: 10px 20px;
            border: 1px solid #fdf39e;
            border-radius: 2px;
            background-color: #f3f0dd;
        }
        #submit {
            background-color: #48f35c;
            color: white;
            border: none;
            font-size: 15px;
            font-weight: bold;
            padding: 15px 30px;
            border-radius: 5px;
        }
    </style>
</head>
<body>
    <h1>Example-3 of the &ltfieldset&gt tag</h1>
    <form>
        <fieldset>
            <legend>Product Details</legend>
            <label for="product">Product Name:</label> 
            <input type="text" id="product" name="product"> <br><br>
            <label for="quantity">Quantity:</label> 
            <input type="number" id="quantity" name="quantity">
        </fieldset>
        <fieldset>
            <legend>Shipping Information</legend>
            <label for="address">Shipping Address:</label> <br><br>
            <textarea id="address" name="address" cols="50" rows="4"></textarea> <br><br>
        </fieldset>
        <input type="submit" value="Place Order" id="submit">
    </form>
</body>
</html>

Output:

As you can see below, a boundary line is drawn around the two groups.

Example 4

In this example, we are creating a group named "Your Information" and turning off all form controls within the <fieldset> tag using the "disabled" attribute.

Code:

<!DOCTYPE html>
<html>
<head>
    <title>Example-4 of the &ltfieldset&gt tag</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #eaccfa;
            text-align: center;
        }
        .container {
            max-width: 400px;
            margin: 0 auto;
            padding: 20px;
            background-color: #eaccfa;
            border-radius: 50px;
            box-shadow: 0 0 50px rgba(63, 56, 56, 0.2);
        }
        h2 {
            color: #6c0c77;
        }
        fieldset {
            border: 2px solid #e1b2fa;
            padding: 10px;
            border-radius: 25px;
            margin-bottom: 25px;
        }
        legend {
            font-weight: bold;
            color: #6c0c77;
        }
        label {
            display: inline-block;
        }
        #name, #Email-ID {
            width: 75%;
            padding: 10px;
            margin-bottom: 15px;
            border: 1px solid #ccc;
            border-radius: 3px;
        }
        #submit {
            background-color: #062f5a;
            color:White;
            border: none;
            padding: 10px 35px;
            border-radius: 50px;
            }
    </style>
</head>
<body>
    <h1>Example-4 of the &ltfieldset&gt tag</h1>
    <div class="container">
        <h2>Subscribe to Our Newsletter</h2>
        <form>
            <fieldset disabled>
                <legend>Your Information</legend>
                <label for="name">Name:</label>
                <input type="text" id="name" name="name" required>
                <label for="Email-ID">Email-ID:</label>
                <input type="Email-ID" id="Email-ID" name="Email-ID" required>
            </fieldset>
            <input type="submit" value="Subscribe" id="submit">
        </form>
    </div>
</body>
</html>

Output:

As you can see below, a boundary line is drawn around a group, and all form controls have been turned off.

Attributes

Tag-specific attribute:

Attribute	Value	Description
Disabled	Disabled	It specifies that all form controls within the <fieldset> tag are disabled.
Form	form_id	It specifies which form <fieldset> is when the form contains multiple fieldsets.
Name	Text	It specifies the name associated with the <fieldset>. It will not display in the browser and is useful with JS.

Global attributes

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

Event attributes

HTML <fieldset> tag supports the event attributes in HTML.

Browser Support

Below are the browsers that support the <fieldset> tag:

Safari
Google Chrome
Internet Explorer
Firefox
Microsoft Edge
Opera

Conclusion

In this article, you have understood the HTML <fieldset> tag with the help of examples and how it is used to group related fields within an HTML form.

Next TopicHTML figcaption Tag

← prev next →