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:In this example, we will use the DOM Legend Object
HTML
<!DOCTYPE html>
<html>
<head>
<title>DOM Legend Object</title>
<style>
form {
width: 50%;
}
label {
display: inline-block;
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>
<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
let g = document.getElementById("GFG");
g.style.color = "coral";
g.style.fontSize = "20px";
}
</script>
</body>
</html>
|
Output:
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;
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
let g = document.createElement("LEGEND");
let f = document.createTextNode("STUDENT:");
g.appendChild(f);
document.getElementById("GFG").appendChild(g);
}
</script>
</body>
</html>
|
Output:
Supported Browsers: The browser supported by DOM Legend Object are listed below:
- Google Chrome
- Internet Explorer
- Firefox
- Opera
- Safari