Comment gérer l'autocomplétion des formulaires en HTML5
Découvrons comment activer ou désactiver le remplissage automatique des champs de vos formulaires !

Vous l'avez sûrement expérimenté vous-même, mais avoir une page web qui propose de se remplir automatiquement, surtout lorsque le formulaire contient de nombreux champs, peut s'avérer très pratique.
Savoir rendre un formulaire agréable est un point d'UX à ne jamais négliger, ils font partie des plus grosses barrières à l'entrée.
En HTML, il y a un attribut pensé pour cela et qui s'apelle très justement : autocomplete.
Activer l’autocomplétion
Pour activer l'autocomplétion, rien de plus simple. Il suffit d'ajouter l'attribut autocomplete au champs du formulaire souhaité comme ci-dessous :
<input type="email" id="email" autocomplete="email"/>
Mais il est également possible de simplement activer l'autocomplétion avec la valeur "on" et de laisser décider le navigateur de la valeur la plus pertinente :
<input type="text" id="username" autocomplete="on"/>
Les valeurs possibles
Il existe des dizaines de valeurs possibles pour l'attribut autocomplete comme par exemple :
- name
- family-name
- current-password
- username
- street-address
- ...
Je vous invite à consulter la documentation MDN de l'attribut pour découvrir toutes les valeurs possibles !
Quelques conditions
Comme chaque navigateur gère l'autocomplétion de manière différente, il se peut que certains d'entre-eux nécessitent quelques conditions supplémentaires, qu'il peut être bien d'ajouter au cas où.
Parmi ses conditions on retrouve :
- Avoir un attribut "name" et ou "id" sur le champ
- Avoir un <form> comme parent
- Ajouter un bouton de type "submit" au formulaire
Désactiver l'autocomplétion
Il est également possible de forcer la désactivation de l'autocomplétion par le navigateur, en utilisant la valeur "off" de l'attribut, comme ceci :
<input type="text" id="username" autocomplete="off"/>
Et vous avez également la possibilité de désactiver pour l'ensemble du formulaire :
<form method="POST" action="..." autocomplete="off">
<!-- content -->
</form>
Attention néanmoins, dans la plupart des navigateurs mettre autocomplete à "off" n'empêchera pas des gestionnaires de mot de passe de s'afficher (sauvegarde et remplissage) car ce sont des extensions externes à la page.
Pour en savoir plus
Comme toujours, si vous voulez en savoir plus sur cet attribut, je vous invite à lire la documentation très complète de Mozilla sur le sujet :

J'espère que l'article vous aura été utile, et à bientôt sur le blog !
Les articles les plus populaires du blog
Envie de continuer à lire des articles autour du développement web (entre autres) ? Voici la sélection des articles de mon blog les plus lus par la communauté !
Voir la sélection 🚀Recevez les articles de la semaine par e-mail pour ne rien manquer !
S'abonner à la newsletter 📧
À propos de l'auteur
Hello, je suis Nicolas Brondin-Bernard, ingénieur web indépendant depuis 2015 passionné par le partage d'expériences et de connaissances.
Aujourd'hui je suis aussi formateur/coach pour développeurs web juniors, tu peux me contacter sur nicolas@brondin.com, sur mon site ou devenir membre de ma newsletter pour ne jamais louper le meilleur article de la semaine et être tenu au courant de mes projets !
Photo par Chris J. Davis sur Unsplash