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 form Property
The HTML DOM Legend form property returns a reference to the form element that contains the <legend> element. This property is read-only and provides access to the parent form for DOM manipulation and validation purposes.
Syntax
Following is the syntax for accessing the form property −
legendObject.form
Return Value
The form property returns a reference to the HTMLFormElement object that contains the legend, or null if the legend is not inside a form.
Example
Let us see an example demonstrating the Legend form property −
<!DOCTYPE html>
<html>
<head>
<title>Legend form Property</title>
<style>
form {
width: 70%;
margin: 0 auto;
text-align: center;
}
* {
padding: 2px;
margin: 5px;
}
input[type="button"] {
border-radius: 10px;
background-color: #4CAF50;
color: white;
border: none;
padding: 8px 16px;
cursor: pointer;
}
fieldset {
border: 2px solid #ccc;
border-radius: 5px;
padding: 15px;
}
legend {
font-weight: bold;
color: #333;
}
</style>
</head>
<body style="font-family: Arial, sans-serif;">
<form id="Mid-Term">
<fieldset>
<legend id="legendForm">Examination Form</legend>
<label for="WeekSelect">Examination Week:
<input type="week" value="2019-W36">
</label>
<br>
<input type="button" onclick="showFormInfo()" value="Show Form Information">
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
var divDisplay = document.getElementById("divDisplay");
var legendForm = document.getElementById("legendForm");
function showFormInfo() {
if (legendForm.form) {
divDisplay.innerHTML = "<p><strong>Form ID:</strong> " + legendForm.form.id + "</p>" +
"<p><strong>Form Tag:</strong> " + legendForm.form.tagName + "</p>" +
"<p><strong>Legend is inside a form:</strong> Yes</p>";
} else {
divDisplay.innerHTML = "<p>Legend is not inside a form.</p>";
}
}
</script>
</body>
</html>
The output shows the form information when the button is clicked −
Examination Form Examination Week: [2019-W36] [Show Form Information] After clicking button: Form ID: Mid-Term Form Tag: FORM Legend is inside a form: Yes
Practical Usage
The Legend form property is commonly used for form validation, accessing other form elements, and implementing dynamic form behavior. Here's a practical example −
Example − Form Validation with Legend
<!DOCTYPE html>
<html>
<head>
<title>Legend Form Validation</title>
<style>
form {
max-width: 400px;
margin: 20px auto;
padding: 20px;
}
fieldset {
border: 2px solid #007bff;
border-radius: 8px;
padding: 15px;
}
legend {
color: #007bff;
font-weight: bold;
padding: 0 10px;
}
input[type="text"], input[type="email"] {
width: 100%;
padding: 8px;
margin: 5px 0;
box-sizing: border-box;
}
button {
background-color: #007bff;
color: white;
padding: 10px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
}
.error { color: red; font-size: 14px; }
</style>
</head>
<body style="font-family: Arial, sans-serif;">
<form id="userForm">
<fieldset>
<legend id="formLegend">User Registration</legend>
<input type="text" name="username" placeholder="Username" required>
<input type="email" name="email" placeholder="Email" required>
<button type="button" onclick="validateForm()">Validate Form</button>
<div id="result"></div>
</fieldset>
</form>
<script>
function validateForm() {
var legend = document.getElementById("formLegend");
var form = legend.form;
var result = document.getElementById("result");
var inputs = form.querySelectorAll('input[required]');
var isValid = true;
inputs.forEach(function(input) {
if (!input.value.trim()) {
isValid = false;
}
});
if (isValid) {
result.innerHTML = "<p style='color: green;'>Form '" + form.id + "' is valid!</p>";
} else {
result.innerHTML = "<p class='error'>Please fill all required fields.</p>";
}
}
</script>
</body>
</html>
This example shows how the Legend's form property can be used to access and validate the parent form. When validation is performed, it checks all required fields in the form referenced by the legend.
Browser Compatibility
The Legend form property is supported in all modern browsers including Chrome, Firefox, Safari, Edge, and Internet Explorer. It follows the HTML DOM standard and provides consistent behavior across different platforms.
Key Points
-
The
formproperty is read-only and returns a reference to the containing form element. -
It returns
nullif the legend is not inside a form element. -
The property provides access to all form properties and methods through the returned form object.
-
Commonly used for form validation, data collection, and dynamic form manipulation.
Conclusion
The HTML DOM Legend form property provides a convenient way to access the parent form element from a legend. This property is essential for form validation scripts and dynamic form manipulation, allowing developers to easily reference and control the containing form through the legend element.
172 Views
