Événements de réinitialisation des formulaires et gestion de l’état
Gérez la réinitialisation d’un formulaire et suivez l’état des champs pendant les interactions.
Événements de réinitialisation des formulaires et gestion de l’état est une leçon HTML Academy gratuite sur CoddyKit. Ceci est la leçon 4 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage HTML Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours HTML Academy comprend 4 leçons au total.
Événement reset
Appeler form.reset() ou cliquer sur <button type="reset"> déclenche un événement reset sur le formulaire. Chaque champ revient à sa valeur initiale (l’attribut value, ou une valeur vide pour les champs nouvellement créés). Écoutez cet événement pour réagir à la réinitialisation par programmation.
Valeurs par défaut
L’état initial utilisé par la réinitialisation correspond à la propriété defaultValue, defaultChecked ou defaultSelected, et non à la valeur actuelle. Ces propriétés reflètent les attributs value/checked/selected du HTML, définis lors de l’analyse et inchangés par les interactions de l’utilisateur.
Mettre à jour les valeurs par défaut par programmation
Pour faire d’une valeur actuelle la nouvelle valeur « par défaut » (afin que les réinitialisations suivantes reviennent à cette valeur), définissez input.defaultValue = input.value. C’est utile après un enregistrement réussi : les réinitialisations futures reviendront à l’état enregistré plutôt qu’au formulaire vide d’origine.
form.addEventListener("submit", () => {
// After save, treat current as defaults
Array.from(form.elements).forEach((el) => {
if ("defaultValue" in el) el.defaultValue = el.value;
});
});Écouter l’événement reset
L’événement reset est déclenché avant le rétablissement des valeurs. Pour examiner l’état après la réinitialisation, différez le traitement jusqu’à la microtâche suivante : form.addEventListener("reset", () => queueMicrotask(() => { ... use new values ... })). Le moment précis du déclenchement de cet événement est souvent déroutant.
Empêcher la réinitialisation
Si vous appelez e.preventDefault() dans un gestionnaire de l’événement reset, la réinitialisation est annulée : les valeurs restent inchangées. C’est utile pour demander une confirmation avant de réinitialiser des formulaires contenant des saisies importantes.
Suivi de l’état modifié
Comparez les valeurs actuelles aux valeurs par défaut pour savoir si le formulaire a été modifié : const dirty = Array.from(form.elements).some(el => el.value !== el.defaultValue). Utilisez cette information pour activer ou désactiver un bouton d’enregistrement, ou pour afficher une confirmation en cas de modifications non enregistrées.
Confirmation avant la fermeture de la page
Pour avertir l’utilisateur avant qu’il quitte une page contenant un formulaire modifié : window.addEventListener("beforeunload", (e) => { if (isDirty(form)) { e.preventDefault(); } }). Les navigateurs affichent leur boîte de dialogue générique « quitter le site ? » ; les messages personnalisés ne sont plus pris en charge par les navigateurs modernes.
Les boutons de réinitialisation offrent généralement une mauvaise expérience
Les boutons de réinitialisation réinitialisent tous les champs en un seul clic accidentel, souvent avec des conséquences désastreuses. La plupart des interfaces modernes les omettent complètement ou les placent derrière une confirmation. Si vous avez besoin d’une réinitialisation, éloignez le bouton de celui de soumission et envisagez une annulation en une étape.
Persistance de l’état du formulaire
Pour les formulaires longs, enregistrez l’état dans localStorage lors des événements de saisie et restaurez-le au chargement. Ajoutez une invite « Restaurer le brouillon ? » afin que les utilisateurs ne perdent pas leur travail après la fermeture accidentelle d’un onglet. Combinez cela avec des gestionnaires de réinitialisation et de soumission pour effacer l’état enregistré lorsqu’il n’est plus nécessaire.
form.addEventListener("input", () => {
localStorage.setItem("form-draft", JSON.stringify(new FormData(form)));
});Composants personnalisés et reset
Les éléments de formulaire personnalisés (créés comme composants web) participent à la réinitialisation du formulaire via ElementInternals : dans votre méthode formResetCallback, restaurez la valeur par défaut. C’est nécessaire lorsque l’élément personnalisé encapsule un champ de saisie interne qui doit être réinitialisé explicitement.
Éléments personnalisés associés aux formulaires
Déclarer static formAssociated = true dans la classe d’un élément personnalisé et utiliser this.attachInternals() expose formResetCallback, formStateRestoreCallback, formDisabledCallback et formAssociatedCallback pour intégrer l’élément au cycle de vie du formulaire.
Vérification des connaissances
À quelle valeur chaque champ revient-il lorsque form.reset() est appelé ?
Résumé
L’événement reset est déclenché lorsque form.reset() s’exécute ; les champs reviennent à defaultValue/defaultChecked/defaultSelected. Mettez à jour les valeurs par défaut après un enregistrement pour en faire le nouvel état de réinitialisation. Suivez l’état modifié en comparant les valeurs actuelles aux valeurs par défaut, conservez l’état dans localStorage pour les formulaires longs et utilisez beforeunload pour avertir l’utilisateur avant une navigation. Les éléments personnalisés s’intègrent via formAssociated et formResetCallback.
Questions Fréquemment Posées
La leçon « Événements de réinitialisation des formulaires et gestion de l’état » est-elle gratuite ?
Oui — le texte complet de « Événements de réinitialisation des formulaires et gestion de l’état » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours HTML Academy, passe à CoddyKit PRO. Le cours HTML Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Événements de réinitialisation des formulaires et gestion de l’état » ?
Gérez la réinitialisation d’un formulaire et suivez l’état des champs pendant les interactions. Tu pratiques HTML Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer HTML Academy ?
Aucune expérience préalable n'est requise. HTML Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 4 sur 4.
Combien de temps prend la leçon « Événements de réinitialisation des formulaires et gestion de l’état » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon HTML Academy ?
Oui. Chaque leçon HTML Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- L’API `FormData`
- L’API de validation des contraintes
- `reportValidity` et `setCustomValidity`
- Événements de réinitialisation des formulaires et gestion de l’état