How to reset or clear a form using JavaScript with .reset() method

In this tutorial we will see how to reset or clear a form using JavaScript with .reset() method.

Follow below steps to reset or clear a form using JavaScript .reset() method.

Step 1 - Create a form with id="reset" and add input field inside <form> tag according to your need.

In first step you need to create a form with id="reset" (you can take any id name but make sure that same id name used inside step 3 script code where id called) input fields and submit button. 

Syntax -

<form id="reset">

<label> input name </label>

<input type=" " name=" "/>

<button type="submit" > Submit </button>


Step 2 - Create a input/button with type="button" and create a onclick function inside it.

In second step you need to create input/button with type="button" and also create onclick function.

Syntax -


<label> input name </label>

<input type=" " name=" "/>

<input type="button" onclick="newFunction()" value="reset"/>

<button type="submit" > Submit </button>


Step 3 -
 Now put below script code inside <body> tag.

In third step you need to insert Script code inside body tag.

Syntax -


function newFunction(){

document.getElementById("reset").reset() ;



Now you can reset or clear a form with reset button.

Below code is combination of all the above steps :-

For Example -

<!DOCTYPE html>

<html lang="en">



    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- bootstrap cdn start -->

    <link rel="stylesheet" href="" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <script src=""></script>

    <script src="" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>

    <script src="" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

    <!-- bootstrap cdn end -->

    <!-- style start-->


        .vertical-center {

            display: flex;

            justify-content: center;

            align-items: center;

            min-height: 100vh;


        .input_field_class {

            border: 2px solid white;

            box-sizing: border-box;

            box-shadow: 5px 5px 5px 5px grey;



    <!-- style end -->




    <div class="container-fluid" style="overflow-x: hidden;">

        <div class="row vertical-center mt-4 mx-4">

            <!-- main form start -->

            <div style="width:600px;height:auto;border:10px solid white;box-sizing:border-box;box-shadow:5px 5px 5px 5px grey , grey 5px 5px 5px 5px inset;border-radius:150px 5px 150px 5px;margin-bottom:30px">               

                <!-- form div start here -->

                <div class='mx-5 mb-2'>

                    <form action="" method="" id="reset">

                        <label for="full_name" style="font-weight: 600;" class="form-group mt-5">Full Name :</label>

                        <input type="text" name="full_name" id="full_name" placeholder="Full name" class="form-control input_field_class" required> <br>

                        <label for="email" style="font-weight: 600;" class="form-group">Email Id :</label>

                        <input type="text" name="email" id="email" placeholder="Email Address" class="form-control input_field_class" required><br>

                        <label for="dob" style="font-weight: 600;" class="form-group">Date Of Birth :</label>

                        <input type="date" name="dob" id="dob" placeholder="dob" class="form-control input_field_class" required><br>

                        <label for="your_self" style="font-weight: 600;" class="form-group ">About Yourself :</label>

                        <textarea name="your_self" id="your_self" class="form-control input_field_class"></textarea><br>


                        <div class="d-flex justify-content-around mt-4 mb-3"><input type="button" class="btn btn-danger" onclick="newFunction()" value="Reset"><button type="submit" id="btn" class="btn btn-dark">Submit</button></div>



                <!-- form div end here -->


            <!-- main form end -->



    <!-- js start here -->


         function newFunction() {







Related Topics