Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

HTML5 fieldset Tag

  • Difficulty Level : Basic
  • Last Updated : 21 Sep, 2021

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

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

HTML




<!DOCTYPE html>
<html>
<body>
    <h1>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:



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. The <legend> tag is used to define the title for the child’s contents. The legend elements are the parent element. This tag is used to define the caption for the <fieldset> element.

Syntax:

<fieldset> Contents... </fieldset>

Attribute:

  • disabled: It is used to specify that the group of related form elements is disabled. A disabled fieldset is un-clickable and unusable.
  • 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 fieldset has autocompleted on or off value.

Example: 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:

Supported Browsers: 

  • Google Chrome 93.0 & above
  • Internet Explorer 11.0
  • Microsoft Edge 93.0
  • Firefox 92.0 & above
  • Safari 14.1
  • Opera 78.0



My Personal Notes arrow_drop_up
Recommended Articles
Page :