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 Time form Property
The HTML DOM Input Time form property returns a reference to the form element that contains the input time field. This property is read-only and provides access to the parent form object, allowing you to retrieve form attributes like ID, name, or other form-related properties.
Syntax
Following is the syntax for accessing the form property −
inputTimeObject.form
Return Value
The form property returns a reference to the HTMLFormElement object that contains the input time element. If the input time element is not inside a form, it returns null.
Example − Getting Form Reference
Following example demonstrates how to use the form property to get the enclosing form's ID −
<!DOCTYPE html>
<html>
<head>
<title>Input Time form Property</title>
<style>
form {
width: 70%;
margin: 0 auto;
text-align: center;
padding: 20px;
border: 1px solid #ccc;
border-radius: 8px;
font-family: Arial, sans-serif;
}
input {
padding: 8px;
margin: 5px;
border: 1px solid #ddd;
border-radius: 4px;
}
input[type="button"] {
background-color: #007bff;
color: white;
cursor: pointer;
border-radius: 6px;
}
#divDisplay {
margin-top: 15px;
font-weight: bold;
color: #333;
}
</style>
</head>
<body>
<form id="Physics">
<fieldset>
<legend>Examination Schedule</legend>
<label for="TimeSelect">Examination Time: </label>
<input type="time" id="TimeSelect" value="14:00">
<br><br>
<input type="button" onclick="getform()" value="Which Exam?">
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
var divDisplay = document.getElementById("divDisplay");
var inputTime = document.getElementById("TimeSelect");
function getform() {
divDisplay.textContent = inputTime.form.id + ' exam starts at ' + inputTime.value;
}
</script>
</body>
</html>
The output displays the form ID and selected time when the button is clicked −
Before clicking: [Examination Schedule form with time input "14:00" and "Which Exam?" button] After clicking: "Physics exam starts at 14:00"
Example − Multiple Form Properties
Following example shows how to access multiple properties of the parent form −
<!DOCTYPE html>
<html>
<head>
<title>Form Properties Access</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<form id="examForm" name="ExaminationForm" method="post" action="/submit-exam">
<h3>Schedule Information</h3>
<label>Start Time: <input type="time" id="startTime" value="09:00"></label>
<br><br>
<button type="button" onclick="showFormInfo()">Show Form Details</button>
<div id="formInfo" style="margin-top: 15px; background: #f8f9fa; padding: 10px; border-radius: 4px;"></div>
</form>
<script>
function showFormInfo() {
var timeInput = document.getElementById("startTime");
var form = timeInput.form;
var info = "Form ID: " + form.id + "<br>" +
"Form Name: " + form.name + "<br>" +
"Method: " + form.method + "<br>" +
"Action: " + form.action + "<br>" +
"Selected Time: " + timeInput.value;
document.getElementById("formInfo").innerHTML = info;
}
</script>
</body>
</html>
This example demonstrates accessing various form properties through the time input's form reference −
Form ID: examForm Form Name: ExaminationForm Method: post Action: http://example.com/submit-exam Selected Time: 09:00
Example − Input Time Outside Form
Following example shows what happens when the input time element is not inside a form −
<!DOCTYPE html>
<html>
<head>
<title>Input Time Without Form</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h3>Time Input Outside Form</h3>
<label>Meeting Time: <input type="time" id="meetingTime" value="15:30"></label>
<br><br>
<button onclick="checkForm()">Check Form Reference</button>
<p id="result" style="margin-top: 15px; padding: 10px; background: #fff3cd; border-radius: 4px;"></p>
<script>
function checkForm() {
var timeInput = document.getElementById("meetingTime");
var result = document.getElementById("result");
if (timeInput.form === null) {
result.textContent = "This input time element is not inside a form. The form property returns null.";
} else {
result.textContent = "Form found: " + timeInput.form.id;
}
}
</script>
</body>
</html>
When the input time is not inside a form, the form property returns null −
"This input time element is not inside a form. The form property returns null."
Common Use Cases
The form property is commonly used in the following scenarios −
Form validation − Access form properties to implement custom validation logic.
Dynamic form handling − Programmatically submit or reset the parent form.
Form identification − Determine which form contains the input when multiple forms exist on a page.
Event handling − Attach event listeners to the parent form based on input interactions.
Browser Compatibility
The form property for input time elements is supported in all modern browsers that support the HTML5 time input type. This includes Chrome 20+, Firefox 57+, Safari 14.1+, and Edge 79+. For older browsers that don't support input type="time", the property still works but the input falls back to a text input.
Conclusion
The HTML DOM Input Time form property provides a convenient way to access the parent form element from within a time input field. It returns a reference to the HTMLFormElement object or null if the input is not within a form, making it useful for form validation, dynamic handling, and accessing form-level properties.
190 Views
