Reset a Form with JavaScript reset()

The HTMLFormElement.reset() method restores a form's controls to their initial/default values. It performs the same type of reset as a native <button type="reset">.

const form = document.getElementById("f1");
form.reset();

Use a Native Reset Button Top ↑

<form id="f1">
  <input name="name" value="Subhendu">
  <button type="reset">Reset</button>
</form>

Use the native reset control when the user should be able to restore the form directly. JavaScript is not required for this case.

Reset a Form from JavaScript Top ↑

Call reset() when a programmatic action should restore the form, such as after successfully processing a client-side workflow.

const form = document.getElementById("f1");
const resetButton = document.getElementById("resetForm");

resetButton.addEventListener("click", () => {
  form.reset();
});

reset() Restores Default Values Top ↑

A reset does not necessarily make every control empty. It restores the defaults defined by the markup or default properties. For example, an input with value="PHP" returns to PHP, and a radio button with the checked attribute becomes checked again.

<input name="language" value="JavaScript">
<input type="radio" name="level" value="beginner" checked>

Listen for the reset Event Top ↑

A form fires a reset event when it is being reset. This is useful when the interface has messages or other UI state that should also be cleared.

form.addEventListener("reset", () => {
  message.textContent = "Form restored to default values.";
});

Reset Form Validation UI Top ↑

Resetting the controls does not automatically clear every custom error message, CSS class, or application variable you created. Clear that custom state in your reset handler when needed.

form.addEventListener("reset", () => {
  errorMessage.textContent = "";
  submitButton.disabled = true;
});

This pattern also connects naturally with the enable/disable submit button tutorial.

Common Mistakes Top ↑

• Do not expect reset() to clear controls that had non-empty initial values.
• Avoid naming a form control reset, because that can shadow the form's reset() method.
• Clear custom validation messages and state separately when your interface creates them.
• Use a normal reset button when no JavaScript-specific condition is required.

Subhendu Mohapatra

Author & Instructor at plus2net

I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.

About the author   Watch on YouTube

Connect: