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
• email
• 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 :

The HTML autocomplete attribute - HTML: HyperText Markup Language | MDN

The HTML autocomplete attribute lets web developers specify what if any permission the user agent has to provide automated assistance in filling out form field values, as well as guidance to the browser as to the type of information expected in the field.

MDN

J'espère que l'article vous aura été utile, et à bientôt sur le blog !

À 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