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 Date form Property
The Input Date form property returns a reference to the form element that contains the input date field. This property is read-only and provides access to the enclosing form object, allowing you to retrieve form attributes like ID, action, or method through JavaScript.
Syntax
Following is the syntax for accessing the form property −
inputDateObject.form
Return Value
The form property returns a reference to the form element that contains the input date field. If the input date is not inside a form, it returns null.
Example − Getting Form Reference
Following example demonstrates how to get the form reference using the form property −
<!DOCTYPE html>
<html>
<head>
<title>Input Date Form Property</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<form id="dateForm" method="post" action="/submit">
<label for="birthDate">Select Date: </label>
<input type="date" id="birthDate" name="birth_date">
</form>
<button onclick="getFormInfo()">Get Form Information</button>
<div id="output" style="margin-top: 10px; padding: 10px; background-color: #f0f0f0;"></div>
<script>
function getFormInfo() {
var dateInput = document.getElementById("birthDate");
var outputDiv = document.getElementById("output");
if (dateInput.form) {
outputDiv.innerHTML =
"Form ID: " + dateInput.form.id + "<br>" +
"Form Method: " + dateInput.form.method + "<br>" +
"Form Action: " + dateInput.form.action;
} else {
outputDiv.innerHTML = "Input is not inside a form.";
}
}
</script>
</body>
</html>
The output shows the form information when the button is clicked −
Before clicking: [Select Date input field] [Get Form Information button]
After clicking: Form ID: dateForm
Form Method: post
Form Action: file:///submit
Example − Input Outside Form
Following example shows what happens when an input date is not inside a form element −
<!DOCTYPE html>
<html>
<head>
<title>Input Date Without Form</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h3>Date Input Outside Form</h3>
<label for="standaloneDate">Standalone Date: </label>
<input type="date" id="standaloneDate">
<button onclick="checkForm()">Check Form Property</button>
<p id="result"></p>
<script>
function checkForm() {
var dateInput = document.getElementById("standaloneDate");
var resultPara = document.getElementById("result");
if (dateInput.form === null) {
resultPara.textContent = "The form property returns null - input is not inside a form.";
resultPara.style.color = "red";
} else {
resultPara.textContent = "Form found: " + dateInput.form.id;
resultPara.style.color = "green";
}
}
</script>
</body>
</html>
Since the input date is not inside a form, the form property returns null −
The form property returns null - input is not inside a form. (displayed in red text)
Example − Multiple Forms
Following example demonstrates using the form property with multiple forms on the same page −
<!DOCTYPE html>
<html>
<head>
<title>Multiple Forms Example</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<form id="registrationForm">
<h3>Registration Form</h3>
<input type="date" id="regDate" name="registration_date">
</form>
<form id="eventForm">
<h3>Event Form</h3>
<input type="date" id="eventDate" name="event_date">
</form>
<button onclick="showFormIds()">Show Form IDs</button>
<div id="display"></div>
<script>
function showFormIds() {
var regDate = document.getElementById("regDate");
var evtDate = document.getElementById("eventDate");
var display = document.getElementById("display");
display.innerHTML =
"Registration Date Form ID: " + regDate.form.id + "<br>" +
"Event Date Form ID: " + evtDate.form.id;
}
</script>
</body>
</html>
Each input date correctly identifies its parent form −
Registration Date Form ID: registrationForm Event Date Form ID: eventForm
Common Use Cases
The form property is commonly used in the following scenarios −
Form Validation − Access form attributes to determine validation rules or submission methods.
Dynamic Form Handling − Identify which form contains a specific input for dynamic processing.
Form Serialization − Collect all inputs from the same form for AJAX submissions.
Event Delegation − Apply event handlers based on the parent form properties.
Browser Compatibility
The form property for input elements is supported by all modern browsers including Chrome, Firefox, Safari, Edge, and Internet Explorer 9+. The input date type itself requires HTML5 support.
Conclusion
The Input Date form property provides a convenient way to access the parent form element containing the date input. It returns the form reference for inputs inside a form, or null for standalone inputs. This property is particularly useful for form validation, dynamic processing, and accessing form attributes programmatically.
165 Views
