Clicking a reset control restores every field in the form to whatever value it had when the page first loaded (i.e. whatever was set via `value`, `checked`, or `selected` in the HTML) — it does NOT necessarily clear fields to blank; a field that started pre-filled will return to that pre-filled state, not to empty. This distinction trips up many developers who expect 'reset' to mean 'blank everything'.
1Understanding Reset
Clicking a reset control restores every field in the form to whatever value it had when the page first loaded (i.e. whatever was set via value, checked, or selected in the HTML) — it does NOT necessarily clear fields to blank; a field that started pre-filled will return to that pre-filled state, not to empty. This distinction trips up many developers who expect 'reset' to mean 'blank everything'.
Reset buttons are far less common in modern form design than they used to be — accidentally clicking one can wipe out everything a user just carefully typed, which is a frustrating experience most modern UIs deliberately avoid.
<form>
<input type="text" name="city" value="New York">
<button type="reset">Reset</button>
</form>2Practical Example
Here is a real-world application of Reset showing how it is used in production HTML.
<!-- Reset does NOT clear this back to empty — it restores the original checked state -->
<input type="checkbox" name="newsletter" checked>
<button type="reset">Reset</button>3Best Practices
Follow these guidelines when working with Reset:
1. Think carefully before including a reset button at all — it's a common source of accidental data loss for users
2. Remember reset restores original HTML default values, not necessarily blank fields
3. If you do include one, style it clearly differently from the submit button to reduce accidental clicks
Tip: Reset buttons are far less common in modern form design than they used to be — accidentally clicking one can wipe out everything a user just carefully typed, which is a frustrating experience most modern UIs deliberately avoid.
<form>
<input type="text" name="city" value="New York">
<button type="reset">Reset</button>
</form>