Suggest an edit

Improve this article

Refine the answer for “What does form.reset() do?”. 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)

## Definition

> `form.reset()` is a DOM form method that **resets all fields to their initial (default) value**,
> as if the user had just opened the page.

## 1. Example of usage

```javascript
<form id="myForm">
  <input type="text" name="username" value="Tim">
  <input type="email" name="email" value="test@example.com">
  <button type="reset">Reset via HTML</button>
  <button type="button" id="resetBtn">Reset via JS</button>
</form>

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

What happens:

- all `<input>` elements return to the values specified in the `value` attribute;
- if there was no `value`, the field becomes **empty**.

## 2. A "live" example

If you enter:

| Field | Was | User entered | After `form.reset()` |
| --- | --- | --- | --- |
| username | "Tim" | "Andrew" | "Tim" |
| email | "[test@example.com](mailto:test@example.com)" | "[andrew@example.com](mailto:andrew@example.com)" | "[test@example.com](mailto:test@example.com)" |

So `reset()` **does not fully clear the form** -
it **returns it to its initial state**, as defined in the HTML.

## 3. If you need to fully clear the form

If you want to clear **everything down to empty values**, regardless of `value`, you can do it manually:

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

or reset and remove the `value` attributes in the HTML.

## 4. Difference from the `<button type="reset">` button

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

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

This is an **automatic reset** of the form without JS.
But in JS logic it's more convenient to use `form.reset()` - you can reset it **programmatically**, for example after a successful submission.

## 5. Example of usage after submitting the form

```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 submission
});
```

## Summary

| What it does | Example |
| --- | --- |
| Returns fields to their initial state | `form.reset()` |
| Works like `<button type="reset">` | Yes |
| Does not fully clear if there is a `value` in HTML | Yes |
| Useful after a successful form submission | Yes |

> **A simple way to remember it:**
> `form.reset()` is a "restart of the form",
> which returns all fields to the values set in the HTML,
> or clears them if there were no default values.

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

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.