Skip to content
Related Articles

Related Articles

Improve Article

How to groups related elements in a form using HTML ?

  • Last Updated : 23 Dec, 2020

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,
        .titl {
            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="titl">
            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

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.




My Personal Notes arrow_drop_up
Recommended Articles
Page :