Eventi di reset dei moduli e gestione dello stato

La chiamata a form.reset() o il clic su <button type="reset"> emette un evento reset sul modulo. Ogni campo torna al suo valore iniziale (l'attributo value, oppure vuoto per gli input appena creati). Ascolti l'evento per reagire programmaticamente al reset.

Lo stato iniziale usato dal reset è la proprietà defaultValue, defaultChecked o defaultSelected, non il valore corrente. Queste proprietà riflettono gli attributi value/checked/selected nell'HTML, impostati al momento del parsing e non modificati dall'interazione dell'utente.

Per rendere un valore corrente il nuovo valore "predefinito" (in modo che i reset successivi ripristinino quello), imposti input.defaultValue = input.value. È utile dopo un salvataggio riuscito: i reset futuri ripristineranno lo stato salvato invece del modulo inizialmente vuoto.

L'evento reset viene emesso prima del ripristino dei valori. Per esaminare lo stato successivo al reset, rimandi l'operazione al microtask seguente: form.addEventListener("reset", () => queueMicrotask(() => { ... use new values ... })). Questo dettaglio relativo alla temporizzazione dell'evento crea spesso confusione.

Se chiama e.preventDefault() in un gestore dell'evento reset, il reset viene annullato e i valori rimangono invariati. È utile per chiedere una conferma del tipo "È sicuro?" nei moduli che contengono dati importanti inseriti dall'utente.

Confronti i valori correnti con quelli predefiniti per sapere se il modulo è stato modificato: const dirty = Array.from(form.elements).some(el => el.value !== el.defaultValue). Lo usi per abilitare o disabilitare un pulsante di salvataggio oppure per mostrare una conferma in caso di modifiche non salvate.

Per avvisare l'utente prima che lasci una pagina con un modulo modificato: window.addEventListener("beforeunload", (e) => { if (isDirty(form)) { e.preventDefault(); } }). I browser mostrano la propria richiesta generica "Vuole lasciare il sito?"; nei browser moderni i messaggi personalizzati non sono più supportati.

I pulsanti di reset ripristinano ogni campo con un solo clic accidentale, spesso con conseguenze gravi. La maggior parte delle interfacce moderne li omette completamente oppure li nasconde dietro una conferma. Se le serve un reset, lo posizioni lontano dal pulsante di invio e valuti la possibilità di offrire un annullamento in un solo passaggio.

Per i moduli lunghi, salvi lo stato in localStorage in risposta agli eventi input e lo ripristini al caricamento. Abbini questa funzionalità a una richiesta "Ripristinare la bozza?", così gli utenti non perderanno il lavoro in caso di chiusura accidentale della scheda. Combini questa logica con i gestori di reset e invio per cancellare lo stato salvato quando non è più necessario.

Gli elementi personalizzati dei moduli (realizzati come web component) partecipano al reset del modulo tramite ElementInternals: nel metodo formResetCallback, ripristini il valore predefinito. È necessario quando l'elemento personalizzato include un input interno che richiede un reset esplicito.

Dichiarando static formAssociated = true nella classe di un elemento personalizzato e usando this.attachInternals(), espone formResetCallback, formStateRestoreCallback, formDisabledCallback e formAssociatedCallback per integrarli nel ciclo di vita del modulo.

A quale valore torna ogni campo quando viene chiamato form.reset()?

L'evento reset viene emesso quando viene eseguito form.reset(); i campi tornano a defaultValue/defaultChecked/defaultSelected. Aggiorni i valori predefiniti dopo un salvataggio per renderli il nuovo stato del reset. Tracci lo stato di modifica confrontando i valori correnti con quelli predefiniti, salvi lo stato in localStorage per i moduli lunghi e usi beforeunload per gli avvisi durante la navigazione. Gli elementi personalizzati si integrano tramite formAssociated e formResetCallback.