Signatur
Beschreibung
Die Methode reset() stellt für jedes Steuerelement eines <form>-Elements den Standardwert wieder her. Maßgeblich ist dabei nicht der Wert beim Laden der Seite, sondern der im Markup bzw. DOM hinterlegte Standard: das value-Attribut (defaultValue) bei <input>, das checked-Attribut (defaultChecked) bei Checkboxen und Radiobuttons, das selected-Attribut (defaultSelected) bei <option> und der Textinhalt bei <textarea>.
Vor dem Zurücksetzen feuert das Formular ein abbrechbares reset-Event. Ruft ein Listener event.preventDefault() auf, bleiben die Werte unverändert. So lassen sich z. B. Sicherheitsabfragen („Wirklich alle Eingaben verwerfen?“) umsetzen.
Typische Einsatzfälle sind das Leeren eines Formulars nach erfolgreichem Absenden per fetch(), „Abbrechen“-Schaltflächen in Dialogen oder das Zurücksetzen von Filterformularen. Die Methode löst keine input- oder change-Events auf den einzelnen Feldern aus – wer davon abhängige Zustände (z. B. in einem Framework) pflegt, muss diese selbst aktualisieren.
Beispiele
Formular nach erfolgreichem Absenden leeren
const form = document.querySelector('#kontakt');
form.addEventListener('submit', async (event) => {
event.preventDefault();
const response = await fetch('/api/kontakt', {
method: 'POST',
body: new FormData(form)
});
if (response.ok) {
form.reset(); // alle Felder auf Standardwerte
console.log('Nachricht gesendet, Formular zurückgesetzt');
}
});Zurücksetzen mit Sicherheitsabfrage verhindern
const form = document.querySelector('#profil');
form.addEventListener('reset', (event) => {
if (!confirm('Alle Änderungen verwerfen?')) {
event.preventDefault(); // reset() wird abgebrochen
}
});
document.querySelector('#abbrechen').addEventListener('click', () => {
form.reset();
});Standardwert statt Ladewert: defaultValue beachten
// <form id="f"><input name="stadt" value="Berlin"></form>
const form = document.querySelector('#f');
const input = form.elements.stadt;
input.value = 'Hamburg';
form.reset();
console.log(input.value); // Berlin
// Neuen Standard festlegen (ändert das value-Attribut)
input.defaultValue = 'München';
input.value = 'Köln';
form.reset();
console.log(input.value); // MünchenAbhängige UI nach reset() synchronisieren
const form = document.querySelector('#filter');
const zaehler = document.querySelector('#anzahl');
const aktualisiere = () => {
const aktiv = form.querySelectorAll('input[type=checkbox]:checked').length;
zaehler.textContent = `${aktiv} Filter aktiv`;
};
form.addEventListener('change', aktualisiere);
// reset() feuert kein change – daher nach dem reset-Event neu berechnen
form.addEventListener('reset', () => setTimeout(aktualisiere));
document.querySelector('#alle-loeschen').addEventListener('click', () => form.reset());// Wichtig · Fallstricke
- Standardwert ≠ leer: Felder mit
value-Attribut werden auf diesen Wert gesetzt, nicht geleert. Zum vollständigen Leeren müssen Felder einzeln bearbeitet oderdefaultValueangepasst werden. - Das reset-Event feuert vor dem Zurücksetzen. Wer im Listener die neuen Werte lesen will, muss die Auswertung verzögern (z. B. mit
setTimeout). - Es werden keine
input-/change-Events auf den Feldern ausgelöst; kontrollierte Komponenten in React, Vue usw. bekommen davon nichts mit. <input type="hidden">wird nicht verändert; beitype="file"wird die Auswahl geleert.- Namenskonflikt: Enthält das Formular ein Element mit
name="reset"oderid="reset", überschattet es die Methode –form.resetist dann das Element. Abhilfe:HTMLFormElement.prototype.reset.call(form). - Auch Felder außerhalb des Formulars mit
form="id"-Attribut werden zurückgesetzt. Validierungszustände (:user-invalid) werden ebenfalls zurückgesetzt. - Seit jeher in allen Browsern unterstützt.