Open In App

How to groups related elements in a form using HTML ?

Last Updated : 13 Feb, 2023
Improve
Improve
Like Article
Like
Save
Share
Report

The <fieldset> tag in HTML5 is used to make a group of related elements in the form and it creates the box over the elements. The <fieldset> tag is new in HTML5.

Syntax:

<fieldset> Contents... </fieldset>

Attribute:

  • disabled: It specify that the group of related form elements should be disabled.
  • form: It specifies that one or more forms the fieldset belongs to.
  • name: It specify the name for the fieldset.

Example:

HTML




<!DOCTYPE html>
<html>
 
<head>
    <title>
        How to groups related elements
        in a form using HTML?
    </title>
 
    <style>
        h1,
        h2,
        .title {
            text-align: center;
        }
 
        fieldset {
            width: 50%;
            margin-left: 22%;
        }
 
        h1 {
            color: green;
        }
    </style>
</head>
 
<body>
    <h1>GeeksforGeeks</h1>
 
    <h2>
        How to groups related elements
        in a form using HTML?
    </h2>
 
    <form>
        <div class="title">
            Suggest article for video:
        </div>
 
        <fieldset>
            <legend>JAVA:</legend>
            Title: <input type="text"><br>
            Link: <input type="text"><br>
            User ID: <input type="text">
        </fieldset>
        <br>
        <fieldset>
            <legend>PHP:</legend>
            Title: <input type="text"><br>
            Link: <input type="text"><br>
            User ID: <input type="text">
        </fieldset>
    </form>
</body>
 
</html>


Output:

Supported Browsers: 

  • Google Chrome
  • Internet Explorer
  • Firefox
  • Safari
  • Opera


Like Article
Suggest improvement
Share your thoughts in the comments

Similar Reads