Optimiser la conversion : le guide complet de l'attribut autocomplete en HTML

Sur internet, la friction est l’ennemi numéro un. Chaque champ qu’un utilisateur doit remplir manuellement est une occasion pour lui de quitter votre site. C’est ce qu’on appelle l’abandon de formulaire. Pour un site e-commerce ou un service en ligne, cela représente une perte d’argent directe.

Pourtant, il existe une solution technique gratuite, native et extrêmement performante : l’attribut autocomplete. Selon les chiffres de Zuko, l’utilisation correcte de l’auto-complétion augmente le taux de succès des formulaires de 59 % à 71 %.

Ce guide vous explique comment transformer vos formulaires en utilisant uniquement le HTML.

#Pourquoi l’autocomplete change tout ?

Le remplissage d’un formulaire demande un effort important, surtout sur un téléphone portable. L’utilisateur doit cliquer sur le champ, attendre que le clavier s’affiche, taper ses informations sans faire d’erreur, puis passer au champ suivant.

L’attribut autocomplete permet au navigateur de faire tout ce travail à la place de l’utilisateur. En une fraction de seconde, le navigateur identifie les données stockées dans son système et propose de remplir tout le formulaire d’un coup.

La différence entre “heuristique” et “sémantique”

Si vous ne mettez pas l’attribut autocomplete, le navigateur essaie de deviner ce qu’il doit remplir. C’est ce qu’on appelle l’heuristique. Il regarde le nom du champ (name=prenom) ou le texte à côté. Mais les navigateurs font souvent des erreurs, surtout si votre site est traduit dans plusieurs langues.

En ajoutant autocomplete, vous donnez une instruction sémantique. Vous dites au navigateur : “Ce champ est exactement fait pour le prénom”. Il n’y a plus de place pour l’erreur. Le gain de performance est immédiat car le navigateur n’a plus besoin d’analyser votre code pour deviner vos intentions.

#1. L’identité de l’utilisateur

C’est la base de tout formulaire. Pour que le navigateur propose les bonnes informations, vous devez utiliser les jetons (tokens) standards.

Voici un exemple de code optimisé pour l’identité :

Copy<div class=form-group>
  <label for=first-name>First Name</label>
  <input id=first-name name=fname type=text autocomplete=given-name required>
</div>

<div class=form-group>
  <label for=last-name>Last Name</label>
  <input id=last-name name=lname type=text autocomplete=family-name required>
</div>

<div class=form-group>
  <label for=nickname>Username</label>
  <input id=nickname name=user type=text autocomplete=nickname>
</div>

<div class=form-group>
  <label for=job-title>Job Position</label>
  <input id=job-title name=position type=text autocomplete=organization-title>
</div>

Pourquoi séparer le prénom et le nom ?

Certains formulaires utilisent un seul champ “Nom complet”. C’est une erreur pour la performance de l’auto-complétion. Les navigateurs stockent souvent le prénom et le nom séparément. En utilisant given-name et family-name, vous garantissez un remplissage parfait.

#2. Coordonnées et contact

Les erreurs de frappe dans les adresses email ou les numéros de téléphone sont les premières causes d’échec de création de compte. L’auto-complétion élimine ce risque.

Copy<!-- Détails de contact optimisés pour l'interaction mobile -->
<div class=form-group>
  <label for=user-email>Email Address</label>
  <input id=user-email name=email type=email autocomplete=email required>
</div>

<div class=form-group>
  <label for=user-phone>Phone Number</label>
  <input id=user-phone name=phone type=tel autocomplete=tel>
</div>

Note technique : Utilisez toujours type=email et type=tel en plus de l’autocomplete. Cela permet aux smartphones d’afficher le bon clavier (clavier numérique pour le téléphone), ce qui renforce encore la vitesse de saisie.

#3. L’adresse postale : Le défi de l’e-commerce

L’adresse est la partie la plus longue à remplir. Elle contient souvent cinq ou six champs différents. C’est ici que l’impact sur la conversion est le plus fort.

Copy<div class=form-group>
  <label for=street>Street Address</label>
  <input id=street name=addr1 type=text autocomplete="shipping street-address">
</div>

<div class=form-group>
  <label for=city>City</label>
  <input id=city name=city type=text autocomplete="shipping address-level2">
</div>

<div class=form-group>
  <label for=zip>Zip Code</label>
  <input id=zip name=zip type=text autocomplete="shipping postal-code">
</div>

<div class=form-group>
  <label for=country>Country</label>
  <input id=country name=country type=text autocomplete="shipping country">
</div>

En ajoutant le mot shipping devant le jeton (par exemple shipping postal-code), vous indiquez au navigateur qu’il s’agit de l’adresse de livraison. S’il s’agit de l’adresse de facturation, on utilisera billing. Cela permet au navigateur de proposer deux adresses différentes si l’utilisateur les a enregistrées.

#4. Paiements et sécurité

Remplir des numéros de carte bancaire est stressant pour l’utilisateur. En automatisant cette étape, vous réduisez l’anxiété et accélérez le paiement.

Copy<!-- Champs de paiement avec autocomplétion native sécurisée -->
<div class=form-group>
  <label for=card-num>Card Number</label>
  <input id=card-num name=cnum type=text autocomplete=cc-number>
</div>

<div class=form-group>
  <label for=card-name>Name on Card</label>
  <input id=card-name name=cname type=text autocomplete=cc-name>
</div>

<div class=form-group>
  <label for=card-exp>Expiry Date</label>
  <input id=card-exp name=cexp type=text autocomplete=cc-exp>
</div>

Contrairement aux idées reçues, c’est plus sécurisé. L’utilisateur n’a pas besoin de sortir sa carte dans un lieu public. Le navigateur protège ces données avec un mot de passe ou une empreinte digitale (TouchID/FaceID).

#5. Gestion des mots de passe

C’est l’un des points les plus critiques. Une mauvaise configuration de l’autocomplete peut bloquer un utilisateur qui veut se connecter.

• Pour la connexion : Utilisez autocomplete=current-password.
• Pour l’inscription : Utilisez autocomplete=new-password.

Cela indique au gestionnaire de mots de passe s’il doit proposer un ancien code ou en générer un nouveau de manière sécurisée.

#6. Accessibilité (WCAG) : un droit pour tous

L’accessibilité web ne concerne pas seulement les aveugles. Elle concerne aussi les personnes ayant des troubles moteurs (difficulté à taper) ou cognitifs (difficulté à mémoriser ses propres informations).

La norme WCAG 2.1 impose l’identification de la finalité de la saisie (critère 1.3.5). L’attribut autocomplete est la solution officielle pour respecter cette règle. Sans lui, votre site peut être considéré comme non conforme aux lois sur l’accessibilité.

#7. Performance : pourquoi le natif gagne toujours ?

Beaucoup de sites utilisent des scripts JavaScript lourds pour aider à la saisie (recherche d’adresse par API). Bien que ces outils soient utiles, ils ralentissent la page. Ils demandent du temps pour charger le script et pour exécuter le code.

L’attribut HTML autocomplete a un coût de performance de zéro.

1. Pas de requête réseau supplémentaire.
2. Pas de temps de calcul pour le processeur.
3. Fonctionne même si le réseau est lent ou si le JavaScript est bloqué.

#Erreurs à éviter absolument

• L’abus d’autocomplete=off : Certains développeurs pensent augmenter la sécurité en interdisant l’auto-complétion. C’est l’inverse. Vous forcez l’utilisateur à utiliser des mots de passe simples pour s’en souvenir.
• Les noms de champs fantaisistes : Si vous utilisez name=champ_1, le navigateur aura du mal à comprendre sans l’attribut autocomplete. Soyez toujours explicite.

#Conclusion

L’optimisation d’un formulaire ne passe pas par l’ajout de fonctionnalités complexes, mais par l’utilisation intelligente des standards du web. L’attribut autocomplete est l’outil le plus puissant pour améliorer l’expérience utilisateur sans aucun compromis sur la performance.

En tant que développeur ou responsable de site, votre mission est de réduire l’effort de vos visiteurs. Un formulaire qui se remplit tout seul est un formulaire qui convertit.

Foire Aux Questions

Lionel Péramo

Expert Performance Web & Écoconception

Développeur full stack et créateur du framework OTRA (PHP) et de la librairie EcoComposer. J'écris pour rendre le web plus rapide et inclusif.

En savoir plus →