HTML onreset Event Attribute

Last Updated : 21 Dec, 2023

The onreset event attribute in HTML is triggered when reset the form. This Attribute works with form tag and is triggered when a form is reset, either by user action or programmatically.

It also allows the execution of scripts or functions to handle actions after form reset.

Syntax:

<form onreset = "script">

Supported Tags:

<form>

Attribute Value:

This attribute contains a single value script that works when onreset event call.

Example 1:

In this example, we will see the implementation of onreset tag.

html

<!DOCTYPE html>
<html>
 
<head>
    <title>onreset event attribute</title>
    <style>
        body {
            text-align: center;
        }
 
        h1 {
            color: green;
        }
    </style>
    <script>
        function Geeks() {
            alert("Form Reset...");
        } 
    </script>
</head>
 
<body>
    <h1>
        GeeksforGeeks
    </h1>
    <h2>
        onreset event attribute
    </h2>
    <form onreset="Geeks()" style="color:blue" ;>
        First Name: <input type="text"></br>
        Last Name: <input type="text"></br>
        <input type="reset">
    </form>
</body>
 
</html>

Output:

Output

Example 2:

In this example, we will see the implementation of onreset tag.

HTML

<!DOCTYPE html>
<html>
 
<body>
    <center>
        <h1 style="color: green;">GeeksforGeeks</h1>
        <h3 style="color:orange;font-weight:bold;">
            Form Reset Example
        </h3>
 
        <form onreset="resetMessage()">
            <label for="inputField">Enter Text:</label>
            <input type="text" id="inputField"> <br>
            <button type="reset" style="margin-top: 10px;">
              Reset Form
              </button>
        </form>
 
        <p id="resetInfo"></p>
 
        <script>
            function resetMessage() {
                document.getElementById("resetInfo").
                innerHTML = "Form has been reset!";
            }
        </script>
    </center>
</body>
 
</html>