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 Month form Property
The HTML DOM input month form property returns a reference to the form element that contains the month input field. This read-only property is useful for identifying which form a month input belongs to, especially in documents with multiple forms.
Syntax
Following is the syntax for accessing the form property −
monthInputElement.form
Return Value
The property returns a reference to the <form> element that contains the month input field, or null if the input is not contained within a form.
Example − Basic Form Reference
Following example demonstrates how to get the form reference from a month input field −
<!DOCTYPE html>
<html>
<head>
<title>Month Input Form Property</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px; text-align: center;">
<h1>Form Property Demo</h1>
<form id="registration-form">
<fieldset style="display: inline-block; padding: 20px;">
<legend>Registration Form</legend>
<label for="birthMonth">Birth Month:</label>
<input type="month" id="birthMonth" name="birth-month">
</fieldset>
</form>
<button onclick="identifyForm()" style="margin-top: 20px; padding: 10px 20px;">
Identify Form
</button>
<p id="result" style="font-weight: bold; color: #0066cc;"></p>
<script>
function identifyForm() {
var monthInput = document.getElementById("birthMonth");
var form = monthInput.form;
if (form) {
document.getElementById("result").innerHTML =
"Form ID: " + form.id + "<br>Form Name: " + (form.name || "No name specified");
} else {
document.getElementById("result").innerHTML = "No form found";
}
}
</script>
</body>
</html>
The output shows the form information when the button is clicked −
Form ID: registration-form Form Name: No name specified
Example − Multiple Forms
Following example demonstrates the form property with multiple forms containing month inputs −
<!DOCTYPE html>
<html>
<head>
<title>Multiple Forms with Month Inputs</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h1>Multiple Forms Example</h1>
<form id="form1" name="personal-info">
<fieldset style="margin-bottom: 20px; padding: 15px;">
<legend>Personal Information</legend>
<label>Birth Month: <input type="month" class="month-input"></label>
</fieldset>
</form>
<form id="form2" name="employment-info">
<fieldset style="margin-bottom: 20px; padding: 15px;">
<legend>Employment Information</legend>
<label>Start Month: <input type="month" class="month-input"></label>
</fieldset>
</form>
<button onclick="checkAllForms()" style="padding: 10px 20px;">
Check All Month Inputs
</button>
<div id="results" style="margin-top: 20px; font-weight: bold;"></div>
<script>
function checkAllForms() {
var monthInputs = document.querySelectorAll(".month-input");
var resultDiv = document.getElementById("results");
var output = "";
monthInputs.forEach(function(input, index) {
var form = input.form;
output += "Input " + (index + 1) + ": ";
output += "Form ID = " + form.id + ", ";
output += "Form Name = " + form.name + "<br>";
});
resultDiv.innerHTML = output;
}
</script>
</body>
</html>
The output displays information about each month input and its parent form −
Input 1: Form ID = form1, Form Name = personal-info Input 2: Form ID = form2, Form Name = employment-info
Example − Input Outside Form
Following example shows what happens when a month input is not contained within a form −
<!DOCTYPE html>
<html>
<head>
<title>Month Input Outside Form</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px; text-align: center;">
<h1>Input Outside Form Example</h1>
<p>Month Input Inside Form:</p>
<form id="sample-form">
<input type="month" id="insideForm">
</form>
<p>Month Input Outside Form:</p>
<input type="month" id="outsideForm">
<br><br>
<button onclick="compareInputs()" style="padding: 10px 20px;">
Compare Inputs
</button>
<div id="comparison" style="margin-top: 20px; font-weight: bold;"></div>
<script>
function compareInputs() {
var insideInput = document.getElementById("insideForm");
var outsideInput = document.getElementById("outsideForm");
var resultDiv = document.getElementById("comparison");
var insideForm = insideInput.form;
var outsideForm = outsideInput.form;
var output = "Inside Form: " + (insideForm ? insideForm.id : "null") + "<br>";
output += "Outside Form: " + (outsideForm ? outsideForm.id : "null");
resultDiv.innerHTML = output;
}
</script>
</body>
</html>
The comparison shows that inputs outside a form return null −
Inside Form: sample-form Outside Form: null
Key Points
-
The
formproperty is read-only and cannot be modified. -
Returns
nullif the month input is not contained within a<form>element. -
Useful for form validation scripts and dynamic form handling.
-
Works with all input types, not just month inputs.
Conclusion
The HTML DOM input month form property provides a convenient way to access the parent form of a month input element. This property returns a reference to the containing form or null if the input exists outside any form, making it essential for form validation and dynamic web applications.
150 Views
