In this original queue example, the author can filter by status and include archived records. Reset restores the starting filters. The summary is derived display text, so the application must repaint it after the controls have reset.
Declare the starting values in the form
<form id="filters">
<label>Status
<select name="status">
<option value="open" selected>Open</option>
<option value="closed">Closed</option>
</select>
</label>
<label>
<input type="checkbox" name="archived">
Include archived
</label>
<button type="reset">Reset filters</button>
</form>
<p id="summary" role="status"></p>
<script>
const form = document.querySelector('#filters');
const statusField = form.elements.namedItem('status');
const archiveField = form.elements.namedItem('archived');
const summary = document.querySelector('#summary');
function renderSummary() {
summary.textContent = statusField.value +
(archiveField.checked ? ' including archived' : ' excluding archived');
}
form.addEventListener('change', renderSummary);
form.addEventListener('reset', () => {
setTimeout(renderSummary, 0);
});
renderSummary();
</script>
Choose Closed and tick Include archived. The summary becomes “closed including archived.” Press Reset filters. Both the controls and the summary should return to “open excluding archived.”
The reset event runs before the reset algorithm has finished restoring the controls. Scheduling the summary calculation for a later task lets the native reset button finish its default action first. If your application cancels reset, that same calculation simply reads the controls that remain. The reset event reference, checked October 24, 2026, documents the event; the reset method reference describes the restored defaults.
Separate today's edit from a new default
For a text input, input.value = 'Closed' changes its current value. Setting input.defaultValue = 'Closed' changes the value a later reset restores. For checkboxes, the corresponding pair is checked and defaultChecked; a select option has selected and defaultSelected.
If preferences loaded from storage should become the new reset baseline, set the relevant defaults deliberately as part of loading that form. If they should only be a temporary edit, change the current properties. The DOM attribute and property guide explains why the markup and current field can disagree.
Decide what remains outside reset
Resetting form controls does not clear a separate result array, undo a server save or delete local storage. It also does not restore a control's disabled property to some earlier state. If the application changes those values, handle the intended reset behavior explicitly.
The summary above is recalculated from the restored controls. A real filtered list should run its filter from the same restored values. Avoid manually setting the summary to “All records” when the default status is Open; that creates a contradiction between what the form says and what the page shows.
Avoid masking the method
A control with name="reset" or id="reset" can mask the form's reset method. Rename that control, for example to resetFilters, before calling form.reset(). A native type="reset" button does not require a click handler that calls the method again.
The checkbox guide covers checked versus submitted values. Check reset with one nondefault select choice and one checkbox change, then inspect the actual results as well as the controls. If the user also expects saved preferences to disappear, give that separate action a clear label and implement its storage behavior explicitly.