Що робить form.reset()?
Визначення
form.reset()- це метод DOM-форми, який скидає всі поля до їхнього початкового (дефолтного) значення, наче користувач щойно відкрив сторінку.
1. Приклад роботи
<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>
<script>
const form = document.querySelector('#myForm');
const resetBtn = document.querySelector('#resetBtn');
resetBtn.addEventListener('click', () => {
form.reset(); // скидає форму через JS
});
</script>Що станеться:
- усі
<input>повернуться до значень, зазначених в атрибутіvalue; - якщо
valueне було, поле стане порожнім.
2. Приклад "наживо"
Якщо ввести:
| Поле | Було | Ввів користувач | Після form.reset() |
|---|---|---|---|
| username | "Tim" | "Andrew" | "Tim" |
| "test@example.com" | "andrew@example.com" | "test@example.com" |
Тобто reset() не очищає форму повністю,
а повертає її до початкового стану, заданого в HTML.
3. Якщо потрібно повністю очистити форму
Якщо хочеш очистити все до порожніх значень, незалежно від value, це можна зробити вручну:
form.querySelectorAll('input, textarea, select').forEach(el => el.value = '');або скинути й видалити атрибути value в HTML.
4. Відмінність від кнопки <button type="reset">
HTML-кнопка з type="reset" робить те саме:
<button type="reset">Reset</button>Це автоматичне скидання форми без JS.
Але в JS-логіці зручніше використовувати form.reset() - можна робити скидання програмно, наприклад після успішної відправки.
5. Приклад використання після відправки форми
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, або очищає їх, якщо дефолтних значень не було.
Коротка відповідь
Для співбесідиКоротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.