Formular-Reset-Ereignisse und Zustandsverwaltung
Behandeln Sie das Zurücksetzen eines Formulars und verfolgen Sie Feldzustände über Benutzerinteraktionen hinweg
Formular-Reset-Ereignisse und Zustandsverwaltung ist eine kostenlose HTML Academy-Lektion auf CoddyKit. Dies ist Lektion 4 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des HTML Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der HTML Academy-Kurs umfasst insgesamt 4 Lektionen.
Das reset-Ereignis
Der Aufruf von form.reset() oder ein Klick auf <button type="reset"> löst ein reset-Ereignis am Formular aus. Jedes Feld wird auf seinen Anfangswert zurückgesetzt (das value-Attribut oder bei neuen Eingabefeldern ein leerer Wert). Reagieren Sie auf das Ereignis, um programmgesteuert auf das Zurücksetzen zu reagieren.
Standardwerte
Der beim Zurücksetzen verwendete Anfangszustand wird durch die Eigenschaft defaultValue, defaultChecked oder defaultSelected bestimmt – nicht durch den aktuellen Wert. Diese Eigenschaften spiegeln die value-, checked- bzw. selected-Attribute im HTML wider. Sie werden beim Parsen gesetzt und durch Benutzerinteraktionen nicht verändert.
Standardwerte programmatisch aktualisieren
Damit ein aktueller Wert zum neuen „Standard“ wird (sodass nachfolgende Zurücksetzungen auf ihn zurückgehen), setzen Sie input.defaultValue = input.value. Das ist nach einem erfolgreichen Speichern nützlich: Künftige Zurücksetzungen stellen den gespeicherten Zustand statt des ursprünglich leeren Formulars wieder her.
form.addEventListener("submit", () => {
// After save, treat current as defaults
Array.from(form.elements).forEach((el) => {
if ("defaultValue" in el) el.defaultValue = el.value;
});
});Auf reset reagieren
Das reset-Ereignis wird vor dem Zurücksetzen der Werte ausgelöst. Um den Zustand nach dem Zurücksetzen zu prüfen, verschieben Sie die Prüfung in den nächsten Microtask: form.addEventListener("reset", () => queueMicrotask(() => { ... use new values ... })). Das Timing dieses Ereignisses ist ein häufiges Detail, das für Verwirrung sorgt.
Zurücksetzen verhindern
Wenn Sie in einem reset-Ereignishandler e.preventDefault() aufrufen, wird das Zurücksetzen abgebrochen – die Werte bleiben unverändert. Das ist nützlich für Bestätigungen wie „Sind Sie sicher?“ bei Formularen mit umfangreichen Benutzereingaben.
Änderungsstatus verfolgen
Vergleichen Sie die aktuellen Werte mit den Standardwerten, um festzustellen, ob das Formular geändert wurde: const dirty = Array.from(form.elements).some(el => el.value !== el.defaultValue). So können Sie eine Speicherschaltfläche aktivieren oder deaktivieren oder vor ungespeicherten Änderungen warnen.
Bestätigung vor dem Verlassen
Um den Benutzer beim Verlassen einer Seite vor einem geänderten Formular zu warnen: window.addEventListener("beforeunload", (e) => { if (isDirty(form)) { e.preventDefault(); } }). Browser zeigen ihren allgemeinen Dialog „Website verlassen?“ an; benutzerdefinierte Meldungen werden in modernen Browsern nicht mehr unterstützt.
Zurücksetzen-Schaltflächen sorgen meist für schlechte UX
Zurücksetzen-Schaltflächen setzen jedes Feld mit einem versehentlichen Klick zurück, oft mit katastrophalen Folgen. Die meisten modernen Benutzeroberflächen verzichten vollständig darauf oder verbergen sie hinter einer Bestätigung. Wenn Sie eine Zurücksetzfunktion benötigen, platzieren Sie sie weit entfernt von der Absende-Schaltfläche und erwägen Sie eine Rückgängig-Funktion in einem Schritt.
Persistenz des Formularzustands
Speichern Sie bei langen Formularen den Zustand bei input-Ereignissen in localStorage und stellen Sie ihn beim Laden wieder her. Kombinieren Sie dies mit einer Aufforderung wie „Entwurf wiederherstellen?“, damit Benutzer ihre Arbeit nicht durch versehentlich geschlossene Tabs verlieren. Löschen Sie den gespeicherten Zustand mit reset- oder submit-Handlern, sobald er nicht mehr benötigt wird.
form.addEventListener("input", () => {
localStorage.setItem("form-draft", JSON.stringify(new FormData(form)));
});Benutzerdefinierte Komponenten und reset
Benutzerdefinierte Formularelemente (als Web Components erstellt) nehmen über ElementInternals am Zurücksetzen des Formulars teil: Stellen Sie in Ihrer formResetCallback-Methode den Standardwert wieder her. Das ist erforderlich, wenn das benutzerdefinierte Element ein internes Eingabefeld kapselt, das explizit zurückgesetzt werden muss.
Formularassoziierte benutzerdefinierte Elemente
Wenn Sie static formAssociated = true in einer Klasse für ein benutzerdefiniertes Element deklarieren und this.attachInternals() verwenden, werden formResetCallback, formStateRestoreCallback, formDisabledCallback und formAssociatedCallback für die Integration in den Lebenszyklus des Formulars verfügbar.
Wissenscheck
Auf welchen Wert wird jedes Feld zurückgesetzt, wenn form.reset() aufgerufen wird?
Zusammenfassung
Das reset-Ereignis wird ausgelöst, wenn form.reset() ausgeführt wird; Felder werden auf defaultValue/defaultChecked/defaultSelected zurückgesetzt. Aktualisieren Sie die Standardwerte nach dem Speichern, damit sie zum neuen Zurücksetzungszustand werden. Verfolgen Sie den Änderungsstatus durch den Vergleich aktueller Werte mit den Standardwerten, speichern Sie bei langen Formularen den Zustand in localStorage und verwenden Sie beforeunload für Warnungen beim Verlassen der Seite. Benutzerdefinierte Elemente werden über formAssociated und formResetCallback integriert.
Häufig gestellte Fragen
Ist die Lektion „Formular-Reset-Ereignisse und Zustandsverwaltung“ kostenlos?
Ja — der vollständige Text von „Formular-Reset-Ereignisse und Zustandsverwaltung“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des HTML Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der HTML Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „Formular-Reset-Ereignisse und Zustandsverwaltung“?
Behandeln Sie das Zurücksetzen eines Formulars und verfolgen Sie Feldzustände über Benutzerinteraktionen hinweg Du übst HTML Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um HTML Academy zu starten?
Keine Vorkenntnisse erforderlich. HTML Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 4 von 4.
Wie lange dauert die Lektion „Formular-Reset-Ereignisse und Zustandsverwaltung“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser HTML Academy-Lektion Code schreiben und ausführen?
Ja. Jede HTML Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- Die FormData API
- Die Constraint Validation API
- reportValidity und setCustomValidity
- Formular-Reset-Ereignisse und Zustandsverwaltung