A reset button returns form controls to their initial values as represented by the document.
Make this comfortable
HTML reset button: restore initial form values, not a saved record
Use it for a real task
An editor starts with a server-rendered note and changes it locally. Reset discards those unsaved edits and returns to the initial note; it does not fetch the latest server value, erase a saved record, or ask for confirmation. That makes the control risky in long forms. Where an accidental reset would lose substantial work, a clearly named cancel path is often the safer product decision.
<form action="/receipts/R-47/note" method="post">
<label for="receipt-note">Internal note</label>
<textarea id="receipt-note" name="note">Review the disputed line item.</textarea>
<button type="submit">Save note</button>
<button type="reset">Restore initial note</button>
</form>What the markup guarantees
The initial value is the text inside textarea in this response. If the server record changes after render, reset will not retrieve it. The save endpoint still validates ownership and the submitted note.
Cost and limits
Reset itself is cheap and native. Its cost is user error and lost work, particularly when a large form puts reset near submit or assigns both controls similar styles.
Common Mistakes
- Do not label reset as Delete.
- Do not claim it loads the newest server state.
- Do not place a destructive reset next to save without a clear distinction.
Connected lessons
html
forms