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 Submit form property
The HTML DOM Input Submit form property returns a reference to the form element that contains the submit button. If the submit button is not inside a form element, it returns null. This property is read-only and provides a way to access the parent form from a submit button element.
Syntax
Following is the syntax for the Input Submit form property −
submitObject.form
Return Value
The property returns −
A form object reference if the submit button is inside a form element
null if the submit button is not contained within any form
Example − Getting Form Reference
Following example demonstrates how to get the form reference from a submit button −
<!DOCTYPE html>
<html>
<head>
<title>Input Submit form Property</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h2>Input Submit form Property</h2>
<form action="Sample_page.php" id="userForm" style="border: 2px solid green; padding: 15px; margin: 10px 0;">
<label>UserName: <input type="text" id="username"></label><br><br>
<label>Location: <input type="text" id="location"></label><br><br>
<input type="submit" id="submitBtn" value="Submit">
</form>
<p>Click the button below to get the form ID:</p>
<button type="button" onclick="getFormId()">GET FORM ID</button>
<p id="result"></p>
<script>
function getFormId() {
var submitButton = document.getElementById("submitBtn");
var formRef = submitButton.form;
if (formRef) {
document.getElementById("result").innerHTML =
"The form ID is: <b>" + formRef.id + "</b>";
} else {
document.getElementById("result").innerHTML =
"No form found (returned null)";
}
}
</script>
</body>
</html>
The output shows the form with input fields and displays the form ID when the button is clicked −
Input Submit form Property [Form with green border containing:] UserName: [text input] Location: [text input] [Submit button] Click the button below to get the form ID: [GET FORM ID button] After clicking: The form ID is: userForm
Example − Accessing Form Properties
Following example shows how to access various properties of the form through the submit button −
<!DOCTYPE html>
<html>
<head>
<title>Form Properties via Submit Button</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h2>Accessing Form Properties</h2>
<form action="/process" method="post" id="contactForm" name="contact" style="border: 1px solid #ccc; padding: 15px;">
<label>Name: <input type="text" name="fullname"></label><br><br>
<label>Email: <input type="email" name="email"></label><br><br>
<input type="submit" id="contactSubmit" value="Send Message">
</form>
<button type="button" onclick="showFormInfo()">Show Form Details</button>
<div id="formInfo" style="margin-top: 15px; padding: 10px; background: #f8f9fa;"></div>
<script>
function showFormInfo() {
var submitBtn = document.getElementById("contactSubmit");
var form = submitBtn.form;
var info = "<h3>Form Properties:</h3>";
info += "<p><b>Form ID:</b> " + form.id + "</p>";
info += "<p><b>Form Name:</b> " + form.name + "</p>";
info += "<p><b>Action:</b> " + form.action + "</p>";
info += "<p><b>Method:</b> " + form.method + "</p>";
info += "<p><b>Number of Elements:</b> " + form.elements.length + "</p>";
document.getElementById("formInfo").innerHTML = info;
}
</script>
</body>
</html>
This example demonstrates accessing multiple form properties through the submit button's form reference −
Accessing Form Properties [Form with border containing:] Name: [text input] Email: [email input] [Send Message button] [Show Form Details button] After clicking Show Form Details: Form Properties: Form ID: contactForm Form Name: contact Action: /process Method: post Number of Elements: 3
Example − Submit Button Outside Form
Following example shows what happens when a submit button is not inside a form −
<!DOCTYPE html>
<html>
<head>
<title>Submit Button Outside Form</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h2>Submit Button Outside Form</h2>
<form id="myForm" style="border: 1px solid blue; padding: 10px; margin: 10px 0;">
<input type="text" placeholder="Inside form">
</form>
<input type="submit" id="outsideSubmit" value="Submit (Outside Form)" style="margin: 10px 0;">
<button type="button" onclick="checkFormReference()">Check Form Reference</button>
<p id="checkResult"></p>
<script>
function checkFormReference() {
var outsideBtn = document.getElementById("outsideSubmit");
var formRef = outsideBtn.form;
if (formRef === null) {
document.getElementById("checkResult").innerHTML =
"<span style='color: red;'>Submit button is outside form - returned <b>null</b></span>";
} else {
document.getElementById("checkResult").innerHTML =
"Form reference found: " + formRef.id;
}
}
</script>
</body>
</html>
When the submit button is outside any form element, the form property returns null −
Submit Button Outside Form [Blue bordered form with text input] [Submit (Outside Form) button] [Check Form Reference button] After clicking: Submit button is outside form - returned null
Browser Compatibility
The Input Submit form property is supported across all modern browsers −
| Browser | Support |
|---|---|
| Chrome | Yes |
| Firefox | Yes |
| Safari | Yes |
| Edge | Yes |
| Internet Explorer | Yes (IE 5.5+) |
Key Points
The form property provides access to the parent form element from a submit button
It returns
nullif the submit button is not inside any formThis property is read-only and cannot be modified
Useful for form validation and accessing other form properties programmatically
Works with both
<input type="submit">and<button type="submit">elements
Conclusion
The HTML DOM Input Submit form property is a convenient way to access the parent form from a submit button element. It returns the form object reference when the button is inside a form, or null when outside. This read-only property is essential for form manipulation and validation scripts.
332 Views
