HTML DOM Input Reset value property

HTMLWeb DevelopmentFront End Technology

The HTML DOM Input reset value property is used to return the value of reset button value attribute or to set it. The value property for reset button changes the text that is displayed upon button as by default the text is “Reset”.

Syntax

Following is the syntax for −

Setting the value property −

resetObject.value = text;

Here, text is used for specifying the text displayed on the reset button.

Example

Let us look at an example for the input reset value property −

Live Demo

<!DOCTYPE html>
<html>
<body>
<h1>Input reset Value 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>Get the above element value by clicking the below button</p>
<button onclick="changeValue()">CHANGE</button>
<p id="Sample"></p>
<script>
   function changeValue() {
      document.getElementById("RESET1").value="Form_Reset";
      document.getElementById("Sample").innerHTML="The reset button value is changed and the value can be seen on the button itself";
   }
</script>
</body>
</html>

Output

This will produce the following output −

On clicking the CHANGE button −

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 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” that will execute the changeValue() method on being clicked by the user −

<button onclick="changeValue()">CHANGE</button>

The changeValue() method gets the input element with type reset by using the getElementById() method and set its “value” attribute value to “Form_Reset”. This value is displayed on the button itself. A message indicating this change is then displayed in the paragraph with id “Sample” using its innerHTML property −

function changeValue() {
   document.getElementById("RESET1").value="Form_Reset";
   document.getElementById("Sample").innerHTML="The reset button value is changed and the value can be seen on the button itself";
}
raja
Published on 19-Aug-2019 08:43:19
Advertisements