Empêcher Chrome d'ignorer l'attribut autocomplete=off dans son formulaire HTML

author
Andréas Hanss · Jan 12, 2022
dev | 2 min
Article image

À quoi sert l'attribut « autocomplete » du navigateur ?

L'attribut autocomplete ou autofill permet au navigateur de remplir automatiquement des champs de formulaire si l'utilisateur a sauvegardé des données dans ce dernier.

En 2017 l'auto-complétion à permis aux utilisateurs de gagner un temps énorme, c'est une fonctionnalité dont on a l'habitude de se servir et qui sert beaucoup.

Cependant c'est tellement pratique que parfois le navigateur va remplir des données dans nos formulaires, alors qu'on aimerait qu'il ne le fasse pas pour X raison. Par exemple car il ne le fait pas comme on le souhaite par défaut.

Pour cela la spécification officielle indique qu'il suffit de mettre l'attribut autocomplete à off. Comme présenté ici-même :

1
<input type="text" autocomplete="off" />

Mais comme ça n'est jamais si simple, les navigateurs basés sur chromium n'interprètent souvent pas correctement la valeur de cet attribut.

Et bien que cela soit embêtant, ce n'est pas forcément hors-spécification car en effet :

The autocomplete content attribute can be used to hint to the user agent how to, or indeed whether to, provide such a feature

https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofilling-form-controls%3A-the-autocomplete-attribute

En effet avec le HTML, cet attribut (comme tout autre) est une suggestion au navigateur.

Pour compliquer un peu plus les choses, les navigateurs peuvent également remplir automatiquement les champs de formulaire en se basant sur les attributs name ou id du champ.

C'est ainsi que les navigateurs procédaient avant l'arrivée de l'attribut autocomplete (la bonne vieille époque… ou pas)

Comment utiliser efficacement l'attribut « auto-complete » ?

Pour une prise en charge maximale, il est donc intéressant de bien utiliser les attributs name et autocomplete.

Mais si on souhaite que Chrome (et d'autres navigateurs) arrête de remplir automatiquement les champs, on devrait utiliser un nom, un id et une valeur d'auto-complétion que le navigateur ne reconnaît pas.

Maintenant souvent il suffit de changer uniquement la valeur d'autocomplete, mais dans le doute si vous voulez vraiment vous assurer que cela n'arrivera pas il faut agir sur les trois champs.

Ce que je propose donc pour désactiver la saisie c'est de mettre l'attribut à la valeur nope qui ne corresponds donc à rien (que le navigateur reconnaisse en tout cas). De cette manière le champ n'est plus auto-complété :) On aurait pu mettre n'importe quoi mais je pense que sémantiquement c'est toujours bien d'avoir un nom parlant.

1
<input type="text" id="some_id" name="some_name" autocomplete="nope" />