Saisie automatique

Devoir entrer à nouveau votre adresse pour la dixième fois est fatiguant. Les navigateurs et vous, en tant que développeur, pouvez aider les utilisateurs à saisir des données plus rapidement et à éviter de saisir à nouveau des données. Ce module vous explique comment fonctionne la saisie automatique, et comment autocomplete et d'autres attributs d'éléments peuvent garantir que les navigateurs proposent des options de saisie automatique appropriées.

Comment fonctionne la saisie automatique ?

Dans l'introduction à la saisie automatique, vous avez déjà appris les principes de base de la saisie automatique. Mais pourquoi les navigateurs proposent-ils la saisie automatique ?

Remplir un formulaire n'est pas une activité intéressante, mais quelque chose que vous faites souvent. Au fil du temps, vous remplissez de nombreux formulaires et vous remplissez souvent les mêmes données. L'un des moyens d'aider les utilisateurs à remplir les formulaires plus rapidement consiste à leur proposer l'option de remplir automatiquement les champs du formulaire avec les données saisies précédemment. C'est de la saisie automatique.

Comment les navigateurs identifient-ils les données à saisir automatiquement ? Pour le savoir, consultez un exemple de champ de formulaire.

<label for="name">Name</label>
<input name="name" id="name">

Si vous envoyez ce champ de formulaire, les navigateurs stockent la valeur (les données que vous avez saisies) ainsi que celle de l'attribut name (nom). Certains navigateurs prennent également en compte l'attribut id lors du stockage et du remplissage des données.

Imaginons que, quelques semaines plus tard, vous remplissiez un autre formulaire sur un autre site Web. Ce site contient également un champ de formulaire avec name="name". Votre navigateur peut désormais proposer la saisie automatique, car une valeur pour le nom est déjà stockée.

La saisie automatique est particulièrement utile dans les formulaires que vous utilisez régulièrement, comme l'inscription et la connexion, le paiement, le règlement et les formulaires dans lesquels vous devez saisir votre nom ou votre adresse.

Vous pouvez aider les navigateurs à proposer les meilleures options de saisie automatique en utilisant les valeurs appropriées pour l'attribut autocomplete. Il existe de nombreuses valeurs possibles pour autocomplete. Voici un exemple d'adresses.

Une adresse a-t-elle déjà été enregistrée dans votre navigateur ? Parfait. Une fois que vous avez interagi avec le premier champ du formulaire d'adresse, le navigateur affiche la liste des adresses enregistrées. Vous pouvez en choisir une, et le navigateur remplit tous les champs liés à l'adresse. La saisie automatique permet de remplir des formulaires rapidement et facilement.

Les formulaires d'adresse ne comportent pas tous les mêmes champs, et leur ordre varie également. L'utilisation de valeurs correctes pour autocomplete garantit que le navigateur remplit les bonnes valeurs pour un formulaire. Il existe des valeurs pour country, postal-code et bien d'autres.

Assurez-vous que les utilisateurs peuvent se connecter rapidement et utiliser des mots de passe sécurisés

Beaucoup de gens ne sont pas doués pour se souvenir de leurs mots de passe. Le mot de passe le plus courant est "123456", suivi d'autres combinaisons faciles à mémoriser. Comment utiliser des mots de passe sécurisés et uniques sans les mémoriser tous ?

Les navigateurs disposent de gestionnaires de mots de passe intégrés pour générer, enregistrer et saisir des mots de passe à votre place. Découvrez comment aider les navigateurs à remplir automatiquement les e-mails et à gérer les mots de passe.

Vous pouvez utiliser autocomplete="email" pour un champ d'adresse e-mail, afin que les utilisateurs aient accès à l'option de saisie automatique pour une adresse e-mail.

Comme il s'agit d'un formulaire d'inscription, les utilisateurs ne devraient pas avoir la possibilité de saisir des mots de passe déjà utilisés. Vous pouvez utiliser autocomplete="new-password" pour vous assurer que les navigateurs offrent la possibilité de générer un nouveau mot de passe.

Dans le formulaire de connexion, vous pouvez utiliser autocomplete="current-password" pour demander aux navigateurs de proposer la possibilité de saisir les mots de passe précédemment enregistrés pour ce site Web.

Vous pouvez configurer l'authentification à deux facteurs sur de nombreux sites Web. En plus du mot de passe, un code à usage unique est envoyé par SMS ou via une application d'authentification à deux facteurs.

Ne serait-il pas idéal que le code reçu par SMS soit suggéré par le clavier à l'écran et que vous puissiez le sélectionner directement pour indiquer la valeur ? Sur Safari 14 ou version ultérieure, vous pouvez utiliser autocomplete="one-time-code" pour ce faire. Dans Chrome sur Android, vous pouvez utiliser l'API WebOTP pour y parvenir avec JavaScript.

Découvrez comment valider des numéros de téléphone sur le Web en consultant les bonnes pratiques concernant les formulaires OTP envoyés par SMS.

Aider les utilisateurs à renseigner les informations de leur carte de crédit

Sur de nombreux sites Web d'e-commerce, vous pouvez utiliser votre carte de crédit pour acheter des produits. Les sites peuvent utiliser des plates-formes de paiement tierces qui fournissent leurs propres formulaires. Toutefois, si vous devez créer vos propres formulaires de paiement, assurez-vous que les utilisateurs puissent facilement renseigner les informations de paiement.

Vous pouvez réutiliser l'attribut autocomplete pour vous assurer que les navigateurs proposent les options de saisie automatique appropriées.

Il existe des valeurs pour le numéro de carte de crédit cc-number, la date d'expiration de la carte de crédit cc-exp et toutes les autres informations nécessaires pour un paiement par carte de crédit.

Utilisez une seule entrée pour les numéros tels que les numéros de carte de crédit et de téléphone, afin de vous assurer que les navigateurs proposent la saisie automatique. Utilisez des éléments de formulaire standards (par exemple, un <select> pour les dates de la carte de paiement) au lieu d'éléments personnalisés, afin de vous assurer que la saisie semi-automatique est disponible.

Découvrez comment aider les utilisateurs à éviter de saisir à nouveau les données de paiement.

Assurez-vous que la saisie automatique fonctionne pour tous les champs

Outre les adresses, les informations de compte et les informations de carte de crédit, il existe de nombreux autres champs dans lesquels les navigateurs peuvent aider les utilisateurs avec la saisie automatique.

Lorsque vous ajoutez un champ de numéro de téléphone à votre formulaire, vérifiez si vous pouvez utiliser l'une des valeurs disponibles pour la saisie semi-automatique. Vous avez trouvé une valeur appropriée pour votre champ de formulaire ? Ajoutez-le.

Utiliser des valeurs appropriées pour l'attribut autocomplete permet aux navigateurs de proposer la meilleure option de saisie automatique et aide les utilisateurs à remplir les formulaires plus rapidement.

Aider les navigateurs à comprendre qu'un champ ne doit pas être saisi automatiquement

Vous avez découvert le fonctionnement de la saisie automatique, comment vous pouvez aider les navigateurs à l'utiliser et pourquoi cette fonctionnalité facilite le remplissage des formulaires par les utilisateurs. Cependant, il arrive parfois que vous ne souhaitiez pas que les navigateurs proposent la saisie automatique.

<label for="one-time-code">One-time code</label>
<input autocomplete="off" type="text" name="one-time-code" id="one-time-code">

La saisie automatique n'est pas utile lorsque vous saisissez des valeurs uniques et uniques telles qu'un champ de code à usage unique. La valeur est différente à chaque fois, et le navigateur ne doit pas enregistrer de valeurs ni proposer d'option de saisie automatique. Vous pouvez utiliser autocomplete="off" pour ces champs afin d'empêcher la saisie automatique.

Un autre cas d'utilisation de autocomplete="off" est le champ en pot de miel (voir le module précédent). Même si le champ n'est pas visible, les navigateurs peuvent le remplir automatiquement avec le reste des champs. La désactivation de la saisie automatique garantit qu'un utilisateur réel ne sera pas identifié comme un bot, car le champ est renseigné automatiquement.

Vous ne devez désactiver la saisie automatique que si vous êtes sûr qu'elle aidera les internautes.

Testez vos connaissances

Tester vos connaissances sur la saisie automatique

Quelle valeur de saisie semi-automatique devez-vous utiliser dans le champ de mot de passe d'un formulaire d'inscription ?

autocomplete="password"
Essayez encore.
autocomplete="off"
Essayez encore.
autocomplete="new-password"
🎉
autocomplete="current-password"
Essayez encore.

Ressources