Запропонувати правку

Покращити цю статтю

Допрацюйте відповідь до «Метод form.reset()». Ваші зміни проходять модерацію перед публікацією.

Потрібне підтвердження

Контент

Що ви змінюєте

Заголовок (UA)

Коротка відповідь (UA)

Показується над повною відповіддю для швидкого нагадування.

Відповідь (UA)

**`form.reset()` це метод DOM-форми, який скидає всі поля до їхнього початкового (дефолтного) значення, так ніби користувач щойно відкрив сторінку.** Він не очищує форму «в нуль», а повертає її до стану, заданого в HTML.

## Теорія

### TL;DR
- `form.reset()` повертає поля до значень з атрибутів `value`, `checked`, `selected`.
- Поле без дефолтного значення після скидання стає порожнім.
- Це не «очищення форми»: значення з HTML залишаються на місці.
- Те саме робить `<button type="reset">`, але без JavaScript.
- `form.reset()` зручний програмно, наприклад одразу після успішного `fetch`.
- Щоб справді очистити все, треба вручну пройтися по полях і виставити порожній `value`.

### Швидкий приклад
```javascript
const form = document.querySelector('#myForm');

form.reset(); // усі поля повертаються до значень, заданих у HTML
```

### Що саме робить reset()
```html
<form id="myForm">
  <input type="text" name="username" value="Maria">
  <input type="email" name="email" value="maria@example.com">
  <button type="reset">Скинути через HTML</button>
  <button type="button" id="resetBtn">Скинути через JS</button>
</form>

resetBtn.addEventListener('click', () => {
    form.reset(); // скидає форму через JS
  });
</script>
```

Що відбудеться:

- усі `<input>` повернуться до значень, указаних в атрибуті `value`;
- якщо `value` не було, поле стане **порожнім**.

Наочно, якщо користувач щось ввів:

| Поле | Було в HTML | Ввів користувач | Після `form.reset()` |
| --- | --- | --- | --- |
| username | `Maria` | `Oleh` | `Maria` |
| email | `maria@example.com` | `oleh@example.com` | `maria@example.com` |

Тобто `reset()` **не очищує форму повністю**, а **повертає її до початкового стану**, заданого в HTML.

### Якщо потрібно повністю очистити форму
Коли треба стерти **все до порожніх значень**, незалежно від `value`, це робиться вручну:

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

Альтернатива: прибрати атрибути `value` з розмітки, і тоді звичайний `reset()` теж дасть порожні поля.

### Відмінність від кнопки type="reset"
HTML-кнопка з `type="reset"` робить те саме:

```html
<button type="reset">Скинути</button>
```

Це **автоматичне скидання** форми без JavaScript. Але в JS-логіці зручніше використовувати `form.reset()`: скидання можна виконати **програмно**, у потрібний момент, наприклад після успішної відправки.

### Скидання після відправки форми
```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('Дані відправлено!');
  form.reset(); // очистити поля після відправки
});
```

### Підсумкова таблиця

| Що робить | Приклад |
| --- | --- |
| Повертає поля до початкового стану | `form.reset()` |
| Працює як `<button type="reset">` | Так |
| Не очищує повністю, якщо в HTML є `value` | Так |
| Корисно після успішної відправки форми | Так |

> **Запам'ятайте просто:** `form.reset()` це «перезапуск форми», який повертає всі поля до значень, заданих у HTML, або очищує їх, якщо дефолтних значень не було.

### Типові помилки
- Чекати, що `reset()` зробить форму порожньою. Якщо в розмітці є `value`, поле повернеться саме до нього.
- Плутати `form.reset()` з `form.submit()`: перший відновлює стан, другий відправляє дані (до того ж в обхід обробника `submit`).
- Забувати, що значення, виставлені з JS через `el.value = '...'`, не стають дефолтними: після `reset()` вони зникнуть, бо дефолт живе в атрибуті `value`, а не у властивості.
- Викликати `reset()` до того, як запит завершився. Якщо сервер поверне помилку, користувач залишиться з порожньою формою і без даних.
- Думати, що `reset()` скине React-стан контрольованих полів. У контрольованих компонентах значення задає стан, тож скидати треба саме його.
- Ігнорувати подію `reset` на формі: її можна перехопити і за потреби скасувати через `event.preventDefault()`.

Markdown · перетягуйте зображення · ⌘B / ⌘I шорткати565 слів

Для рев’юера

Примітка для модератора (необов’язково)

Бачить лише модератор. Прискорює рев’ю.