Skip to content
Related Articles

Related Articles

HTML | DOM Fieldset Object

Improve Article
Save Article
  • Last Updated : 26 May, 2022
Improve Article
Save Article

The DOM Fieldset Object is used to represent the HTML <fieldset> element. The fieldset element is accessed by getElementById().
Properties: 
 

  • disabled: disabled property use to set or return whether a fieldset is disabled, or not.
  • form: use to return a reference to form that contains the fieldset.
  • name: Value of name attribute of field is set or return by name.
  • type: return the type of form.

Syntax: 
 

document.getElementById("ID");

Where “id” is the ID assigned to the “fieldset” tag.
Example 1: 
 

HTML




<!DOCTYPE html>
<html>
 
<head>
    <title>HTML DOM Fieldset Object</title>
    <style>
        h1,
        h2,
        .title {
            text-align: center;
        }
         
        fieldset {
            width: 50%;
            margin-left: 22%;
        }
         
        h1 {
            color: green;
        }
         
        button {
            margin-left: 35%;
        }
    </style>
</head>
 
<body>
    <h1>GeeksforGeeks</h1>
    <h2>DOM fieldset Object</h2>
   
    <form>
        <div class="title">
          Suggest article for video:</div>
       
        <fieldset id="GFG">
            <legend>JAVA:</legend>
            Title:
            <input type="text">
            <br> Link:
            <input type="text">
            <br> User ID:
            <input type="text">
        </fieldset>
       
    </form>
    <br>
   
    <button onclick="Geeks()">Submit</button>
    <script>
        function Geeks() {
            var g = document.getElementById("GFG");
           
            <!-- check the fieldset is disable or not -->
            g.disabled = true;
           
            <!-- name property of fieldset -->
            g.name;
        }
    </script>
</body>
 
</html>


Output:
Before Clicking On Button: 
 

After Clicking ON Button
 

Example 2: Fieldset Object can be created by using the document.createElement Method. 
 

HTML




<!DOCTYPE html>
<html>
 
<head>
    <title>DOM Fieldset Object</title>
    <style>
        h1,
        h2 {
            text-align: center;
        }
         
        h1 {
            color: green;
        }
         
        button {
            margin-left: 40%;
        }
         
        details {
            font-size: 30px;
            color: green;
            text-align: center;
            margin-top: 30px;
        }
    </style>
</head>
 
<body>
    <h1>GeeksforGeeks</h1>
    <h2>DOM Fieldset Object</h2>
    <button onclick="myGeeks()">Submit</button>
 
    <script>
        function myGeeks() {
            var g = document.createElement("FIELDSET");
            g.setAttribute("id", "GFG");
            document.body.appendChild(g);
 
            var f = document.createElement("LEGEND");
            var text = document.createTextNode("JAVA");
            f.appendChild(text);
 
            document.getElementById("GFG").appendChild(f);
 
        }
    </script>
</body>
 
</html>


Before Clicking on Button: 
 

After Clicking On Button: 
 

Supported Browsers: The browser supported by DOM fieldset Object are listed below: 
 

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

 


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!