Après avoir découvert l'élément de formulaire et comment rendre un formulaire interactif, voyons comment aider les utilisateurs à ne pas avoir à saisir à nouveau des données.
Exploiter tout le potentiel de la saisie automatique
Remplir des formulaires peut être chronophage. Par exemple, saisir votre adresse à plusieurs reprises sur chaque site sur lequel vous souhaitez acheter quelque chose n'est pas une expérience d'achat optimale.
La saisie automatique peut vous aider. Vous saisissez votre adresse une seule fois. Désormais, votre navigateur vous proposera de remplir automatiquement la même adresse pour d'autres formulaires.
Vous avez déménagé dans une autre ville ? Ne vous inquiétez pas, l'ancienne adresse ne sera pas toujours disponible. Vous pouvez modifier les données d'adresse enregistrées par votre navigateur pour les mettre à jour.
Comment fonctionne la saisie automatique dans le navigateur ?
Un champ d'adresse peut avoir une apparence très différente d'un site à l'autre. Comment un navigateur sait-il qu'il s'agit d'un champ d'adresse ?
Les navigateurs utilisent des heuristiques pour identifier un champ d'adresse.
Quelles sont les valeurs des attributs name, type et id ?
Un attribut autocomplete est-il présent sur le contrôle de formulaire ?
Sur la base de ces informations, les navigateurs peuvent proposer de remplir automatiquement un champ avec des données du même type précédemment saisies. Les navigateurs peuvent même proposer de remplir automatiquement un formulaire entier.
Aider les navigateurs à utiliser la saisie automatique
Voyons ce que vous pouvez faire pour aider les navigateurs à proposer les bonnes options de saisie semi-automatique.
Utiliser des valeurs d'attributs appropriées
Comme vous l'avez vu, les navigateurs peuvent identifier le type de données en examinant les attributs d'un élément de contrôle de formulaire.
<label for="email">Email</label>
<input type="email" name="email" id="email">
Avez-vous un champ dans lequel les utilisateurs doivent saisir leur adresse e-mail ?
Utilisez email comme valeur pour les attributs name, id et type.
Trois indices indiquant au navigateur qu'il s'agit d'un champ d'adresse e-mail.
Attribut de saisie semi-automatique
Il existe d'autres exemples où les navigateurs peuvent toujours avoir du mal à identifier le type de données uniquement à partir des attributs name, id et type.
Vous pouvez y contribuer en utilisant l'attribut autocomplete.
Avez-vous déjà saisi un nom dans le navigateur que vous utilisez ? Le navigateur vous proposera probablement de le saisir à nouveau pour ce champ dans la démonstration.
Vous en apprendrez plus sur l'utilisation de la saisie semi-automatique et du remplissage automatique dans un prochain module.
Vérifier vos connaissances
Tester vos connaissances sur la saisie automatique
Sur quels attributs le remplissage automatique est-il proposé ?
name.typeautocomplete