La réponse courte
| Métrique | Sans autocomplete | Avec autocomplete |
|---|
| Temps de complétion | 100% | -30% |
| Taux d’erreur | Référence | -50% |
| Taux de conversion | Référence | +25-30% |
| Abandon mobile | Élevé | Réduit significativement |
Verdict : L’autocomplétion est un quick win qui améliore drastiquement l’UX et les conversions.
Pourquoi c’est si efficace
Sur mobile (crucial)
Sans autocomplete :
- Taper "jean.dupont@gmail.com" sur clavier mobile
- 22 caractères, majuscules, @, point
- ~30 secondes de saisie frustrante
- Risque d'erreur élevé
Avec autocomplete :
- Clic sur suggestion
- 1 seconde
- Zéro erreur
Réduction de la friction
| Action utilisateur | Avec | Sans |
|---|
| Saisir email | 1 clic | ~30s de saisie |
| Saisir adresse | 2 clics | ~60s de saisie |
| Saisir CB | Remplissage auto | 19 chiffres + date + CVV |
Implémentation HTML5
Attributs autocomplete essentiels
<!-- Identité -->
<input type="text" name="name" autocomplete="name">
<input type="text" name="given-name" autocomplete="given-name">
<input type="text" name="family-name" autocomplete="family-name">
<!-- Contact -->
<input type="email" name="email" autocomplete="email">
<input type="tel" name="phone" autocomplete="tel">
<!-- Adresse -->
<input type="text" name="address" autocomplete="street-address">
<input type="text" name="city" autocomplete="address-level2">
<input type="text" name="postal" autocomplete="postal-code">
<input type="text" name="country" autocomplete="country-name">
<!-- Paiement -->
<input type="text" name="cc-name" autocomplete="cc-name">
<input type="text" name="cc-number" autocomplete="cc-number">
<input type="text" name="cc-exp" autocomplete="cc-exp">
<input type="text" name="cc-csc" autocomplete="cc-csc">
<!-- Compte -->
<input type="text" name="username" autocomplete="username">
<input type="password" name="password" autocomplete="current-password">
<input type="password" name="new-password" autocomplete="new-password">
<form autocomplete="on">
<div class="form-group">
<label for="name">Nom complet</label>
<input
type="text"
id="name"
name="name"
autocomplete="name"
required
>
</div>
<div class="form-group">
<label for="email">Email</label>
<input
type="email"
id="email"
name="email"
autocomplete="email"
required
>
</div>
<div class="form-group">
<label for="phone">Téléphone</label>
<input
type="tel"
id="phone"
name="phone"
autocomplete="tel"
>
</div>
<fieldset>
<legend>Adresse de livraison</legend>
<input
type="text"
name="address"
autocomplete="shipping street-address"
placeholder="Adresse"
>
<input
type="text"
name="city"
autocomplete="shipping address-level2"
placeholder="Ville"
>
<input
type="text"
name="postal"
autocomplete="shipping postal-code"
placeholder="Code postal"
>
</fieldset>
</form>
Types d’autocomplétion
1. Navigateur natif (HTML5)
<input type="email" autocomplete="email">
Le navigateur propose les emails déjà utilisés.
2. Autocomplétion d’adresse (API Google Places)
const autocomplete = new google.maps.places.Autocomplete(
document.getElementById('address'),
{ types: ['address'], componentRestrictions: { country: 'fr' } }
);
autocomplete.addListener('place_changed', () => {
const place = autocomplete.getPlace();
fillAddressFields(place);
});
Avantages :
- Adresse validée et formatée
- Complète ville + code postal automatiquement
- Réduit les erreurs de livraison
3. Autocomplétion intelligente (Machine Learning)
Champ "Entreprise" :
Tape : "Goo"
Suggestions : Google, Goodyear, Goop...
Services : Clearbit, ZoomInfo pour l’enrichissement B2B.
Autocomplétion et sécurité
Quand désactiver
<!-- Champ de recherche (pas de données personnelles) -->
<input type="search" autocomplete="off">
<!-- Champs one-time (codes de vérification) -->
<input type="text" autocomplete="one-time-code">
Ne pas désactiver pour les mots de passe
<!-- ❌ Mauvaise pratique (empêche les gestionnaires de mots de passe) -->
<input type="password" autocomplete="off">
<!-- ✅ Bonne pratique -->
<input type="password" autocomplete="current-password">
<input type="password" autocomplete="new-password">
Optimisations avancées
1. Pré-remplissage depuis le profil
// Si l'utilisateur est connecté
if (user.isLoggedIn) {
document.getElementById('email').value = user.email;
document.getElementById('name').value = user.name;
document.getElementById('phone').value = user.phone;
}
2. Mémorisation pour les visiteurs récurrents
// Sauvegarder pour la prochaine visite
form.addEventListener('submit', () => {
localStorage.setItem('savedEmail', emailInput.value);
});
// Pré-remplir au chargement
window.addEventListener('load', () => {
const savedEmail = localStorage.getItem('savedEmail');
if (savedEmail) {
emailInput.value = savedEmail;
}
});
3. Détection du type de clavier mobile
<!-- Clavier email avec @ -->
<input type="email">
<!-- Clavier numérique -->
<input type="tel">
<input inputmode="numeric" pattern="[0-9]*">
<!-- Clavier avec .com -->
<input type="url">
Checkout e-commerce
| Sans autocomplete | Avec autocomplete |
|---|
| 3-5 min pour compléter | < 1 min |
| 15-25% abandons formulaire | 5-10% abandons |
Inscription compte
| Sans | Avec |
|---|
| 30-60s | 10-15s |
| Erreurs fréquentes | Erreurs rares |
| Sans | Avec |
|---|
| 2-3 min | < 1 min |
| Fautes dans entreprise/email | Données propres |
Erreurs courantes
1. autocomplete=“off” partout
<!-- ❌ Frustre les utilisateurs -->
<form autocomplete="off">
<!-- ✅ Laisser le navigateur aider -->
<form autocomplete="on">
2. Mauvais attributs autocomplete
<!-- ❌ Le navigateur ne comprend pas -->
<input name="user_email_address" autocomplete="on">
<!-- ✅ Attribut spécifique -->
<input name="user_email_address" autocomplete="email">
3. Name incohérent avec autocomplete
<!-- ❌ Confusion pour le navigateur -->
<input name="phone" autocomplete="email">
<!-- ✅ Cohérent -->
<input name="email" autocomplete="email">
A/B tests
| Test | Métrique |
|---|
| Avec vs sans autocomplete | Conversion |
| Google Places vs manuel | Erreurs adresse |
| Pré-remplissage vs vide | Temps complétion |
Checklist autocomplétion