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 Reset name property
The HTML DOM Input Reset name property is used for setting or returning the value of the name attribute of a reset button. The name attribute identifies form data when submitted to the server, allowing the server to distinguish between different form elements.
Syntax
Following is the syntax for setting the name property −
resetObject.name = name
Following is the syntax for getting the name property −
var name = resetObject.name
Parameters
name − A string that specifies the name of the reset button. This value is used to identify the button when the form is submitted to the server.
Return Value
The property returns a string representing the value of the name attribute of the reset button. If no name attribute is set, it returns an empty string.
Setting the Name Property
Following example demonstrates how to set the name property of a reset button −
<!DOCTYPE html>
<html>
<head>
<title>Input Reset Name Property</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h2>Input Reset Name Property</h2>
<form style="border: 2px solid green; padding: 10px; margin-bottom: 10px;">
UserName: <input type="text" id="USR"> <br><br>
Location: <input type="text" id="Location"><br><br>
<input type="reset" id="RESET1" value="Reset Form">
</form>
<p>Change the name of the reset button by clicking the button below:</p>
<button type="button" onclick="changeName()">CHANGE NAME</button>
<p id="Sample"></p>
<script>
function changeName() {
document.getElementById("RESET1").name = "RES_BTN";
document.getElementById("Sample").innerHTML = "Reset Button name is now: RES_BTN";
}
</script>
</body>
</html>
Initially, the reset button has no name attribute. After clicking "CHANGE NAME", the name property is set to "RES_BTN" −
Input Reset Name Property [UserName field] [Location field] [Reset Form button] Change the name of the reset button by clicking the button below: [CHANGE NAME button] Reset Button name is now: RES_BTN
Getting the Name Property
Following example shows how to retrieve the current name property value −
<!DOCTYPE html>
<html>
<head>
<title>Get Reset Name Property</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h2>Get Reset Name Property</h2>
<form style="border: 2px solid blue; padding: 10px; margin-bottom: 10px;">
Email: <input type="email" placeholder="Enter email"> <br><br>
Password: <input type="password" placeholder="Enter password"><br><br>
<input type="reset" id="resetBtn" name="clearForm" value="Clear All">
</form>
<button type="button" onclick="getName()">GET NAME</button>
<p id="result"></p>
<script>
function getName() {
var resetButton = document.getElementById("resetBtn");
var nameValue = resetButton.name;
document.getElementById("result").innerHTML = "Current name: " + nameValue;
}
</script>
</body>
</html>
This example retrieves and displays the existing name attribute value −
Get Reset Name Property [Email field] [Password field] [Clear All button] [GET NAME button] Current name: clearForm
Dynamic Name Assignment
Following example demonstrates dynamically assigning names based on user input −
<!DOCTYPE html>
<html>
<head>
<title>Dynamic Name Assignment</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h2>Dynamic Reset Button Name</h2>
<form style="border: 2px solid red; padding: 10px; margin-bottom: 10px;">
Name: <input type="text" id="userName"> <br><br>
Age: <input type="number" id="userAge"><br><br>
<input type="reset" id="dynamicReset" value="Reset">
</form>
<p>Enter a name for the reset button:</p>
<input type="text" id="nameInput" placeholder="e.g., clearButton">
<button type="button" onclick="setCustomName()">SET NAME</button>
<p id="status"></p>
<script>
function setCustomName() {
var customName = document.getElementById("nameInput").value;
if (customName) {
document.getElementById("dynamicReset").name = customName;
document.getElementById("status").innerHTML = "Reset button name set to: " + customName;
} else {
document.getElementById("status").innerHTML = "Please enter a name";
}
}
</script>
</body>
</html>
Users can enter a custom name which gets assigned to the reset button dynamically −
Dynamic Reset Button Name [Name field] [Age field] [Reset button] Enter a name for the reset button: [nameInput field] [SET NAME button] Reset button name set to: [user input]
How It Works
The name property works by −
-
Setting − When you assign a value to
resetObject.name, it modifies thenameattribute in the HTML element. -
Getting − When you access
resetObject.name, it retrieves the current value of thenameattribute. -
Form submission − The name attribute becomes the key when form data is sent to the server. If the reset button has a name and value, it gets included in the form data when clicked.
-
JavaScript access − You can use
getElementsByName()to select elements by their name attribute value.
Browser Compatibility
The Input Reset name property is supported in all major browsers including Chrome, Firefox, Safari, Edge, and Internet Explorer. It is part of the standard DOM specification and has been consistently supported across different browser versions.
Conclusion
The HTML DOM Input Reset name property provides a simple way to set or retrieve the name attribute of reset buttons. This property is essential for form processing on the server side, as it helps identify which reset button was clicked when multiple reset buttons exist in a form.
206 Views
