Suggest an edit

Improve this article

Refine the answer for “The form.reset() method”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

**`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>

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()`.

Markdown · drag & drop images · ⌘B / ⌘I shortcuts663 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.