Après avoir découvert les éléments du formulaire et appris à rendre un formulaire interactif, voyons comment vous pouvez aider les utilisateurs à éviter de saisir à nouveau des données.
Profitez pleinement de la saisie automatique
Remplir un formulaire peut prendre du temps. Par exemple, saisir plusieurs fois votre adresse sur chaque site où vous souhaitez effectuer un achat n'est pas une expérience d'achat optimale.
La saisie automatique peut vous y aider. Vous saisissez votre adresse une seule fois. À partir de maintenant, 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 craignez pas que l'ancienne adresse vous soit proposée à jamais. Vous pouvez modifier les adresses que votre navigateur a enregistrées pour vous afin qu'elles restent à jour.
Comment fonctionne la saisie automatique dans le navigateur ?
L'apparence d'un champ d'adresse peut varier d'un site à l'autre. Comment le navigateur peut-il savoir 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 ?
Existe-t-il un attribut autocomplete sur la commande de formulaire ?
En fonction de ces informations, les navigateurs peuvent proposer de remplir automatiquement un champ avec des données du même type saisies précédemment. Les navigateurs peuvent même proposer de remplir automatiquement l'intégralité d'un formulaire.
Aider les navigateurs à utiliser la saisie automatique
Voyons ce que vous pouvez faire pour aider les navigateurs à proposer les bonnes options de saisie automatique.
Utilisez des valeurs d'attributs sensibles
Comme vous l'avez appris, les navigateurs peuvent identifier le type de données en examinant les attributs d'une commande de formulaire.
<label for="email">Email</label>
<input type="email" name="email" id="email">
Disposez-vous d'un champ dans lequel les utilisateurs doivent saisir leur adresse e-mail ?
Utilisez email comme valeur pour les attributs name, id et type.
Trois suggestions pour le navigateur : il s'agit d'un champ d'adresse e-mail.
Attribut de saisie semi-automatique
Dans d'autres exemples, les navigateurs peuvent avoir du mal à identifier le type de données uniquement à partir des attributs name, id et type.
Pour ce faire, vous pouvez utiliser l'attribut autocomplete.
Avez-vous déjà saisi un nom dans votre navigateur ? Le navigateur vous proposera probablement de le remplir à nouveau pour ce champ dans la démo.
Vous en saurez plus sur l'utilisation de la saisie semi-automatique et de la saisie automatique dans un module ultérieur.
Testez vos connaissances
Tester vos connaissances sur la saisie automatique
En fonction de quels attributs la saisie automatique est-elle proposée ?
nametypeautocomplete