What does form.reset() do?
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
<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(); // resets the form through JS
});
</script>What happens:
- all
<input>elements return to the values specified in thevalueattribute; - 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" |
| "test@example.com" | "andrew@example.com" | "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:
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:
<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
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.
Short Answer
Interview readyA concise answer to help you respond confidently on this topic during an interview.