HTML - HTML <fieldset> and <legend> Elements

The HTML <fieldset> and <legend> elements are used together to group related form controls in a clear and organized manner. They are especially useful when a form contains several sections, such as personal information, contact details, educational details, or payment information.

The <fieldset> element creates a visual and semantic group around related form elements, while the <legend> element provides a caption or title for that group.

1. What is the <fieldset> Element?

The <fieldset> element is used to group related controls and information within an HTML form.

For example, suppose a registration form contains the following fields:

• First Name

• Last Name

• Email

• Phone Number

These fields are related to personal information, so they can be placed inside a <fieldset>.

Basic Syntax

<fieldset>
    Form controls go here
</fieldset>

Example:

<form>
    <fieldset>
        <input type="text" name="firstName">
        <input type="text" name="lastName">
    </fieldset>
</form>

By default, browsers generally display a border around the contents of the <fieldset>, visually separating the grouped controls from other parts of the form.

2. What is the <legend> Element?

The <legend> element provides a caption for a <fieldset>.

It should normally be placed as the first child of the <fieldset>.

Example:

<fieldset>
    <legend>Personal Information</legend>

    <label>First Name:</label>
    <input type="text">

    <label>Last Name:</label>
    <input type="text">
</fieldset>

Here, Personal Information acts as the title of the group.

The browser typically displays the legend along the top border of the fieldset.

3. Using <fieldset> and <legend> Together

The main purpose of these two elements is to provide both structure and meaning to groups of form controls.

Example:

<form>
    <fieldset>
        <legend>Personal Information</legend>

        <label for="fname">First Name:</label>
        <input type="text" id="fname" name="fname">

        <br><br>

        <label for="lname">Last Name:</label>
        <input type="text" id="lname" name="lname">

        <br><br>

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

In this example, all three input fields belong to the Personal Information group.

4. Grouping Different Sections of a Form

A larger form can contain multiple fieldsets.

<form>

    <fieldset>
        <legend>Personal Information</legend>

        <label for="name">Name:</label>
        <input type="text" id="name" name="name">

        <br><br>

        <label for="age">Age:</label>
        <input type="number" id="age" name="age">
    </fieldset>

    <br>

    <fieldset>
        <legend>Contact Information</legend>

        <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">
    </fieldset>

</form>

The form is now divided into two meaningful sections:

1. Personal Information

2. Contact Information

This makes a large form easier to understand and navigate.

5. <fieldset> with Radio Buttons

<fieldset> is particularly useful when several radio buttons represent a single question.

<fieldset>
    <legend>Select Your Gender</legend>

    <input type="radio" id="male" name="gender" value="male">
    <label for="male">Male</label>

    <input type="radio" id="female" name="gender" value="female">
    <label for="female">Female</label>

    <input type="radio" id="other" name="gender" value="other">
    <label for="other">Other</label>
</fieldset>

The legend tells the user what the group of radio buttons represents.

6. <fieldset> with Checkboxes

The elements can also be used to group related checkboxes.

<fieldset>
    <legend>Select Your Hobbies</legend>

    <input type="checkbox" id="reading" name="hobby" value="reading">
    <label for="reading">Reading</label>

    <input type="checkbox" id="music" name="hobby" value="music">
    <label for="music">Music</label>

    <input type="checkbox" id="sports" name="hobby" value="sports">
    <label for="sports">Sports</label>
</fieldset>

Here, the legend clearly identifies what the checkboxes are asking the user to select.

7. Importance of <fieldset> for Accessibility

One of the major benefits of <fieldset> and <legend> is improved accessibility.

Screen readers can recognize a fieldset as a logical group of controls and use the legend to describe that group.

For example:

<fieldset>
    <legend>Delivery Address</legend>

    <label for="street">Street:</label>
    <input type="text" id="street">

    <label for="city">City:</label>
    <input type="text" id="city">

    <label for="pincode">PIN Code:</label>
    <input type="text" id="pincode">
</fieldset>

The Delivery Address legend provides important context for the fields inside the group.

This is particularly helpful when a form has multiple groups containing similar controls.

8. Styling <fieldset> Using CSS

The default appearance of a fieldset can be changed using CSS.

<style>
    fieldset {
        width: 400px;
        padding: 20px;
        border: 2px solid gray;
        border-radius: 8px;
    }

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

The CSS changes the width, padding, border, and corner appearance of the fieldset.

The legend can also be styled to make the section heading more noticeable.

9. Disabling an Entire Fieldset

The <fieldset> element has a useful disabled attribute.

When disabled is applied, the form controls inside the fieldset are generally disabled as a group.

Example:

<fieldset disabled>
    <legend>Payment Information</legend>

    <label for="card">Card Number:</label>
    <input type="text" id="card">

    <label for="expiry">Expiry Date:</label>
    <input type="text" id="expiry">
</fieldset>

This can be useful when a particular section of a form should not currently be available to the user.

The <legend> itself is not disabled in the same way as the controls inside the fieldset.

10. <fieldset> and Form Organization

A well-organized form can use multiple fieldsets to create logical sections.

For example:

<form>

    <fieldset>
        <legend>Account Details</legend>

        <label for="username">Username:</label>
        <input type="text" id="username">

        <br><br>

        <label for="password">Password:</label>
        <input type="password" id="password">
    </fieldset>

    <br>

    <fieldset>
        <legend>Address Details</legend>

        <label for="address">Address:</label>
        <input type="text" id="address">

        <br><br>

        <label for="city">City:</label>
        <input type="text" id="city">
    </fieldset>

    <br>

    <button type="submit">Submit</button>

</form>

This structure makes it immediately clear which controls belong to which section.

Difference Between <fieldset> and <legend>

Important Points to Remember

The <fieldset> element is primarily used for grouping related form controls. The <legend> element provides a descriptive caption for that group.

A <legend> should generally be placed inside its corresponding <fieldset>, usually as the first child. Using meaningful legends improves the organization of forms and provides useful context for users, including people using assistive technologies.

Complete Example

<!DOCTYPE html>
<html>
<head>
    <title>Registration Form</title>

    <style>
        fieldset {
            width: 450px;
            margin-bottom: 20px;
            padding: 20px;
        }

        legend {
            font-weight: bold;
        }

        label {
            display: inline-block;
            width: 120px;
            margin-bottom: 10px;
        }
    </style>
</head>

<body>

    <h1>Registration Form</h1>

    <form>

        <fieldset>
            <legend>Personal Information</legend>

            <label for="name">Name:</label>
            <input type="text" id="name" name="name">

            <br>

            <label for="age">Age:</label>
            <input type="number" id="age" name="age">

            <br>

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

        <fieldset>
            <legend>Preferences</legend>

            <input type="checkbox" id="news" name="news">
            <label for="news">Receive News</label>

            <br>

            <input type="checkbox" id="offers" name="offers">
            <label for="offers">Receive Offers</label>
        </fieldset>

        <button type="submit">Register</button>

    </form>

</body>
</html>

In this example, the form is divided into two logical groups: Personal Information and Preferences. The <fieldset> elements create the groups, while the <legend> elements identify each group.

In summary, <fieldset> is used to group related form controls, while <legend> provides a meaningful name for that group. Together, they improve form structure, readability, usability, and accessibility.