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

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

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

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

Контент

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

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

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

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

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

## Визначення

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

## 1. Приклад роботи

```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(); // скидає форму через JS
  });
</script>
```

Що станеться:

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

## 2. Приклад "наживо"

Якщо ввести:

| Поле | Було | Ввів користувач | Після `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)" |

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

## 3. Якщо потрібно повністю очистити форму

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

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

або скинути й видалити атрибути `value` в HTML.

## 4. Відмінність від кнопки `<button type="reset">`

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

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

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

## 5. Приклад використання після відправки форми

```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">` | Так |
| Не очищає повністю, якщо є `value` в HTML | Так |
| Корисно після успішної відправки форми | Так |

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

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

Для рев’юера

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

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