How To Reset An HTML Form With JavaScript

With HTML, a reset button can be added in a form with <input /> tag. For that, we need to specify attribute type with "reset" value as type="reset"

<input type="reset" value="Reset" />

And when the user clicks on the Reset button, the form that it belongs to will reset to its original state.

This can also be done with JavaScript by using reset() method.

In this tutorial, we'll see how to reset an HTML form with JavaScript.

Example

• Assume that we have an E-commerce website containing login and registration form on the same page like Facebook.
• An HTML form for registration with id registrationForm which will be used by a new customer coming to our website.

<form action="https://example.com/registration" method="post" id="registrationForm">
  <!-- .... -->
</form>

So in order to reset this form, we will use JavaScript reset() method.

const registrationForm = document.getElementById("registrationForm");
registrationForm.reset();

This will restore the form to its original state by clearing all the form elements.

Read the complete post on our site MeshWorld - Reset An HTML Form With JavaScript

Read others post on our site MeshWorld

Talk is cheap. Show me the code.

~ Linus Torvalds

Happy 😄 coding

With ❤️ from 🇮🇳