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 DatetimeLocal form Property
The HTML DOM Input DatetimeLocal form property returns a reference to the <form> element that contains the input DatetimeLocal element. This property is read-only and provides access to the parent form object for further manipulation or validation.
Syntax
Following is the syntax to access the form property −
inputDatetimeLocalObject.form
Return Value
The property returns a reference to the HTMLFormElement object that contains the datetime-local input. If the input is not within a form element, it returns null.
Example
Let us see an example of Input DatetimeLocal form property −
<!DOCTYPE html>
<html>
<head>
<title>Input DatetimeLocal form</title>
<style>
form {
width: 70%;
margin: 0 auto;
text-align: center;
}
* {
padding: 2px;
margin: 5px;
}
input[type="button"] {
border-radius: 10px;
}
</style>
</head>
<body>
<form id="Mathematics">
<fieldset>
<legend>Datetime-Local-form</legend>
<label for="datetimeLocalSelect">Examination Time:
<input type="datetime-local" id="datetimeLocalSelect" value="2019-09-01T09:00">
</label>
<input type="button" onclick="showExamination()" value="Which exam is on this date?">
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
var divDisplay = document.getElementById("divDisplay");
var inputDatetimeLocal = document.getElementById("datetimeLocalSelect");
function showExamination() {
divDisplay.textContent = 'Exam: ' + inputDatetimeLocal.form.id;
}
</script>
</body>
</html>
The output displays a form with a datetime-local input and a button. Clicking the button shows the form ID −
Before clicking: [Datetime input field] [Which exam is on this date?]
After clicking: [Datetime input field] [Which exam is on this date?]
Exam: Mathematics
Accessing Form Properties
Once you have the form reference through the form property, you can access various form properties and methods such as action, method, elements, submit(), and reset().
Example
Following example demonstrates accessing different form properties using the form reference −
<!DOCTYPE html>
<html>
<head>
<title>Form Properties Access</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<form id="examForm" action="/submit" method="post">
<h3>Exam Registration</h3>
<label>Exam Date & Time:
<input type="datetime-local" id="examTime" value="2024-06-15T14:00">
</label><br><br>
<button type="button" onclick="showFormInfo()">Show Form Info</button>
<div id="info"></div>
</form>
<script>
function showFormInfo() {
var input = document.getElementById("examTime");
var form = input.form;
var info = document.getElementById("info");
info.innerHTML = "<h4>Form Information:</h4>" +
"<p>Form ID: " + form.id + "</p>" +
"<p>Form Action: " + form.action + "</p>" +
"<p>Form Method: " + form.method + "</p>" +
"<p>Total Elements: " + form.elements.length + "</p>";
}
</script>
</body>
</html>
Clicking the "Show Form Info" button displays comprehensive information about the parent form −
Form Information: Form ID: examForm Form Action: /submit Form Method: post Total Elements: 2
Input Outside Form
If the datetime-local input is not enclosed within a <form> element, the form property returns null.
Example
<!DOCTYPE html>
<html>
<head>
<title>Input Without Form</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h3>Standalone Input</h3>
<input type="datetime-local" id="standaloneInput" value="2024-07-20T10:30">
<button onclick="checkForm()">Check Form</button>
<p id="result"></p>
<script>
function checkForm() {
var input = document.getElementById("standaloneInput");
var result = document.getElementById("result");
if (input.form === null) {
result.textContent = "This input is not inside a form element.";
} else {
result.textContent = "Form ID: " + input.form.id;
}
}
</script>
</body>
</html>
Since the input is not within a form, clicking the button shows −
This input is not inside a form element.
Conclusion
The HTML DOM Input DatetimeLocal form property provides a convenient way to access the parent form element containing the datetime-local input. This property is essential for form validation, submission handling, and accessing other form elements or properties programmatically.
177 Views
