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 name Property
The HTML DOM Input Month name property gets or sets the value of the name attribute of an input field with type="month". The name attribute identifies the form field when data is submitted to the server, making it essential for form processing.
Syntax
Following is the syntax for getting the name property −
object.name
Following is the syntax for setting the name property −
object.name = "text"
Return Value
The name property returns a string representing the value of the name attribute. If no name attribute is specified, it returns an empty string.
Example − Getting Month Input Name
Following example demonstrates how to get the name property of a month input field −
<!DOCTYPE html>
<html>
<head>
<title>Month Input Name Property</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px; text-align: center;">
<h2>Month Input Name Property Example</h2>
<input type="month" id="monthInput" name="birth_month" value="2023-05">
<br><br>
<button onclick="showName()">Show Name</button>
<button onclick="clearResult()">Clear</button>
<p id="result"></p>
<script>
function showName() {
var monthInput = document.getElementById("monthInput");
var result = document.getElementById("result");
result.innerHTML = "Name: " + monthInput.name;
}
function clearResult() {
document.getElementById("result").innerHTML = "";
}
</script>
</body>
</html>
The output shows the month input field and displays its name when the button is clicked −
Month Input Name Property Example [May 2023] [Show Name] [Clear] Name: birth_month
Example − Setting Month Input Name
Following example shows how to modify the name property dynamically −
<!DOCTYPE html>
<html>
<head>
<title>Setting Month Input Name</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px; text-align: center;">
<h2>Modify Month Input Name</h2>
<input type="month" id="monthField" name="old_name" value="2023-12">
<br><br>
<button onclick="changeName()">Change Name</button>
<button onclick="getCurrentName()">Get Current Name</button>
<p id="output"></p>
<script>
function changeName() {
var monthField = document.getElementById("monthField");
monthField.name = "new_month_name";
document.getElementById("output").innerHTML = "Name changed to: " + monthField.name;
}
function getCurrentName() {
var monthField = document.getElementById("monthField");
document.getElementById("output").innerHTML = "Current name: " + monthField.name;
}
</script>
</body>
</html>
Initially, clicking "Get Current Name" shows "old_name". After clicking "Change Name", it updates to "new_month_name" −
Modify Month Input Name [December 2023] [Change Name] [Get Current Name] Current name: old_name (After clicking "Change Name": Name changed to: new_month_name)
Example − Form Submission with Month Input
Following example demonstrates how the name property is used in form submission −
<!DOCTYPE html>
<html>
<head>
<title>Month Input in Form</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Employee Information Form</h2>
<form action="#" method="get">
<label for="empName">Employee Name:</label>
<input type="text" id="empName" name="employee_name" required><br><br>
<label for="startMonth">Start Month:</label>
<input type="month" id="startMonth" name="start_date" value="2023-01"><br><br>
<input type="submit" value="Submit Form">
</form>
<p><strong>Note:</strong> When submitted, the month field will send data as "start_date=2023-01" to the server.</p>
</body>
</html>
When this form is submitted, the month input sends its data using the name "start_date" paired with the selected month value.
Key Points
-
The
nameproperty is essential for form data submission and server-side processing. -
Unlike the
idattribute, multiple form elements can share the same name (useful for radio buttons and checkboxes). -
The name value should not contain spaces and should follow standard naming conventions.
-
JavaScript can both read and modify the name property dynamically.
Conclusion
The HTML DOM Input Month name property provides access to the name attribute of month input fields. It can be used to both retrieve and modify the name value, which is crucial for proper form data handling and server communication. This property is particularly useful in dynamic forms where field names may need to be changed programmatically.
180 Views
