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 name Property
The HTML DOM Input Time name property allows you to get or set the value of the name attribute for a time input element. The name attribute is used to identify form data when it's submitted to the server and can also be referenced in JavaScript for client-side manipulation.
Syntax
Following is the syntax to get the name property −
inputTimeObject.name
Following is the syntax to set the name property −
inputTimeObject.name = "string"
Return Value
The property returns a string that represents the value of the name attribute of the time input element. If no name attribute is set, it returns an empty string.
Parameters
When setting the property, it accepts a string parameter that becomes the new value for the name attribute.
Example − Getting the Name Property
Following example demonstrates how to get the name property of a time input −
<!DOCTYPE html>
<html>
<head>
<title>Get Input Time Name</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<label for="eventTime">Event Time:</label>
<input type="time" id="eventTime" name="meeting_time" value="14:30">
<button onclick="getName()">Get Name</button>
<p id="result"></p>
<script>
function getName() {
var timeInput = document.getElementById("eventTime");
var nameValue = timeInput.name;
document.getElementById("result").textContent = "Name attribute: " + nameValue;
}
</script>
</body>
</html>
The output displays the current name attribute value −
Event Time: 14:30 [Get Name] Name attribute: meeting_time
Example − Setting the Name Property
Following example shows how to set the name property dynamically −
<!DOCTYPE html>
<html>
<head>
<title>Set Input Time Name</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<label for="appointmentTime">Appointment Time:</label>
<input type="time" id="appointmentTime" name="doctor_visit" value="09:00">
<br><br>
<button onclick="changeName()">Change to Dentist</button>
<button onclick="showCurrentName()">Show Current Name</button>
<p id="display"></p>
<script>
function changeName() {
var timeInput = document.getElementById("appointmentTime");
timeInput.name = "dentist_appointment";
document.getElementById("display").textContent = "Name changed to: " + timeInput.name;
}
function showCurrentName() {
var timeInput = document.getElementById("appointmentTime");
document.getElementById("display").textContent = "Current name: " + timeInput.name;
}
</script>
</body>
</html>
The name attribute can be changed dynamically and the new value is immediately reflected −
Appointment Time: 09:00 [Change to Dentist] [Show Current Name] Current name: dentist_appointment
Example − Practical Application
Following example demonstrates a practical use case where the name property is used to handle different appointment types −
<!DOCTYPE html>
<html>
<head>
<title>Input Time Name Property</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<form style="text-align: center; margin: 20px;">
<fieldset style="border: 1px solid #ccc; padding: 20px;">
<legend>Appointment Booking</legend>
<label for="timeSelect" id="appointmentLabel">Appointment at General Hospital:</label>
<input type="time" name="general_hospital" id="timeSelect" value="15:30">
<br><br>
<button type="button" onclick="confirmAppointment()">Confirm</button>
<button type="button" onclick="changeToSpecialist()">Switch to Specialist</button>
<div id="message" style="margin-top: 15px; font-weight: bold;"></div>
</fieldset>
</form>
<script>
var timeInput = document.getElementById("timeSelect");
var label = document.getElementById("appointmentLabel");
var message = document.getElementById("message");
function confirmAppointment() {
if (timeInput.name === "general_hospital") {
message.textContent = "General Hospital appointment confirmed at: " + timeInput.value;
message.style.color = "green";
} else {
message.textContent = "Specialist appointment confirmed at: " + timeInput.value;
message.style.color = "blue";
}
}
function changeToSpecialist() {
timeInput.name = "specialist_clinic";
label.textContent = "Appointment at Specialist Clinic:";
message.textContent = "Switched to specialist clinic";
message.style.color = "orange";
}
</script>
</body>
</html>
The example shows how the name property can be used to track and manage different types of appointments. The form behavior changes based on the current name value −
Initial: "Appointment at General Hospital: 15:30" After switching: "Appointment at Specialist Clinic: 15:30" Confirmation shows different messages based on current name value
Key Points
- The
nameproperty is essential for form submission as it identifies the field data - Multiple elements can share the same name, unlike the
idattribute which must be unique - When the name is changed via JavaScript, the new value is immediately available
- The property returns an empty string if no name attribute is set
- The name attribute is case-sensitive
Conclusion
The HTML DOM Input Time name property provides a way to dynamically access and modify the name attribute of time input elements. This property is particularly useful in scenarios where form fields need to be identified or modified based on user interactions, making forms more dynamic and responsive.
154 Views
