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 Datetime form Property
The HTML DOM Input Datetime form property returns a reference to the form element that contains the input datetime field. This property is read-only and provides access to the parent form object, allowing you to interact with form properties and methods programmatically.
Syntax
Following is the syntax for accessing the form property −
inputDatetimeObject.form
Return Value
The property returns a reference to the HTMLFormElement that contains the input datetime element. If the input 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 Datetime form Property</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<form id="dateTimeForm">
<label for="Datetime">Date & Time: </label>
<input type="datetime" id="Datetime" value="2009-12-19T12:48Z">
</form>
<button onclick="getFormID()">Get Form ID</button>
<div id="divDisplay" style="margin-top: 10px; padding: 10px; background-color: #f0f0f0;"></div>
<script>
function getFormID() {
var inputDatetime = document.getElementById("Datetime");
var divDisplay = document.getElementById("divDisplay");
if (inputDatetime.form) {
divDisplay.textContent = 'Form ID for datetime input: ' + inputDatetime.form.id;
} else {
divDisplay.textContent = 'No form found for this input';
}
}
</script>
</body>
</html>
The output shows the form ID when the button is clicked −
Before clicking: [Date & Time input field] [Get Form ID] After clicking: Form ID for datetime input: dateTimeForm
Example − Accessing Form Properties
Following example shows how to access various form properties through the datetime input's form reference −
<!DOCTYPE html>
<html>
<head>
<title>Form Properties via Datetime Input</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<form id="userForm" method="post" action="/submit">
<label for="username">Name: </label>
<input type="text" id="username" name="user_name" value="John Doe"><br><br>
<label for="datetime1">Event Date: </label>
<input type="datetime" id="datetime1" name="event_date" value="2024-06-15T14:30Z"><br><br>
</form>
<button onclick="showFormDetails()">Show Form Details</button>
<div id="output" style="margin-top: 15px; padding: 10px; background-color: #e8f4fd; border-left: 4px solid #007bff;"></div>
<script>
function showFormDetails() {
var datetimeInput = document.getElementById("datetime1");
var output = document.getElementById("output");
var form = datetimeInput.form;
if (form) {
output.innerHTML =
'<strong>Form Details:</strong><br>' +
'Form ID: ' + form.id + '<br>' +
'Method: ' + form.method + '<br>' +
'Action: ' + form.action + '<br>' +
'Number of elements: ' + form.elements.length;
}
}
</script>
</body>
</html>
This example shows comprehensive form information accessed through the datetime input −
Form Details: Form ID: userForm Method: post Action: http://example.com/submit Number of elements: 2
Example − Input Outside Form
Following example demonstrates what happens when the datetime input is not inside a form −
<!DOCTYPE html>
<html>
<head>
<title>Datetime Input Without Form</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h3>Datetime input outside of form:</h3>
<label for="standaloneDateTime">Standalone Date: </label>
<input type="datetime" id="standaloneDateTime" value="2024-01-01T00:00Z">
<button onclick="checkForm()">Check Form Reference</button>
<div id="result" style="margin-top: 10px; padding: 10px; background-color: #fff3cd; border: 1px solid #ffeaa7;"></div>
<script>
function checkForm() {
var input = document.getElementById("standaloneDateTime");
var result = document.getElementById("result");
if (input.form === null) {
result.textContent = "The datetime input has no form reference (returns null)";
} else {
result.textContent = "Form found: " + input.form.id;
}
}
</script>
</body>
</html>
When the datetime input is not inside a form, the form property returns null −
The datetime input has no form reference (returns null)
Browser Compatibility
Note: The datetime input type has been deprecated in favor of datetime-local. Modern browsers may not support type="datetime". For current applications, use type="datetime-local" instead, which works with the same form property.
Conclusion
The HTML DOM Input Datetime form property provides a convenient way to access the parent form of a datetime input element. It returns a reference to the HTMLFormElement or null if the input is not contained within a form. This property is useful for form validation, manipulation, and accessing other form elements programmatically.
176 Views
