Saisie automatique

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

Ressources

• La saisie semi-automatique attribut.
  • Meilleur formulaire de paiement et d'adresse pratiques