HTML DOM Input Reset name property

The HTML DOM Input Reset name property is used for setting or returning the name attribute of a reset button. The name attribute helps in identifying the form data after it has been submitted to the server.

Syntax

Following is the syntax for −

Setting the name property −

resetObject.name = name

Here, name is for specifying the reset button name.

Example

Let us look at an example for the Reset name property −

<!DOCTYPE html>
<html>
<body>
<h1>Input range name Property</h1>
<form style="border:solid 2px green;padding:2px">
UserName: <input type="text" id="USR"> <br>
Location: <input type="text" id="Age"><br><br>
<input type="reset" id="RESET1">
</form>
<p>Change the name of the above reset button by clicking the below button</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>

Output

This will produce the following output −

HTML DOM Input Reset name property

On clicking the CHANGE NAME −

HTML DOM Input Reset name property

In the above example −

We have created an <input> element with type=”reset”, id=”RESET1”. Clicking on this button will reset the form data. This button is inside a form that contains two text fields too and the form also has an inline style applied to it −

<form style="border:solid 2px green;padding:2px">
UserName: <input type="text" id="USR"> <br>
Location: <input type="text" id="Age"><br><br>
<input type="reset" id="RESET1">
</form>

We then created a button CHANGE NAME that will execute the changeName() method when clicked by the user −

<button type="button" onclick="changeName()">CHANGE NAME</button>

The changeName() method uses the getElementById() method to get the input field with type reset and set its name attribute value to “RES_BTN” .This change is then reflected in a paragraph with id “Sample” and using its innerHTML property to display the intended text −

function changeName() {
   document.getElementById("RESET1").name ="RES_BTN" ;
   document.getElementById("Sample").innerHTML = " Reset Button name is now RES_BTN";
}