Open In App
Related Articles

HTML5 fieldset Tag

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Report issue
Report

The <fieldset> tag in HTML5 is used to make a group of related elements in the form. This tag is a new addition in HTML5, serving as a container for grouping form elements. The <legend> tag is used to define the title for the child’s contents. The legend elements are the parent element.

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

Syntax:

<fieldset>Contents</fieldset>

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.

Example 1: This simple example illustrates the use of the <fieldset> tag in order to make a group of related elements in the HTML Form.

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            text-align: center;
        }
 
        input {
            margin: 10px;
        }
 
        fieldset {
            margin-top: 5px;
        }
    </style>
</head>
 
<body>
    <h1 style="color: green;">
      GeeksforGeeks
      </h1>
    <h2>HTML <fieldset> Tag</h2>
    <form>
        <div class="title">
            Employee Personal Details:
        </div>
 
        <!--HTML fieldset tag starts here-->
 
        <fieldset>
            <legend>Details:</legend>
            Name:<input type="text">
            Emp_Id:<input type="text">
            Designation:<input type="text">
        </fieldset>
 
        <!--HTML fieldset tag ends here-->
    </form>
</body>
 
</html>

                    

Output:

Screenshot-2023-12-22-103200

Example 2: In this example, we will know the use of <fieldset> tag to make the group of related elements.

HTML

<!DOCTYPE html>
<html>
 
<body>
    <h1>GeeksforGeeks</h1>
    <h2>HTML <fieldset> Tag</h2>
    <form>
        <div class="title">
            Suggest article for video:
        </div>
        <!--HTML fieldset tag starts here-->
        <fieldset>
            <legend>JAVA:</legend>
            Title:<input type="text"><br>
            Link:<input type="text"><br>
            User ID:<input type="text">
        </fieldset>
        <!--HTML fieldset tag ends here-->
        <br>
        <!--HTML fieldset tag starts here-->
        <fieldset>
            <legend>PHP:</legend>
            Title:<input type="text"><br>
            Link:<input type="text"><br>
            User ID:<input type="text">
        </fieldset>
        <!--HTML fieldset tag ends here-->
    </form>
</body>
 
</html>

                    

 Output:

<fieldset> tag to group the related element 

Supported Browsers:

  • Google Chrome 1
  • Edge 12
  • Firefox 1
  • Opera 15
  • Safari 4


Last Updated : 26 Dec, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads