Devoir saisir à nouveau son adresse pour la dixième fois est fatigant. Les navigateurs, et vous,
en tant que développeur, peut aider les utilisateurs à saisir des données plus rapidement et éviter de les saisir à nouveau.
Ce module vous explique comment fonctionne la saisie automatique, et comment autocomplete et d'autres
attributs d'élément permettent de s'assurer 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 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 quand même une activité souvent. Au fil du temps, vous remplissez de nombreux formulaires et vous remplissez souvent les mêmes données. Pour aider les utilisateurs à remplir les formulaires plus rapidement, vous pouvez remplir automatiquement les champs du formulaire avec les données saisies précédemment. Il s'agit de la saisie automatique.
Comment les navigateurs détectent-ils les données à saisir automatiquement ? Examinez un exemple de formulaire pour le savoir.
<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 du remplissage des données.
Disons que, des semaines plus tard, vous remplissez un autre formulaire sur un autre site Web. Ce site a également
contient 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, la connexion, le paiement, le règlement et les formulaires dans lesquels vous devez saisir votre nom ou adresse e-mail.
Vous pouvez aider les navigateurs à proposer les meilleures options de saisie automatique en utilisant des
pour l'attribut autocomplete. Il existe de nombreuses valeurs possibles pour autocomplete. Voici un exemple d'adresses.
Votre navigateur a-t-il déjà une adresse enregistrée pour vous ? Parfait ! Après avoir avec le premier champ du formulaire d'adresse, le navigateur affiche une liste d'adresses enregistrées. Vous pouvez en choisir un, et le navigateur remplira tous les champs en rapport avec l'adresse. La saisie automatique permet de remplir des formulaires rapidement et facilement.
Tous les formulaires d'adresse ne disposent pas des mêmes champs et leur ordre varie également.
L'utilisation de valeurs correctes pour autocomplete garantit que le navigateur remplit
les valeurs correctes
pour un formulaire. Des valeurs sont disponibles pour country, postal-code,
et beaucoup
plus encore.
Assurez-vous que les utilisateurs peuvent se connecter rapidement et utiliser des mots de passe sécurisés
Beaucoup de gens ont du mal à se souvenir des mots de passe. Les méthodes les plus courantes mot de passe 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 intègrent des gestionnaires de mots de passe pour générer, enregistrer et renseigner mots de passe à votre place. Découvrez comment aider les navigateurs à remplir automatiquement les adresses e-mail et la gestion des mots de passe.
Vous pouvez utiliser autocomplete="email" pour un champ d'adresse e-mail afin que les utilisateurs bénéficient de la 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 remplir
mots de passe utilisés. Vous pouvez utiliser autocomplete="new-password" pour vous assurer que les navigateurs
lui proposer de générer un nouveau mot de passe.
Sur le formulaire de connexion, vous pouvez utiliser autocomplete="current-password" pour indiquer
navigateurs pour vous permettre d'indiquer les mots de passe précédemment enregistrés
sur votre site Web.
Vous pouvez configurer l'authentification à deux facteurs sur de nombreux sites Web. En plus des mot de passe, un code à usage unique est envoyé par SMS ou via une application d'authentification à deux facteurs.
Et si le code reçu par SMS était suggéré ?
par le clavier à l'écran. Vous pouvez aussi la sélectionner directement pour remplir
? Dans Safari 14 ou version ultérieure, vous pouvez utiliser
autocomplete="one-time-code"
pour y parvenir. Dans Chrome sous Android, vous pouvez utiliser l'outil WebOTP
API pour obtenir
avec JavaScript.
En savoir plus sur la validation de numéros de téléphone sur le Web avec le formulaire de saisie de mot de passe à usage unique envoyé par SMS bonnes pratiques.
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, mais si vous devez créer vos propres formulaires de paiement, veillez à ce que les utilisateurs puissent facilement vos informations de paiement.
Vous pouvez réutiliser l'attribut autocomplete pour vous assurer que les navigateurs proposent l'attribut
les options de saisie automatique correctes.
Des valeurs sont associées au numéro de carte de crédit cc-number et à l'expiration de la carte de crédit.
la date cc-exp, et toutes les autres informations
nécessaire
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
chiffres, pour garantir que les navigateurs proposent la saisie automatique. Utilisez des éléments de formulaire standard, pour
par exemple, un <select> pour les dates des cartes de paiement, au lieu d'éléments personnalisés, pour
pour s'assurer que la saisie semi-automatique est disponible.
Découvrez comment aider les utilisateurs à éviter d'avoir à nouveau des paiements. données.
Assurez-vous que la saisie automatique fonctionne pour tous vos champs
En plus des adresses, des informations de compte et de carte de crédit, il existe de nombreux autres champs où 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 disponible valeurs pour la saisie semi-automatique. Vous avez trouvé une valeur appropriée pour le champ de votre formulaire ? Ajoutez-le.
L'utilisation de valeurs appropriées pour l'attribut autocomplete permet aux navigateurs de proposer le
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 renseigné automatiquement
Vous avez découvert le fonctionnement de la saisie automatique, comment aider les navigateurs à utiliser cette fonctionnalité et pourquoi la saisie automatique permet aux utilisateurs de remplir facilement des formulaires. Cependant, il arrive parfois les navigateurs ne proposent pas 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 uniques.
comme un champ de code à usage unique. La valeur diffère à chaque fois,
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 "Honeypot" (voir la section
module). Même si le
champ n’est pas
visible, les navigateurs peuvent la saisir automatiquement avec le reste des champs. Activation de la saisie automatique...
désactivé garantit qu'un utilisateur réel n'est pas identifié comme robot, car le champ est
automatiquement.
Ne désactivez la saisie automatique que si vous êtes sûr qu'elle aidera les utilisateurs.
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"autocomplete="off"autocomplete="new-password"autocomplete="current-password"