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 Date name Property
The HTML DOM Input Date name property gets or sets the value of the name attribute for an HTML <input type="date"> element. This property is essential for identifying form data when submitted to a server, as the name serves as the key in name-value pairs.
Syntax
Following is the syntax to get the name attribute value −
inputDateObject.name
Following is the syntax to set the name attribute value −
inputDateObject.name = "newName"
Parameters
newName − A string value representing the new name for the input date element.
Return Value
The property returns a string representing the current value of the name attribute. If no name attribute is set, it returns an empty string.
Getting the Name Property
Following example demonstrates how to retrieve the name property of a date input element −
<!DOCTYPE html>
<html>
<head>
<title>Getting Input Date Name Property</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h2>Get Date Input Name</h2>
<form>
<label for="birthdate">Select your birth date: </label>
<input type="date" id="birthdate" name="user_birthdate">
</form>
<button onclick="getName()">Get Name Property</button>
<p id="result"></p>
<script>
function getName() {
var dateInput = document.getElementById("birthdate");
var result = document.getElementById("result");
result.textContent = "Name property: " + dateInput.name;
}
</script>
</body>
</html>
The output shows the current name attribute value −
Name property: user_birthdate
Setting the Name Property
Following example shows how to dynamically change the name property of a date input element −
<!DOCTYPE html>
<html>
<head>
<title>Setting Input Date Name Property</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h2>Change Date Input Name</h2>
<form>
<label for="eventDate">Event Date: </label>
<input type="date" id="eventDate" name="start_date">
</form>
<button onclick="changeName()">Change to End Date</button>
<p id="display">Current name: start_date</p>
<script>
function changeName() {
var dateInput = document.getElementById("eventDate");
var display = document.getElementById("display");
if(dateInput.name === "start_date") {
dateInput.name = "end_date";
display.textContent = "Current name: " + dateInput.name;
}
}
</script>
</body>
</html>
Initially, the name is "start_date". After clicking the button, it changes to "end_date" −
Before: Current name: start_date After: Current name: end_date
Complete Example
Following example demonstrates both getting and setting the name property with multiple date inputs −
<!DOCTYPE html>
<html>
<head>
<title>Input Date Name Property Demo</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h2>Date Input Name Property Demo</h2>
<form>
<p>
<label for="date1">Date Select: </label>
<input type="date" id="date1" name="Monday">
</p>
</form>
<button onclick="changeNameValue()">Change name value</button>
<button onclick="showCurrentName()">Show Current Name</button>
<div id="divDisplay" style="margin-top: 10px; padding: 8px; background-color: #f0f8ff; border: 1px solid #ccc;">
Name of date input: Monday
</div>
<script>
var inputDate = document.getElementById("date1");
var divDisplay = document.getElementById("divDisplay");
function changeNameValue() {
if(inputDate.name === "Monday") {
inputDate.name = "Tuesday";
divDisplay.textContent = "Name of date input: " + inputDate.name;
} else if(inputDate.name === "Tuesday") {
inputDate.name = "Wednesday";
divDisplay.textContent = "Name of date input: " + inputDate.name;
}
}
function showCurrentName() {
divDisplay.textContent = "Name of date input: " + inputDate.name;
}
</script>
</body>
</html>
The output displays the current name value and updates when the button is clicked −
Initial: Name of date input: Monday After 1 click: Name of date input: Tuesday After 2 clicks: Name of date input: Wednesday
Key Points
The
nameproperty is crucial for form submission as it identifies the form field data sent to the server.Unlike the
idattribute, thenameattribute doesn't need to be unique within the document.The property returns an empty string if the name attribute is not set.
Changes to the name property are immediately reflected in the DOM and affect form submission behavior.
Browser Compatibility
The name property is supported in all modern browsers that support the HTML5 date input type, including Chrome, Firefox, Safari, and Edge. Internet Explorer does not support the date input type natively.
Conclusion
The HTML DOM Input Date name property provides a straightforward way to get or set the name attribute of date input elements. This property is essential for form processing, allowing developers to dynamically modify how form data is identified and submitted to servers.
171 Views
