Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
HTML DOM Input Reset value property
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 −
<!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";
}
298 Views
