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 type Property
The HTML DOM Input Month type property returns the value of the type attribute of an input month field. This property is read-only and always returns "month" for input elements with type="month".
Syntax
Following is the syntax to access the type property −
inputObject.type
Return Value
This property returns a string representing the type of the input element. For month input fields, it always returns "month".
Example
Following example demonstrates how to get the type property of an input month field −
<!DOCTYPE html>
<html>
<head>
<title>Input Month Type Property</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
padding: 20px;
background: linear-gradient(135deg, #74b9ff, #0984e3);
color: white;
min-height: 100vh;
margin: 0;
}
.container {
background: rgba(255, 255, 255, 0.1);
padding: 30px;
border-radius: 10px;
max-width: 500px;
margin: 0 auto;
}
input {
padding: 10px;
font-size: 16px;
border: 2px solid white;
border-radius: 5px;
background: transparent;
color: white;
margin: 10px;
}
button {
padding: 10px 20px;
font-size: 16px;
background: #00b894;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
margin: 10px;
}
button:hover {
background: #00a085;
}
.result {
margin-top: 20px;
font-size: 18px;
font-weight: bold;
color: #fdcb6e;
}
</style>
</head>
<body>
<div class="container">
<h1>Input Month Type Property</h1>
<p>Select a month and get the input type:</p>
<input type="month" id="monthInput" value="2024-03">
<br>
<button onclick="getType()">Get Input Type</button>
<div id="result" class="result"></div>
</div>
<script>
function getType() {
var monthInput = document.getElementById("monthInput");
document.getElementById("result").innerHTML = "Input type: " + monthInput.type;
}
</script>
</body>
</html>
The output shows a month input field with a button. Clicking the button displays the type property value −
Input type: month
Practical Example with Multiple Input Types
Following example shows how to identify different input types, including the month type −
<!DOCTYPE html>
<html>
<head>
<title>Multiple Input Types</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Different Input Types</h2>
<p>Text Input: <input type="text" id="textInput" placeholder="Enter text"></p>
<p>Month Input: <input type="month" id="monthInput" value="2024-06"></p>
<p>Date Input: <input type="date" id="dateInput" value="2024-03-15"></p>
<button onclick="showAllTypes()">Show All Input Types</button>
<div id="output" style="margin-top: 20px; padding: 10px; background: #f0f0f0;"></div>
<script>
function showAllTypes() {
var textType = document.getElementById("textInput").type;
var monthType = document.getElementById("monthInput").type;
var dateType = document.getElementById("dateInput").type;
document.getElementById("output").innerHTML =
"<strong>Input Types:</strong><br>" +
"Text input type: " + textType + "<br>" +
"Month input type: " + monthType + "<br>" +
"Date input type: " + dateType;
}
</script>
</body>
</html>
The output displays the type property for different input elements −
Input Types: Text input type: text Month input type: month Date input type: date
Key Points
Following are important points about the input month type property −
The
typeproperty is read-only and cannot be modified via JavaScript.For input elements with
type="month", this property always returns the string"month".This property helps in identifying the input type programmatically for validation or form processing.
The month input type allows users to select a month and year combination.
Browser Compatibility
The input month type and its type property are supported in modern browsers. However, some older browsers may not support the month input type and will fall back to a regular text input.
Conclusion
The HTML DOM Input Month type property provides a reliable way to identify month input fields programmatically. It always returns "month" for input elements with type="month" and is useful for form validation and dynamic behavior in web applications.
198 Views
