Open In App

How to define a caption for a fieldset element in HTML?

Last Updated : 12 Jul, 2025
Comments
Improve
Suggest changes
Like Article
Like
Report

The legend element defines a caption for the fieldset element in HTML. It specifies the title or description for the grouped contents within the fieldset. The fieldset element contains child elements, including the legend element, which serves as its title.

Syntax:

<legend> Content... </legend>

Approach

  • The HTML document defines a form with fields for Name, Email, Date of Birth, Address, and Enrollment Number.
  • CSS to style the form: sets width to 50%, labels as inline-block with left float, and input fields with specific dimensions and margins.
  • The <fieldset> to group form elements and <legend> to caption the group as "STUDENT::".
  • Employs semantic HTML elements <fieldset>, <legend>, <label>, and <input> for clarity and accessibility.
  • Focuses on clear structure, consistent styling, and semantic HTML to enhance usability and maintainability.

Example: The example below shows the above-explained approach.

html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0">
    <title>Legend Tag</title>
    <style>
        form {
            width: 50%;
        }

        label {
            display: inline-block;
            float: left;
            clear: left;
            width: 90px;
            margin: 5px;
            text-align: left;
        }

        input[type="text"] {
            width: 250px;
            margin: 5px 0px;
        }
    </style>
</head>

<body>

    <h2>A caption for a fieldset element using Legend Tag</h2>

    <form>
        <fieldset>
            <legend>STUDENT::</legend>
            <label>Name:</label>
            <input type="text">
            <br>

            <label>Email:</label>
            <input type="text">
            <br>

            <label>Date of birth:</label>
            <input type="text">
            <br>

            <label>Address:</label>
            <input type="text">
            <br>

            <label>Enroll No:</label>
            <input type="text">
        </fieldset>
    </form>
</body>

</html>

Output:

legendi
Output

Similar Reads