The HTML onreset attribute is an event handler used to specify a script that will run when a form is reset.
Definition and Usage
➔ This event is triggered when a user clicks <input type="reset"> or <button type="reset"> as a reset button.
➔ The event can be initiated by the user or programmatically.
Syntax
//In HTML
<form onreset="myFunction()" id="sample">
<!-- form elements and an input type="reset" button -->
<input type="reset" value="Reset">
<!-- OR -->
<!-- <button type="reset">Reset form</button> -->
</form>
//In javascript
document.getElementById("sample").onreset=function() {myFunction();};
//OR
document.getElementById("sample").addEventListener("reset", myFunction);
//OR
document.getElementById("sample").addEventListener("reset", (event) => {
myFunction();
});
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML onreset Attribute Example</title>
<meta charset="utf-8" />
<style>
input[type="reset"],input[type="submit"] {
width: 150px;
height: 50px;
margin:5px;
background-color: #2e3e4e;
font-size: 14pt;
color: white;
border-radius: 5px;
}
input[type="reset"]:hover,input[type="submit"]:hover {
background-color: #1d2d3d;
color: white;
}
input[type="text"],
input[type="email"] {
width: 230px;
height: 30px;
background-color: #efffff;
font-size: 14pt;
color: #000;
border-radius: 5px;
margin: 5px;
}
input[type="text"]:hover,
input[type="email"]:hover {
background-color: #fff;
}
</style>
</head>
<body>
<h2>HTML onreset Attribute Example</h2>
<p>Type something in the input field and then click the Reset button to fire event.</p>
<form action="#" onreset="myFunction()">
Name: <input type="text" name="name" id="name"><br>
Email: <input type="email" name="email" id="email"><br>
<input type="submit" value="Submit" id="button">
<input type="reset" value="Reset" id="button">
</form>
<script>
function myFunction() {
alert("Form is reset");
}
</script>
</body>
</html>
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML onreset Attribute Example</title>
<meta charset="utf-8" />
<style>
input[type="submit"] {
width: 150px;
height: 50px;
margin:5px;
background-color: #2e3e4e;
font-size: 14pt;
color: white;
border-radius: 5px;
}
input[type="submit"]:hover {
background-color: #1d2d3d;
color: white;
}
button[type="reset"] {
width: 150px;
height: 50px;
margin:5px;
background-color: #2e3e4e;
font-size: 14pt;
color: white;
border-radius: 5px;
}
button[type="reset"]:hover{
background-color: #1d2d3d;
color: white;
}
input[type="text"],
input[type="email"] {
width: 230px;
height: 30px;
background-color: #efffff;
font-size: 14pt;
color: #000;
border-radius: 5px;
margin: 5px;
}
input[type="text"]:hover,
input[type="email"]:hover {
background-color: #fff;
}
</style>
</head>
<body>
<h2>HTML onreset Attribute Example</h2>
<p>Type something in the input field and then click the Reset button to fire event.</p>
<form action="#" onreset="myFunction()">
Name: <input type="text" name="name" id="name"><br>
Email: <input type="email" name="email" id="email"><br>
<input type="submit" value="Submit" id="button">
<button type="reset">Reset form</button>
</form>
<script>
function myFunction() {
alert("Form is reset");
}
</script>
</body>
</html>