Comment gérer l'autocomplétion des formulaires en HTML5

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
  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 !