Il est fatigant de devoir saisir votre adresse pour la dixième fois. Les navigateurs et vous, en tant que développeur, pouvez aider les utilisateurs à saisir des données plus rapidement et à éviter de les saisir plusieurs fois.
Ce module vous explique comment fonctionne la saisie automatique et comment les attributs d'éléments autocomplete et autres 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 bases de la saisie automatique. Mais pourquoi les navigateurs proposent-ils la saisie automatique ?
Remplir des formulaires n'est pas une activité intéressante, mais c'est quelque chose que vous faites souvent. Au fil du temps, vous remplissez de nombreux formulaires et vous saisissez souvent les mêmes données. Pour aider les utilisateurs à remplir les formulaires plus rapidement, vous pouvez leur proposer de remplir automatiquement les champs avec les données qu'ils ont saisies précédemment. C'est la saisie automatique.
Comment les navigateurs savent-ils quelles données saisir automatiquement ? Pour le savoir, examinez 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 la valeur de l'attribut name (nom). Certains navigateurs examinent également l'attribut id lors du stockage et de la saisie 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 les formulaires d'inscription et de connexion, de paiement, de règlement, et ceux 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. autocomplete peut prendre de nombreuses valeurs. Voici un exemple d'adresses :
Votre navigateur a-t-il déjà enregistré une adresse pour vous ? Parfait ! Après avoir interagi avec le premier champ du formulaire d'adresse, le navigateur affiche une liste des adresses enregistrées. Vous pouvez en choisir une, et le navigateur remplit tous les champs associés à l'adresse. La saisie automatique permet de remplir les formulaires plus rapidement et plus facilement.
Tous les formulaires d'adresse ne comportent pas les mêmes champs, et l'ordre des champs varie également.
L'utilisation des valeurs correctes pour autocomplete permet au navigateur de renseigner les valeurs correctes pour un formulaire. Il existe des valeurs pour country, postal-code et bien d'autres.
S'assurer que les utilisateurs peuvent se connecter rapidement et utiliser des mots de passe sécurisés
De nombreuses personnes ont du mal à se souvenir de leurs mots de passe. Le mot de passe le plus courant est "123456", suivi d'autres combinaisons faciles à retenir. Comment utiliser des mots de passe sécurisés et uniques sans avoir à tous les retenir ?
Les navigateurs sont dotés de gestionnaires de mots de passe intégrés qui génèrent, enregistrent et saisissent des mots de passe pour vous. Découvrez comment vous pouvez aider les navigateurs à remplir automatiquement les adresses e-mail et à gérer les mots de passe.
Vous pouvez utiliser autocomplete="email" pour un champ d'adresse e-mail afin que les utilisateurs bénéficient de l'option de saisie automatique pour une adresse e-mail.
Comme il s'agit d'un formulaire d'inscription, les utilisateurs ne doivent 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 proposent l'option permettant de générer un nouveau mot de passe.
Dans le formulaire de connexion, vous pouvez utiliser autocomplete="current-password" pour indiquer aux navigateurs de proposer l'option de saisie des 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 formidable que le code reçu par SMS soit suggéré par le clavier à l'écran et que vous puissiez le sélectionner directement pour remplir la valeur ? Sur Safari 14 ou version ultérieure, vous pouvez utiliser autocomplete="one-time-code" pour ce faire. Sur Chrome pour 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 grâce aux bonnes pratiques concernant le formulaire OTP par SMS.
Attention : Le SMS n'est pas la méthode d'authentification la plus sécurisée en soi, car les numéros de téléphone peuvent être recyclés et piratés. Envisagez d'utiliser d'autres méthodes d'authentification à deux facteurs ou l'authentification multifacteur.
Aider les utilisateurs à saisir 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 peuvent facilement saisir leurs informations de paiement.
Vous pouvez à nouveau 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 nombres 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, pour vous assurer que la saisie semi-automatique est disponible.
Découvrez comment aider les utilisateurs à éviter de saisir à nouveau leurs données de paiement.
Assurez-vous que la saisie automatique fonctionne pour tous vos champs.
En plus des adresses, des informations de compte et des informations de carte de crédit, les navigateurs peuvent aider les utilisateurs à remplir automatiquement de nombreux autres champs.
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 l'autocomplétion. Avez-vous trouvé une valeur appropriée pour le champ de votre formulaire ? Ajoutez-le.
L'utilisation de valeurs appropriées pour l'attribut autocomplete aide les navigateurs à proposer la meilleure option de saisie automatique et permet aux utilisateurs de remplir les formulaires plus rapidement.
Aider les navigateurs à comprendre qu'un champ ne doit pas être rempli automatiquement
Vous avez découvert le fonctionnement de la saisie automatique, comment vous pouvez aider les navigateurs à l'utiliser et pourquoi elle permet aux utilisateurs de remplir facilement des formulaires. Toutefois, il arrive 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 pour saisir des valeurs uniques et ponctuelles, comme un code à usage unique. La valeur est différente à chaque fois, et le navigateur ne doit pas enregistrer les 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 un champ honeypot (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 du remplissage automatique permet de s'assurer qu'un véritable utilisateur n'est pas identifié comme un robot, car le champ est rempli automatiquement.
Vous ne devez désactiver la saisie automatique que si vous êtes certain que cela aidera les utilisateurs.
Vérifier que vous avez bien compris
Tester vos connaissances sur la saisie automatique
Quelle valeur de saisie semi-automatique devez-vous utiliser pour le champ du mot de passe dans un formulaire d'inscription ?
autocomplete="password"autocomplete="off"autocomplete="new-password"autocomplete="current-password"