How to Reset or Clear a Form using javaScript

AuthorHariom Prajapati

Pubish Date26 Jun 2022


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


How to Reset or Clear a Form using javaScript


How to Reset or Clear a Form using javaScript

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 src=""
        integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous">
    <!-- 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 -->
                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"
                        <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() {






Comments 0

Leave a comment