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 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 >w3wiki</ 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 = "Beginner()" >Submit</ button > < script > function Beginner() { 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 >w3wiki</ h1 > < h2 >DOM Fieldset Object</ h2 > < button onclick = "myBeginner()" >Submit</ button > < script > function myBeginner() { 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 > |
Output:
Supported Browsers: The browser supported by DOM fieldset Object are listed below:
- Google Chrome
- Internet Explorer
- Firefox
- Opera
- Safari