Метод form.reset()

JavaScriptJunior~2 хв читання

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>

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

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

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.