Open In App

How to reset all form values using a button in HTML ?

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

To reset all field values in an HTML form, you can use the <input type=”reset”> attribute. When the reset button is clicked, the form will be restored to its default state, without any of the values that were previously entered in the fields, checkboxes, or radio buttons. This can be useful in various scenarios. In this article, we will focus on how to clear input fields.

Syntax:

<input type="reset">

Example 1: Rest form using input type reset

HTML




<!DOCTYPE html>
<html>
 
<body>
    <h1 style="color: green;">
        GeeksforGeeks
    </h1>
 
    <form>
        <input type="text" placeholder="Email address"
               id="email" name="email" />
        <br /><br />
 
        <input type="password" placeholder="Password"
               id="pin" name="password" maxlength="8" />
        <br /><br />
 
        <input type="reset" value="Reset"
               style="background-color: red; color: white" />
        <input type="submit" value="Submit"
               style="background-color: green; color: white" />
    </form>
</body>
 
</html>


Output:

Example 2: Rest form using JavaScript

HTML




<!DOCTYPE html>
<html>
 
<head>
    <title>Form Example</title>
</head>
 
<body>
    <h1 style="color: green;">
        GeeksforGeeks
    </h1>
 
    <form id="myForm">
        <input type="text" placeholder="Email address"
               id="email" name="email" />
        <br /><br />
 
        <input type="password" placeholder="Password"
               id="pin" name="password" maxlength="8" />
        <br /><br />
 
        <button type="button" onclick="resetForm()"
                style="background-color: red; color: white">
          Reset
          </button>
        <input type="submit" value="Submit"
               style="background-color: green; color: white" />
    </form>
 
    <script>
        function resetForm() {
            document.getElementById("myForm").reset();
        }
    </script>
</body>
 
</html>


Output:



Last Updated : 23 Jan, 2024
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads