The form.reset() method

JavaScriptJunior~2 min read

form.reset() is a DOM form method that resets every field to its initial (default) value, as if the user had just opened the page. It does not clear the form to nothing, it restores the state declared in the HTML.

Theory

TL;DR

form.reset() returns fields to the values from the value, checked and selected attributes.
A field with no default value becomes empty after the reset.
This is not "clearing the form": values declared in the HTML stay in place.
<button type="reset"> does the same thing, without any JavaScript.
form.reset() is convenient programmatically, for example right after a successful fetch.
To really clear everything you have to walk the fields yourself and set an empty value.

Quick example

javascript

const form = document.querySelector('#myForm');

form.reset(); // every field goes back to the value declared in the HTML

What reset() actually does

html

<form id="myForm">
  <input type="text" name="username" value="Maria">
  <input type="email" name="email" value="maria@example.com">
  <button type="reset">Reset with HTML</button>
  <button type="button" id="resetBtn">Reset with JS</button>
</form>

<script>
  const form = document.querySelector('#myForm');
  const resetBtn = document.querySelector('#resetBtn');

  resetBtn.addEventListener('click', () => {
    form.reset(); // resets the form from JS
  });
</script>

What happens:

every <input> goes back to the value given in its value attribute;
if there was no value, the field becomes empty.

Concretely, if the user typed something:

Field	In the HTML	User typed	After `form.reset()`
username	`Maria`	`Oleh`	`Maria`
email	`maria@example.com`	`oleh@example.com`	`maria@example.com`

So reset() does not clear the form completely, it returns it to the initial state declared in the HTML.

If you need to clear the form completely

When you need to wipe everything to empty values, regardless of value, do it by hand:

javascript

form.querySelectorAll('input, textarea, select').forEach((el) => {
  el.value = '';
});

An alternative is to drop the value attributes from the markup, and then a plain reset() also leaves the fields empty.

The difference from a type="reset" button

An HTML button with type="reset" does the same thing:

html

<button type="reset">Reset</button>

That is an automatic reset of the form without JavaScript. In JS logic, though, form.reset() is handier: the reset can be triggered programmatically, at the right moment, for example after a successful submission.

Resetting after a submission

javascript

form.addEventListener('submit', async (e) => {
  e.preventDefault();

  const data = Object.fromEntries(new FormData(form));

  await fetch('/api/send', {
    method: 'POST',
    body: JSON.stringify(data),
    headers: { 'Content-Type': 'application/json' }
  });

  alert('Data sent!');
  form.reset(); // clear the fields after sending
});

Summary table

What it does	Example
Returns fields to their initial state	`form.reset()`
Behaves like `<button type="reset">`	Yes
Does not fully clear fields that have `value` in the HTML	Yes
Useful after a successful submission	Yes

Just remember: form.reset() is a "restart of the form" that returns every field to the value declared in the HTML, or empties it when there was no default.

Common mistakes

Expecting reset() to leave the form empty. If the markup has a value, the field goes back to exactly that.
Confusing form.reset() with form.submit(): the first restores state, the second sends the data (and bypasses the submit handler while doing it).
Forgetting that values assigned from JS through el.value = '...' do not become defaults: after reset() they disappear, because the default lives in the value attribute, not in the property.
Calling reset() before the request finished. If the server returns an error, the user is left with an empty form and no data.
Assuming reset() clears React state for controlled fields. In controlled components the value comes from state, so that is what must be reset.
Ignoring the form's reset event: it can be intercepted and, if needed, cancelled with event.preventDefault().

Short Answer

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.