Zdarzenia resetowania formularza i zarządzanie stanem

Wywołanie form.reset() lub kliknięcie <button type="reset"> emituje zdarzenie reset na formularzu. Każde pole powraca do wartości początkowej (określonej przez atrybut value albo pustej w przypadku nowych pól). Można nasłuchiwać tego zdarzenia, aby programowo reagować na resetowanie formularza.

Stan początkowy używany podczas resetowania określa właściwość defaultValue, defaultChecked lub defaultSelected — nie bieżąca wartość. Właściwości te odzwierciedlają atrybuty value/checked/selected w kodzie HTML, ustalone podczas parsowania i niezmieniane przez interakcję użytkownika.

Aby bieżąca wartość stała się nową wartością „domyślną” (dzięki czemu kolejne resety będą do niej powracać), należy ustawić input.defaultValue = input.value. Jest to przydatne po pomyślnym zapisaniu danych: kolejne resety przywrócą zapisany stan zamiast pierwotnie pustego formularza.

Zdarzenie reset jest emitowane przed przywróceniem wartości. Aby sprawdzić stan po resecie, należy odroczyć wykonanie do następnego mikrotyknięcia: form.addEventListener("reset", () => queueMicrotask(() => { ... use new values ... })). To często mylący szczegół dotyczący kolejności zdarzeń.

Jeśli w procedurze obsługi zdarzenia reset wywołają Państwo e.preventDefault(), resetowanie zostanie anulowane, a wartości pozostaną bez zmian. Jest to przydatne do wyświetlania potwierdzenia „czy na pewno?” w formularzach zawierających ważne dane użytkownika.

Aby sprawdzić, czy formularz został zmodyfikowany, należy porównać bieżące wartości z wartościami domyślnymi: const dirty = Array.from(form.elements).some(el => el.value !== el.defaultValue). Można w ten sposób włączać lub wyłączać przycisk zapisu albo wyświetlać potwierdzenie niezapisanych zmian.

Aby ostrzec użytkownika przed opuszczeniem strony z formularzem zawierającym niezapisane zmiany: window.addEventListener("beforeunload", (e) => { if (isDirty(form)) { e.preventDefault(); } }). Przeglądarki wyświetlają własny ogólny monit „opuścić stronę?”, a niestandardowe komunikaty nie są już obsługiwane we współczesnych przeglądarkach.

Przyciski resetowania przywracają wartości wszystkich pól po jednym przypadkowym kliknięciu, co często prowadzi do katastrofalnych skutków. W większości nowoczesnych interfejsów całkowicie się z nich rezygnuje lub ukrywa je za potwierdzeniem. Jeśli resetowanie jest potrzebne, należy umieścić przycisk z dala od przycisku wysyłania i rozważyć możliwość jednokrotnego cofnięcia.

W przypadku długich formularzy należy zapisywać stan w localStorage podczas zdarzeń input i przywracać go podczas ładowania strony. Warto dodać monit „Przywrócić wersję roboczą?”, aby użytkownicy nie tracili pracy po przypadkowym zamknięciu karty. Należy połączyć to z procedurami obsługi resetowania i wysyłania formularza, aby usuwać zapisany stan, gdy nie jest już potrzebny.

Niestandardowe elementy formularza (zbudowane jako komponenty webowe) uczestniczą w resetowaniu formularza za pośrednictwem ElementInternals: w metodzie formResetCallback należy przywrócić wartość domyślną. Jest to konieczne, gdy niestandardowy element opakowuje wewnętrzne pole input, które wymaga jawnego zresetowania.

Zadeklarowanie static formAssociated = true w klasie niestandardowego elementu i użycie this.attachInternals() udostępnia metody formResetCallback, formStateRestoreCallback, formDisabledCallback oraz formAssociatedCallback, umożliwiając integrację z cyklem życia formularza.

Do jakiej wartości powraca każde pole po wywołaniu form.reset()?

Zdarzenie reset jest emitowane podczas wykonywania form.reset(), a pola powracają do wartości defaultValue/defaultChecked/defaultSelected. Po zapisaniu danych można zaktualizować wartości domyślne, aby stały się nowym stanem przywracanym przez reset. Stan zmian można śledzić, porównując bieżące wartości z wartościami domyślnymi, a w przypadku długich formularzy zapisywać go w localStorage. beforeunload służy do ostrzegania przed opuszczeniem strony. Niestandardowe elementy można integrować za pomocą formAssociated i formResetCallback.