HTML | DOM Fieldset Object

Last Updated : 15 Jun, 2023

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

Properties:

disabled: disabled property used to set or return whether a fieldset is disabled, or not.
form: use to return a reference to the form that contains the fieldset.
name: Value of name attribute of field is set or returned 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() {
            let g = document.getElementById("GFG");
            // <!-- check the fieldset is disable or not -->
            g.disabled = true;
            // < !--name property of fieldset-- >
                g.name;
        }
    </script>
</body>
  
</html>

Output:

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() {
            let g = document.createElement("FIELDSET");
            g.setAttribute("id", "GFG");
            document.body.appendChild(g);

            let f = document.createElement("LEGEND");
            let text = document.createTextNode("JAVA");
            f.appendChild(text);
            document.getElementById("GFG").appendChild(f);
        }
    </script>
</body>
  
</html>