Adding a Reset Button in Input Filed in HTML

A reset button helps a user to clear all the data they have entered in the text fields. In other words, when a user clicks the reset button, all the controls in the form are returned to their original state. To add a reset button to a Web page, you need to add the <input type=”reset” > tag in the HTML code.

Let’s do the following steps to add a reset button:


<!DOCTYPE html>
<html>
<head>
    <title> Adding Reset Button</title>
</head>
<body>
    <form action=”Example.html” method=”post”>
        <h4> Example of using Reset button</h4>    
Username:
        <input type=”text” size=”30’ name=”name” /></br></br>
        Enter Password:
<input type=”password”  size=”30” name=”password” />
        <input type=”submit” value=”Submit” />
        <input type=”reset” value=”Reset” />
    </form>
</body>
</html>

Save the document with the name AddingResetButton.html and open on browser.

If you click on reset form you can see that the text fields become empty.