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 Input Button form Property
The HTML DOM Input Button form property returns a reference to the form element that contains the input button. This property is read-only and provides access to the parent form of a button element, enabling you to identify which form the button belongs to and access form-level properties or methods.
Syntax
Following is the syntax for accessing the form property −
buttonElement.form
Return Value
The form property returns a reference to the <form> element that contains the button. If the button is not inside a form, it returns null.
Example − Basic Form Property Usage
Following example demonstrates how to access the form property of input buttons −
<!DOCTYPE html>
<html>
<head>
<title>HTML DOM form Property</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
padding: 20px;
}
.btn {
display: block;
margin: 1rem auto;
background-color: #db133a;
color: #fff;
border: 1px solid #db133a;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
}
.show-message {
font-weight: bold;
font-size: 1.2rem;
color: #ffc107;
margin-top: 20px;
}
fieldset {
margin: 20px;
padding: 15px;
border: 2px solid #ccc;
}
</style>
</head>
<body>
<h1>Form Property Example</h1>
<form id="form1">
<fieldset>
<legend>Form 1</legend>
<input type="button" class="btn" value="Button 1">
<input type="button" class="btn" value="Button 2">
</fieldset>
</form>
<form id="form2">
<fieldset>
<legend>Form 2</legend>
<input type="button" class="btn" value="Button 1">
<input type="button" class="btn" value="Button 2">
</fieldset>
</form>
<div class="show-message"></div>
<script>
var btnArr = document.querySelectorAll(".btn");
var showMessage = document.querySelector(".show-message");
btnArr.forEach(function(button) {
button.addEventListener("click", function(e) {
showMessage.innerHTML = "";
if (e.target.form.id === 'form1') {
showMessage.innerHTML = "I'm from form 1 (ID: " + e.target.form.id + ")";
} else {
showMessage.innerHTML = "I'm from form 2 (ID: " + e.target.form.id + ")";
}
});
});
</script>
</body>
</html>
The output shows two forms with buttons. Clicking any button displays which form it belongs to −
Form Property Example Form 1 [Button 1] [Button 2] Form 2 [Button 1] [Button 2] (Click any button to see: "I'm from form 1 (ID: form1)" or "I'm from form 2 (ID: form2)")
Example − Accessing Form Properties
Following example shows how to access various properties of the parent form through the form property −
<!DOCTYPE html>
<html>
<head>
<title>Form Property - Accessing Form Details</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px; text-align: center;">
<h2>Form Property Details</h2>
<form id="userForm" action="/submit.php" method="post">
<fieldset style="margin: 20px; padding: 15px;">
<legend>User Information</legend>
<input type="text" name="username" placeholder="Enter username"><br><br>
<input type="button" id="infoBtn" value="Show Form Info" style="padding: 10px 20px; background: #007bff; color: white; border: none; border-radius: 5px; cursor: pointer;">
</fieldset>
</form>
<div id="formInfo" style="margin-top: 20px; padding: 10px; background: #f8f9fa; border: 1px solid #ccc;"></div>
<script>
document.getElementById("infoBtn").addEventListener("click", function() {
var form = this.form;
var infoDiv = document.getElementById("formInfo");
infoDiv.innerHTML =
"<strong>Form Details:</strong><br>" +
"Form ID: " + form.id + "<br>" +
"Action: " + form.action + "<br>" +
"Method: " + form.method + "<br>" +
"Elements Count: " + form.elements.length;
});
</script>
</body>
</html>
When the button is clicked, it displays comprehensive information about its parent form −
Form Property Details User Information [Enter username ] [Show Form Info] Form Details: Form ID: userForm Action: /submit.php Method: post Elements Count: 2
Example − Button Outside Form
Following example demonstrates what happens when a button is not inside a form −
<!DOCTYPE html>
<html>
<head>
<title>Button Outside Form</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px; text-align: center;">
<h2>Button Outside Form Test</h2>
<form id="testForm">
<fieldset style="margin: 20px; padding: 15px;">
<legend>Inside Form</legend>
<input type="button" id="insideBtn" value="Button Inside Form" style="padding: 10px; margin: 10px; background: #28a745; color: white; border: none; border-radius: 5px;">
</fieldset>
</form>
<input type="button" id="outsideBtn" value="Button Outside Form" style="padding: 10px; margin: 10px; background: #dc3545; color: white; border: none; border-radius: 5px;">
<div id="result" style="margin-top: 20px; padding: 10px; background: #f8f9fa; border: 1px solid #ccc;"></div>
<script>
document.getElementById("insideBtn").addEventListener("click", function() {
var result = document.getElementById("result");
if (this.form) {
result.innerHTML = "Button is inside form with ID: " + this.form.id;
} else {
result.innerHTML = "Button has no parent form";
}
});
document.getElementById("outsideBtn").addEventListener("click", function() {
var result = document.getElementById("result");
if (this.form) {
result.innerHTML = "Button is inside form with ID: " + this.form.id;
} else {
result.innerHTML = "Button has no parent form (form property is null)";
}
});
</script>
</body>
</html>
This example shows the difference between buttons inside and outside forms −
Button Outside Form Test Inside Form [Button Inside Form] [Button Outside Form] (Click inside button: "Button is inside form with ID: testForm") (Click outside button: "Button has no parent form (form property is null)")
Key Points
-
The form property is read-only and returns the parent form element.
-
If the button is not inside a form, the property returns
null. -
Always check if the form property is not null before accessing form methods or properties.
-
The form property provides access to all form-related properties like
id,action,method, andelements.
Conclusion
The HTML DOM Input Button form property provides a convenient way to access the parent form of a button element. It returns a reference to the containing form or null if the button is not inside a form. This property is particularly useful for form validation, dynamic form handling, and accessing form-level properties and methods programmatically.
184 Views
