Skip to content
Related Articles

Related Articles

HTML | DOM Fieldset Object
  • Last Updated : 22 Jan, 2019

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:






<!DOCTYPE html>
<html>
  
<head>
    <title>fieldset tag</title>
    <style>
        h1,
        h2,
        .titl {
            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="titl">
          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.




<!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

full-stack-img

My Personal Notes arrow_drop_up
Recommended Articles
Page :