Attribut autocomplete en HTML
Découvrez l'attribut autocomplete HTML : valeurs on/off, jetons nommés comme email et new-password, sécurité et accessibilité.
L'attribut autocomplete contrôle si le navigateur peut remplir automatiquement un champ de formulaire pour l'utilisateur. Lorsqu'il est activé et que l'utilisateur commence à saisir du texte, le navigateur suggère des valeurs enregistrées lors de soumissions précédentes (noms, e-mails, adresses, etc.) afin que le champ puisse être complété en un seul appui ou clic.
Cette page couvre les deux valeurs de base (on et off), les jetons de remplissage automatique nommés qui indiquent au navigateur exactement quel type de donnée contient un champ, les cas où il faut désactiver le remplissage automatique, ainsi que les compromis en matière de sécurité et d'accessibilité.
Remarque : l'attribut autocomplete fonctionne avec les types <input> tels que text, search, tel, url, password, email, range et color.
Syntaxe
Syntaxe de l'attribut autocomplete HTML
<input autocomplete="on|off">Vous pouvez également utiliser un jeton nommé à la place de on/off pour décrire le rôle exact du champ :
<input type="email" name="email" autocomplete="email">
<input type="password" name="password" autocomplete="new-password">| S'applique à | Les éléments <form> et <input>. |
|---|
Exemple de l'attribut autocomplete HTML :
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
margin-bottom: 10px;
}
</style>
</head>
<body>
<form action="/form/submit" method="get" autocomplete="on">
<div>
<label for="name">Enter Your Name:</label>
<input type="text" name="name" id="name" />
</div>
<div>
<label for="phone">Enter Your Phone Number:</label>
<input type="number" id="phone" name="phone-number" />
<br />
</div>
<input type="submit" value="Send" />
</form>
</body>
</html>Exemple de la balise HTML <form> avec l'attribut autocomplete activé :
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
input {
display: block;
margin-bottom: 10px;
padding: 10px;
}
</style>
</head>
<body>
<form action="/form/submit" autocomplete="on">
<input type="text" name="name" placeholder="Enter your Name" autofocus />
<input type="text" name="surname" placeholder="Enter your Surname" />
<input type="number" name="age" placeholder="Enter your Age" />
<input type="submit" value="Send" />
</form>
</body>
</html>Utiliser les jetons de remplissage automatique nommés
Au lieu d'utiliser simplement on ou off, vous pouvez attribuer à chaque champ un jeton qui décrit quel type de valeur il contient. Le navigateur propose alors les données enregistrées appropriées (l'e-mail de l'utilisateur, son adresse de livraison, un nouveau mot de passe qu'il peut générer, etc.). Les jetons nommés rendent le remplissage automatique beaucoup plus précis qu'un simple on.
L'exemple ci-dessous combine un formulaire d'adresse avec une section de connexion. Notez autocomplete="email" pour le champ e-mail et autocomplete="new-password" pour le mot de passe à créer, ce qui indique au navigateur de suggérer un mot de passe fraîchement généré plutôt qu'un mot de passe existant.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
label { display: block; margin-top: 10px; }
input { padding: 8px; width: 240px; }
</style>
</head>
<body>
<form action="/form/submit" method="post" autocomplete="on">
<label for="fullname">Full name</label>
<input type="text" id="fullname" name="fullname" autocomplete="name" />
<label for="email">Email</label>
<input type="email" id="email" name="email" autocomplete="email" />
<label for="street">Street address</label>
<input type="text" id="street" name="street" autocomplete="address-line1" />
<label for="city">City</label>
<input type="text" id="city" name="city" autocomplete="address-level2" />
<label for="zip">Postal code</label>
<input type="text" id="zip" name="zip" autocomplete="postal-code" />
<label for="password">Create a password</label>
<input type="password" id="password" name="password" autocomplete="new-password" />
<input type="submit" value="Sign up" />
</form>
</body>
</html>Jetons de remplissage automatique courants
Le standard HTML définit plus de 50 jetons de remplissage automatique. Le tableau ci-dessous liste ceux que vous utiliserez le plus souvent. Pour la liste complète et officielle, consultez la spécification WHATWG sur le remplissage automatique.
| Jeton | Rôle du champ |
|---|---|
name | Nom complet |
given-name | Prénom |
family-name | Nom de famille |
nickname | Surnom ou pseudo |
username | Identifiant de connexion |
email | Adresse e-mail |
tel | Numéro de téléphone complet |
street-address | Adresse complète (multiligne) |
address-line1 | Première ligne de l'adresse |
address-line2 | Deuxième ligne (appartement, bâtiment) |
address-level2 | Ville ou commune |
address-level1 | État, province ou région |
postal-code | Code postal |
country | Code pays (ex. FR) |
country-name | Nom du pays |
cc-name | Nom imprimé sur la carte de paiement |
cc-number | Numéro de carte de paiement |
cc-exp | Date d'expiration de la carte |
cc-csc | Code de sécurité de la carte (CVC/CVV) |
current-password | Mot de passe existant (pour la connexion) |
new-password | Nouveau mot de passe (inscription ou changement) |
one-time-code | Code de vérification à usage unique (OTP) |
bday | Date de naissance complète |
Quand (et pourquoi) désactiver le remplissage automatique
La plupart du temps, vous devriez laisser le remplissage automatique activé, car il réduit la saisie et limite les erreurs. Il existe cependant quelques raisons légitimes de le désactiver :
- Codes à usage unique et données sensibles. Les champs destinés aux mots de passe à usage unique, aux réponses CAPTCHA ou à d'autres valeurs qui ne doivent jamais être mémorisées sont de bons candidats. Pour un champ OTP, préférez
autocomplete="one-time-code"plutôt queoff, afin que les appareils mobiles puissent toujours suggérer le code reçu par SMS sans le stocker définitivement. - Interface de remplissage automatique personnalisée. Si votre application propose son propre menu déroulant de suggestions (par exemple une recherche de ville ou de produit via
<datalist>ou un widget JavaScript), le remplissage automatique natif du navigateur peut interférer ; vous pouvez alors le désactiver. - Appareils partagés ou bornes publiques, confidentialité. Sur des terminaux publics, vous pourriez ne pas vouloir que le navigateur conserve ou pré-remplisse des données personnelles pour l'utilisateur suivant.
Attention : autocomplete="off" n'est qu'une indication. Pour les champs de mot de passe, Chrome et Safari l'ignorent souvent afin que leurs gestionnaires de mots de passe intégrés continuent de fonctionner, ce qui est considéré comme une fonction de sécurité. Pour empêcher le navigateur de suggérer un mot de passe existant enregistré, utilisez autocomplete="new-password" sur le champ concerné plutôt que off.
Note de sécurité : désactiver le remplissage automatique ne rend pas un formulaire plus sécurisé. Les données enregistrées restent dans le gestionnaire de mots de passe du navigateur, et forcer les utilisateurs à saisir manuellement des mots de passe longs les encourage à choisir des mots de passe faibles et réutilisés. La meilleure pratique consiste à étiqueter les champs avec les jetons appropriés (current-password, new-password, one-time-code) afin que les gestionnaires de mots de passe et le navigateur traitent les données de façon cohérente.
Accessibilité et expérience utilisateur
Les jetons de remplissage automatique nommés sont une fonctionnalité d'accessibilité, pas seulement une commodité :
- Ils satisfont au critère de succès WCAG 2.1 1.3.5 « Identifier l'objet de la saisie », qui exige que la finalité des champs de formulaire courants soit identifiable de manière programmatique.
- Ils permettent aux gestionnaires de mots de passe de remplir les identifiants de façon fiable et aux navigateurs mobiles d'afficher le bon clavier à l'écran.
- Désactiver le remplissage automatique peut constituer un obstacle pour les utilisateurs souffrant de handicaps cognitifs, moteurs ou mnésiques, qui s'appuient sur les valeurs enregistrées pour remplir les formulaires. Ne le désactivez que lorsqu'il y a une raison réelle de le faire.
En lien : autofocus déplace le curseur vers un champ au chargement de la page, et le chapitre <input> couvre les types de champs associés à ces jetons.