De nombreux sites web utilisent des formulaires pour permettre aux utilisateurs de parcourir leurs programmes et leurs fonctionnalités. Par conséquent, certaines personnes peuvent souhaiter que leurs informations personnelles soient effacées après avoir appuyé sur le bouton « Envoyer ». D’autres peuvent avoir un problème avec la fonction d’autocomplétion, car elle peut perturber leurs soumissions.
Quoi qu’il en soit, il existe des solutions rapides que vous pouvez appliquer en utilisant quelques lignes de HTML. L’essentiel est d’appliquer la méthode qui vous semble la plus confortable. Vous pouvez également choisir d’appliquer l’une ou l’autre de ces méthodes en fonction des besoins de votre site web.
Avant de passer aux solutions concrètes, j’aimerais remercier TestDinBolig.dk et Led-strips.dk d’avoir fait de ce guide une réalité.
La solution de l' »autocomplétion désactivée
Comme pour tout ce qui concerne le langage HTML, il est utile de commencer par les solutions les plus élémentaires. Dans le cas présent, il s’agit d’un simple formulaire qui comporte quelques lignes pour supprimer la fonctionnalité de « remplissage automatique » présente sur la plupart des sites web.
Bien que cela puisse être pratique pour les personnes paresseuses qui n’aiment pas remplir des formulaires, cela peut aussi être une plaie pour les programmeurs HTML. Ces fonctionnalités font que la réinitialisation des formulaires est presque inutile, puisque le formulaire remplit automatiquement les détails pour l’utilisateur.
Voici un exemple qui permet de se débarrasser de la fonction d’autocomplétion.
Nom d’utilisateur :
Courriel :
Si vous regardez bien, vous verrez que cette solution est très simple. Elle inclut un autocomplete= »off » pour supprimer la fonction de remplissage automatique. Ainsi, il n’y aura plus de détails remplis automatiquement chaque fois qu’un utilisateur remplira le formulaire. Si votre projet vise à supprimer toute atteinte à la vie privée, cet outil peut s’avérer très utile.
N’oubliez pas que l’option autocomplete= »off » est facultative. La plupart des gens souhaitent que leurs données soient remplies automatiquement pour des raisons de commodité. Après tout, il est fatigant de saisir de temps en temps son nom complet, son adresse électronique, son adresse personnelle et d’autres informations personnelles. Mais si la protection de la vie privée et la suppression des données sont vos principales préoccupations, la suppression du remplissage automatique est une solution rapide.
Utiliser Ajax pour réinitialiser les soumissions de formulaires
Si vous souhaitez aller au-delà des lignes de commande HTML de base, il existe également des solutions basées sur une variété de techniques AJAX. Voici les plus couramment utilisées :
Utilisation d’un formulaire HTML par AJAX
Nom :
Courriel :
Dans les lignes ci-dessus, vous verrez que le formulaire HTML utilise AJAX pour les soumissions. Comme dans l’exemple précédent, il n’y a pas lieu de s’inquiéter si vous êtes débutant.
Cependant, vous devez vous souvenir de certains éléments cruciaux du code :
Dans ce cas, le champ ne sera pas vide. Au lieu de cela, il affichera « Jean Dupont ». Vous pouvez également configurer les caractères de remplacement pour qu’ils utilisent d’autres noms. Par exemple, vous pouvez également inclure « John Doe » ou « Jane Smith ».
Cette fonction est utile si vous souhaitez laisser un exemple pour un champ avant que l’utilisateur ne le remplisse.
Dans ce cas, cependant, le champ de l’adresse électronique redeviendra vide après l’envoi du formulaire. Cette ligne est la meilleure solution si vous souhaitez supprimer toute trace d’adresse électronique une fois le formulaire rempli. Tout comme les mots de passe, les adresses électroniques doivent être protégées.
Utilisation des méthodes Javascript
function process () {
// (A) OBTENIR LES DONNÉES DU FORMULAIRE
var form = document.getElementById(« my-form ») ;
var data = new FormData(form) ;
// (B) FORMULAIRE D’ENVOI AJAX
// NOTE : UTILISEZ HTTP://. PAS FILE://.
var xhr = new XMLHttpRequest() ;
xhr.open(« POST », « 0-dummy.html ») ;
xhr.onload = function () {
console.log(this.response) ;
form.reset() ; // RESET FORM
};
xhr.send(data) ;
// (C) ARRÊTER LA SOUMISSION DU FORMULAIRE PAR DÉFAUT/LE RECHARGEMENT DE LA PAGE
renvoyer faux ;
}
Le Javascript peut être beaucoup plus difficile à comprendre pour les débutants. Dans ce cas, la soumission du formulaire se fait d’une manière unique. La soumission du formulaire se fait sans rafraîchir la page, en utilisant pleinement le mécanisme AJAX.
Si vous vous demandez ce que signifie AJAX, cela veut dire Asynchronous Javascript and XML. C’est un peu fort, mais en le lisant attentivement, vous saurez exactement à quoi il sert.
Passons maintenant aux détails. Pour une mise en œuvre complète, suivez les étapes suivantes.
La première chose à faire est d’obtenir le formulaire HTML :
var form = document.getElementById(« my-form »).
Ensuite, recueillez les données du formulaire :
var data = new FormData(form).
Ensuite, proposez la requête AJAX :
var xhr = new XMLHttpRequest().
Veillez maintenant à prêter une attention particulière à la ligne « xhr.onload ». Cette ligne contient une partie cruciale de la programmation nécessaire pour soumettre le formulaire. Lorsqu’elle est exécutée, le formulaire est soumis et le serveur vous informe qu’il a reçu les données.
Il est très important d’en tenir compte lors de la création d’un formulaire infaillible et efficace.
Réinitialisation partielle du formulaire
Si vous souhaitez ne laisser reposer qu’une partie du formulaire, il existe un moyen de le faire. Vous pouvez utiliser quelques lignes de HTML qui précisent quelles parties du formulaire doivent être effacées.
L’exemple suivant est l’une des meilleures façons d’y parvenir :
Courriel :
Mot de passe :
Confirmez le mot de passe :
Ce formulaire vous donnera un formulaire HTML conventionnel. Mais cette fois, il supprime les champs de mot de passe. Le champ e-mail conserve les informations saisies par l’utilisateur. Ainsi, la commodité est conservée sans compromettre la confidentialité et les détails personnels.
Utilisation de Javascript pour les partiels
function process () {
// (A) OBTENIR LES DONNÉES DU FORMULAIRE
var data = new FormData(document.getElementById(« my-form »)) ;
// (B) FORMULAIRE D’ENVOI AJAX
var xhr = new XMLHttpRequest() ;
xhr.open(« POST », « 0-dummy.html ») ;
xhr.onload = function () {
console.log(this.response) ;
// RÉINITIALISATION MANUELLE
document.getElementById(« user-password »).value = « » ;
document.getElementById(« confirm-password »).value = « » ;
};
xhr.send(data) ;
// (C) ARRÊTER LA SOUMISSION DU FORMULAIRE PAR DÉFAUT/LE RECHARGEMENT DE LA PAGE
renvoyer faux ;
}
Dans ces lignes de code, vous verrez qu’il est très similaire à d’autres processus AJAX. Cependant, la réinitialisation d’une partie seulement des formulaires nécessitera de modifier certaines de ces lignes. C’est pourquoi les champs doivent être configurés manuellement et les valeurs réinitialisées individuellement.
Conclusion sur la façon d’effacer les données d’un formulaire après l’envoi
Dans l’ensemble, la réinitialisation des données du formulaire après sa soumission est un processus qui nécessite un peu de doigté avec le langage HTML. Quel que soit le mode que vous choisissez de mettre en œuvre, veillez à le tester pour éviter toute erreur. Essayez de faire des essais répétés avec plusieurs utilisateurs avant de mettre le projet en ligne.
Lisez aussi le Guide des thèmes exceptionnels sur la façon de centrer une vidéo en HTML
