Comment désactiver l'autocomplétion des champs de formulaire dans les navigateurs ?

Lucas D. -

Problème : Saisie automatique indésirable dans les champs de formulaire

La saisie automatique dans les navigateurs web peut remplir les champs de formulaire avec des informations que vous avez déjà saisies. Cette fonctionnalité peut être utile, mais elle peut causer des problèmes de confidentialité des données ou interférer avec le fonctionnement de certains formulaires.

Solutions pour désactiver la saisie automatique

Méthode d'attribut HTML

La façon la plus simple de désactiver la saisie automatique est d'utiliser l'attribut autocomplete="off" dans les champs de formulaire HTML. Vous pouvez ajouter cet attribut à des éléments input individuels ou au formulaire entier :

<input type="text" name="username" autocomplete="off">

ou

<form autocomplete="off">
    <!-- Champs du formulaire ici -->
</form>

Cependant, il existe des problèmes de compatibilité entre navigateurs. Certains navigateurs, comme Firefox, ignorent cet attribut pour les champs de mot de passe pour des raisons de sécurité. Ils peuvent toujours demander aux utilisateurs d'enregistrer les mots de passe.

Exemple: Utilisez des valeurs spécifiques pour autocomplete

Pour un meilleur contrôle, utilisez des valeurs spécifiques pour autocomplete plutôt que simplement "off". Par exemple, autocomplete="new-password" pour les champs de mot de passe peut empêcher les navigateurs de les remplir automatiquement avec des mots de passe existants enregistrés.

Techniques JavaScript

Lorsque les attributs HTML ne fonctionnent pas, JavaScript offre d'autres solutions :

  1. Effacer les champs du formulaire au chargement de la page :
window.onload = function() {
    var forms = document.getElementsByTagName('form');
    for (var i = 0; i < forms.length; i++) {
        forms[i].reset();
    }
}
  1. Empêcher les navigateurs de stocker les données du formulaire :
document.forms['myForm'].setAttribute('autocomplete', 'off');
  1. Solutions JavaScript personnalisées :

Vous pouvez créer une fonction pour effacer les champs du formulaire après la soumission :

function clearForm() {
    document.getElementById('myForm').reset();
}

Ces méthodes JavaScript vous donnent plus de contrôle sur le comportement de la saisie automatique, mais elles peuvent nécessiter plus de maintenance et de tests sur différents navigateurs et appareils.