HTML onreset Attribute

Introduction

The onreset attribute is an inline event handler for the reset event on a <form> element. It runs when the form is reset to its initial values — typically when the user clicks a <input type="reset"> or <button type="reset"> button, or when your code calls form.reset(). Use it to show confirmation feedback, clear custom preview UI, or reset related widgets that are not form controls. Call event.preventDefault() to cancel the reset. Prefer addEventListener("reset", …) in production.

What You’ll Learn

Purpose of onreset Attribute

The primary purpose of onreset is to run custom logic when a form returns to its default state — for example showing a “Form cleared” message, wiping a live preview div, or resetting validation styling that the browser does not clear automatically.

Native reset only restores form controls to their initial value, checked, or selected state. Anything outside the form — or custom JavaScript state — may need your handler to clean up.

📝 Syntax

Set onreset on <form>, or assign form.onreset in JavaScript:

<form onreset="handleReset()">
  <input type="text" name="name">
  <input type="reset" value="Reset">
</form>

<script>
  form.onreset = handleReset;
  form.addEventListener("reset", handleReset);
</script>

Syntax Rules

• Value is JavaScript executed when the reset event fires on the form.
• Valid on <form> elements only.
• Triggered by type="reset" buttons or form.reset().
• Restores controls to values from when the page loaded (or last programmatic set).
• Use event.preventDefault() in listeners to cancel the reset.
• Modern alternative: form.addEventListener("reset", handler).
• Not for individual inputs — attach to the parent form.

💎 Values

The onreset attribute accepts a string of JavaScript code:

• onreset="handleReset()" — Call a named function.
• onreset="status.textContent = 'Cleared'" — Inline statement.
• JavaScript: form.onreset = () => { … } — property assignment.

function handleReset(event) {
  status.textContent = "Form has been reset!";
  preview.textContent = "";
  // event.preventDefault(); // uncomment to cancel reset
}

form.addEventListener("reset", handleReset);

Applicable Elements

onreset vs onsubmit vs form.reset()

Examples Gallery

Inline form handler, dynamic assignment, and clearing a custom preview with addEventListener.

<form onreset="resetForm()">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name">
  <input type="reset" value="Reset">
</form>

<script>
  function resetForm() {
    document.getElementById("status").textContent = "Form has been reset!";
  }
</script>

<script>
  document.getElementById("dynamicForm").onreset = function () {
    log.textContent = "This form is being reset!";
  };
</script>

form.addEventListener("reset", function () {
  setTimeout(function () {
    preview.textContent = "Preview: (empty)";
  }, 0);
});

♿ Accessibility

• Label reset buttons clearly — Use text like “Clear form” or “Reset” — not icon-only buttons without aria-label.
• Announce resets — Use aria-live="polite" on status text when the form is cleared.
• Confirm destructive clears — If reset loses a lot of work, ask for confirmation before allowing it.
• Do not remove reset without reason — Users expect a way to start over on long forms.
• Restore focus — After reset, move focus to the first field or a logical starting point.

💡 Best Practices