HTMLFormElement: reset — Ereignis · JavaScript-Referenz

Signatur

form.addEventListener("reset", handler)

Beschreibung

Das reset-Ereignis tritt an einem HTMLFormElement auf, wenn das Formular zurückgesetzt wird. Das passiert, wenn der Nutzer einen <button type="reset"> bzw. <input type="reset"> anklickt oder wenn im Skript form.reset() aufgerufen wird. Alle Steuerelemente erhalten danach wieder ihre Ausgangswerte aus dem HTML, also value-Attribut, checked, selected oder den Textinhalt von <textarea>.

Das Ereignis wird vor dem eigentlichen Zurücksetzen ausgelöst und lässt sich abbrechen. Mit event.preventDefault() verhindern Sie das Zurücksetzen, zum Beispiel nach einer Sicherheitsabfrage. Es steigt im DOM auf (bubbles), deshalb können Sie es auch per Ereignisdelegation an einem übergeordneten Element abfangen.

Sie registrieren einen Handler entweder mit form.addEventListener("reset", handler) oder über die Eigenschaft form.onreset = handler. Typische Einsatzfälle sind: vor dem Verwerfen von Eingaben nachfragen, eigenen Zustand zurücksetzen (Validierungsmeldungen, Vorschauen, Zähler, Zustand eines Frameworks) und Werte synchron halten, die JavaScript berechnet hat.

Parameter

Name	Typ	Default	Beschreibung
$type Pflicht	string		Der Ereignisname `"reset"`.
$handler Pflicht	(event: Event) => void		Callback, der ein normales `Event`-Objekt erhält. `event.target` ist das zurückgesetzte Formular.
$options	boolean \| AddEventListenerOptions	false	Optionale Einstellungen wie `once`, `capture` oder `signal`. `passive: true` passt hier nicht, weil `preventDefault()` dann ignoriert wird.

Rückgabewert

Typ

void

Beschreibung

addEventListener gibt nichts zurück. Das Ereignis selbst ist ein Event mit bubbles: true und cancelable: true.

Beispiele

Vor dem Zurücksetzen nachfragen (addEventListener)

const form = document.querySelector('#kontakt');

form.addEventListener('reset', (event) => {
  const ok = confirm('Alle Eingaben wirklich verwerfen?');
  if (!ok) {
    event.preventDefault(); // Zurücksetzen abbrechen
    console.log('Zurücksetzen abgebrochen');
  } else {
    console.log('Formular wird zurückgesetzt');
  }
});

Formular wird zurückgesetzt

Eigenen Zustand zurücksetzen mit onreset

const form = document.querySelector('#bestellung');
const fehler = form.querySelector('.fehlermeldungen');
const summe = form.querySelector('#summe');

form.onreset = () => {
  fehler.textContent = '';
  form.querySelectorAll('.ungueltig')
    .forEach((el) => el.classList.remove('ungueltig'));
  // Die Feldwerte sind hier noch alt, deshalb erst danach neu berechnen
  setTimeout(() => {
    summe.textContent = '0,00 €';
    console.log('Zustand zurückgesetzt');
  });
};

// Programmgesteuert auslösen: feuert ebenfalls reset
form.reset();

Zustand zurückgesetzt

Handler wieder entfernen mit removeEventListener

const form = document.querySelector('form');

const protokolliere = (event) => {
  console.log(`Reset an: ${event.target.id || 'unbenanntes Formular'}`);
};

form.addEventListener('reset', protokolliere);
form.reset(); // Handler läuft

form.removeEventListener('reset', protokolliere);
form.reset(); // keine Ausgabe mehr

// Alternative: form.onreset = null;

Reset an: unbenanntes Formular

Ereignisdelegation für mehrere Formulare

document.addEventListener('reset', (event) => {
  if (event.target instanceof HTMLFormElement) {
    console.log(`Formular "${event.target.name}" zurückgesetzt`);
  }
});

Formular "suche" zurückgesetzt

// Wichtig · Fallstricke

Zeitpunkt: Das Ereignis feuert vor dem Zurücksetzen. Im Handler haben die Felder also noch ihre alten Werte. Wenn Sie die zurückgesetzten Werte brauchen, lesen Sie sie verzögert aus, etwa mit setTimeout(…, 0) oder requestAnimationFrame.
Ausgangswerte statt leerer Felder: Zurückgesetzt wird auf die Werte aus dem HTML-Attribut (defaultValue, defaultChecked, defaultSelected), nicht auf leere Felder. Hat ein Skript defaultValue geändert, gilt dieser neue Wert.
Nicht betroffen: Werte, die JavaScript außerhalb der Formularfelder hält, zum Beispiel im Zustand von React oder Vue, werden nicht automatisch zurückgesetzt. Bei kontrollierten Komponenten muss der Zustand im Handler angepasst werden.
<input type="file"> wird geleert. <input type="hidden"> behält seinen Wert, weil value und defaultValue dort gleich sind.
Wenn Sie mit form.dispatchEvent(new Event('reset')) selbst ein Ereignis auslösen, werden die Felder nicht zurückgesetzt. Das bewirkt nur form.reset().
Reset-Buttons gelten aus Sicht der Benutzbarkeit als problematisch, weil man leicht versehentlich alle Eingaben verliert. Setzen Sie sie sparsam ein und fragen Sie am besten vorher nach.
Kompatibilität: Das Ereignis wird von allen Browsern seit Langem unterstützt, onreset ebenso.

Siehe auch

HTMLFormElement HTMLFormElement.reset() HTMLFormElement.requestSubmit() EventTarget.addEventListener() Event.preventDefault() Element: paste