HTML | DOM Legend Object
The DOM Legend Object is used to represent the HTML <legend> element. The legend element is accessed by getElementById().
Properties:
- Form: it is used to return the reference of the form that contains the legend element.
Syntax:
document.getElementById("ID">);
Where “id” is the ID assigned to the “legend” tag.
Example-1:
HTML
<!DOCTYPE html><html><head> <title>DOM Legend Object</title> <style> form { width: 50%; } label { display: inline-block; float: left; clear: left; width: 90px; margin: 5px; text-align: left; } input[type="text"] { width: 250px; margin: 5px 0px; } .gfg { font-size: 40px; color: green; font-weight: bold; } </style></head><body> <div class="gfg">GeeksforGeeks</div> <h2>DOM Legend object</h2> <form> <fieldset> <!-- Assigning legend id --> <legend id="GFG">STUDENT::</legend> <label>Name:</label> <input type="text"> <br> <label>Email:</label> <input type="text"> <br> <label>Date of birth:</label> <input type="text"> <br> <label>Address:</label> <input type="text"> <br> <label>Enroll No:</label> <input type="text"> </fieldset> </form> <br> <button onclick="myGeeks()">Submit</button> <script> function myGeeks() { // change the color and font-size of legend tag var g = document.getElementById("GFG"); g.style.color = "coral"; g.style.fontSize = "20px"; } </script></body></html> |
Output:
Before Clicking On Button :
After Clicking On Button:
Example-2: Legend Object can be created by using the document.createElement method.
HTML
<!DOCTYPE html><html><head> <title>DOM Legend Object</title> <style> form { width: 50%; } label { display: inline-block; float: left; clear: left; width: 90px; margin: 5px; text-align: left; } input[type="text"] { width: 250px; margin: 5px 0px; } .gfg { font-size: 40px; color: green; font-weight: bold; } </style></head><body> <div class="gfg">GeeksforGeeks</div> <h2>DOM Legend object</h2> <form> <fieldset id="GFG"> <label>Name:</label> <input type="text"> <br> <label>Email:</label> <input type="text"> <br> <label>Date of birth:</label> <input type="text"> <br> <label>Address:</label> <input type="text"> <br> <label>Enroll No:</label> <input type="text"> </fieldset> </form> <br> <button onclick="myGeeks()">Submit</button> <script> function myGeeks() { // Legend object created var g = document.createElement("LEGEND"); var f = document.createTextNode("STUDENT:"); g.appendChild(f); document.getElementById("GFG").appendChild(g); } </script></body></html> |
Output:
Before Clicking On Button:
After Clicking on Button:
Supported Browsers: The browser supported by DOM Legend Object are listed below:
- Google Chrome
- Internet Explorer
- Firefox
- Opera
- Safari
Please Login to comment...