Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
HTML DOM Legend Object
The HTML DOM Legend Object represents the <legend> element in the Document Object Model. The <legend> element provides a caption or title for its parent <fieldset> element, helping to group related form controls together with a descriptive label.
Syntax
Following is the syntax for creating a <legend> element using JavaScript −
var legendObject = document.createElement("LEGEND");
To access an existing <legend> element −
var legendObject = document.getElementById("legendId");
Properties
The Legend Object has the following property −
| Property | Description |
|---|---|
form |
Returns a reference to the enclosing <form> element that contains the legend element. This property is read-only. |
Example − Using the form Property
Following example demonstrates how to use the form property to get the parent form's information −
<!DOCTYPE html>
<html>
<head>
<title>Legend form Property</title>
<style>
form {
width: 70%;
margin: 0 auto;
text-align: center;
font-family: Arial, sans-serif;
}
fieldset {
padding: 20px;
margin: 10px;
border: 2px solid #ccc;
border-radius: 5px;
}
legend {
font-weight: bold;
color: #333;
padding: 0 10px;
}
input[type="button"] {
border-radius: 10px;
padding: 8px 15px;
background-color: #007bff;
color: white;
border: none;
cursor: pointer;
}
input[type="week"] {
padding: 5px;
margin: 10px;
}
#divDisplay {
margin-top: 15px;
padding: 10px;
background-color: #f8f9fa;
border-radius: 5px;
}
</style>
</head>
<body>
<form id="Mid-Term">
<fieldset>
<legend id="legendForm">Examination Schedule</legend>
<label for="WeekSelect">Examination Week:</label>
<input type="week" id="WeekSelect" value="2019-W36">
<br>
<input type="button" onclick="showExamination()" value="Show Form Information">
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
var divDisplay = document.getElementById("divDisplay");
var legendForm = document.getElementById("legendForm");
function showExamination() {
if (legendForm.form) {
divDisplay.innerHTML = '<strong>Form ID:</strong> ' + legendForm.form.id +
'<br><strong>Form Tag:</strong> ' + legendForm.form.tagName;
} else {
divDisplay.innerHTML = 'No parent form found.';
}
}
</script>
</body>
</html>
The output shows a form with a fieldset containing a legend. Clicking the button displays the parent form's information −
Before clicking: A form with "Examination Schedule" legend and week input field After clicking: Displays "Form ID: Mid-Term" and "Form Tag: FORM"
Example − Creating Legend Element Dynamically
Following example shows how to create and append a legend element using JavaScript −
<!DOCTYPE html>
<html>
<head>
<title>Creating Legend Dynamically</title>
<style>
fieldset {
margin: 20px;
padding: 15px;
border: 2px solid #4CAF50;
border-radius: 8px;
font-family: Arial, sans-serif;
}
legend {
font-weight: bold;
color: #4CAF50;
padding: 0 10px;
}
button {
padding: 10px 20px;
margin: 10px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
</style>
</head>
<body>
<button onclick="createLegend()">Create Legend</button>
<form id="dynamicForm">
<fieldset id="myFieldset">
<p>This fieldset initially has no legend.</p>
<input type="text" placeholder="Sample input">
</fieldset>
</form>
<script>
function createLegend() {
var fieldset = document.getElementById("myFieldset");
// Check if legend already exists
if (fieldset.querySelector("legend")) {
alert("Legend already exists!");
return;
}
// Create new legend element
var newLegend = document.createElement("LEGEND");
newLegend.textContent = "Dynamically Created Legend";
newLegend.id = "dynamicLegend";
// Insert legend as first child of fieldset
fieldset.insertBefore(newLegend, fieldset.firstChild);
// Display form information
alert("Legend created! Parent form ID: " + newLegend.form.id);
}
</script>
</body>
</html>
Clicking the button creates a new legend element and inserts it into the fieldset. The legend's form property correctly references the parent form −
Before: Fieldset without legend containing sample input After: Fieldset with "Dynamically Created Legend" at the top
Example − Multiple Fieldsets with Legends
Following example demonstrates multiple fieldsets, each with their own legend, all within the same form −
<!DOCTYPE html>
<html>
<head>
<title>Multiple Legends in Form</title>
<style>
body { font-family: Arial, sans-serif; padding: 20px; }
form { max-width: 600px; margin: 0 auto; }
fieldset { margin: 15px 0; padding: 15px; border: 1px solid #ddd; border-radius: 5px; }
legend { font-weight: bold; color: #555; padding: 0 8px; }
button { padding: 8px 16px; background-color: #007bff; color: white; border: none; border-radius: 4px; cursor: pointer; }
#result { margin-top: 20px; padding: 15px; background-color: #f8f9fa; border-radius: 5px; }
</style>
</head>
<body>
<form id="surveyForm">
<fieldset>
<legend id="legend1">Personal Information</legend>
<label>Name: <input type="text" name="name"></label><br><br>
<label>Age: <input type="number" name="age"></label>
</fieldset>
<fieldset>
<legend id="legend2">Contact Details</legend>
<label>Email: <input type="email" name="email"></label><br><br>
<label>Phone: <input type="tel" name="phone"></label>
</fieldset>
<button type="button" onclick="showFormInfo()">Check Legend Form References</button>
</form>
<div id="result"></div>
<script>
function showFormInfo() {
var legend1 = document.getElementById("legend1");
var legend2 = document.getElementById("legend2");
var result = document.getElementById("result");
var info = "<h3>Form Reference Information:</h3>";
info += "<p><strong>Legend 1:</strong> '" + legend1.textContent + "' belongs to form: " + legend1.form.id + "</p>";
info += "<p><strong>Legend 2:</strong> '" + legend2.textContent + "' belongs to form: " + legend2.form.id + "</p>";
info += "<p><strong>Both legends reference the same form:</strong> " + (legend1.form === legend2.form) + "</p>";
result.innerHTML = info;
}
</script>
</body>
</html>
This example shows how multiple legend elements within the same form all reference the same parent form through their form property −
Two fieldsets with legends "Personal Information" and "Contact Details" Button click shows both legends belong to "surveyForm" and reference the same form object
Browser Compatibility
The Legend Object and its form property are supported in all modern browsers including Chrome, Firefox, Safari, Edge, and Internet Explorer. The form property provides a reliable way to access the parent form from any legend element within nested fieldsets.
Conclusion
The HTML DOM Legend Object provides access to <legend> elements through JavaScript. Its primary property, form, returns a reference to the containing form element, making it useful for form validation and dynamic form manipulation. Legend elements help organize form content by providing descriptive captions for fieldset groups.
182 Views
