HTML | DOM Fieldset Object
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
Please Login to comment...