How do we reset all the input fields in HTML forms?

HTML Web Development Front End Technology

In this article, we are going to discuss how do we reset all the input fields in HTML forms. Here, we use the reset button to clear the input fields in HTML forms.

In the HTML forms, we use the <input> tag to take user input. To clear all the input in an HTML form, use the <input> tag with the type attribute as reset.

Syntax

Following is the syntax of the reset button.

<input type="reset">

Example 1

The following example demonstrates how do we reset all the input fields in HTML forms.

In this example, we are going to use the reset button to clear the text in the text field.


<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8" />
   <meta http-equiv="X-UA-Compatible" content="IE=edge" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>Clear all the input in HTML forms</title>
</head>
<body>
   <form>
      <input type="text" name="input" />
      <input type="reset" value="reset" />
   </form>
</body>
</html>

After clicking the reset button, the form is cleared.

Example 2

The following example demonstrates how do we reset all the input fields in HTML forms.

In this example, we are going to use the reset button to clear the text in the text field.


<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8" />
   <meta http-equiv="X-UA-Compatible" content="IE=edge" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>reset example</title>
</head>
<body>
   <form>
      Enter name:</br>
      <input type="text" name="input" /></br>
      Enter Age:</br>
      <input type="text" name="input1" /></br>
      <input type="reset" value="reset" />
   </form>
</body>
</html>

After clicking the reset button, the form is cleared.

Example 3

You can try to run the following code to clear all the input in HTML forms −


<!DOCTYPE html>
<html>
<body>
   <form>
      Student Name:<br>
      <input type="text" name="sname">
      <br>
      Student Subject:<br>
      <input type="text" name="ssubject">
      <br>
      <input type="reset" value="reset">
   </form>
</body>
</html>