Déterminer l’objet de la saisie
Overview – Déterminer l’objet de la saisie
Lorsqu'un champ de saisie de formulaire recueille des informations personnelles telles que le nom, le numéro de téléphone, l'adresse électronique et l'adresse postale de l'utilisateur, définissez sa sémantique de manière programmatique avec l'attribut autocomplete Les technologies d'assistance s'appuient sur la valeur de l'attribut autocomplete pour remplir automatiquement les formulaires, en s'appuyant sur les entrées antérieures de l'utilisateur stockées dans le navigateur. Cela évite à l'utilisateur d'avoir à taper l'information. Les technologies d'assistance exploitent également la valeur de autocomplete pour associer des icônes aux champs de saisie, pour les utilisateurs qui préfèrent utiliser des images pour communiquer.
La valeur de l'attribut prend l'un des 53 noms de champs potentiels de la liste de WCAG: Input Purposes for User Interface Components. Les noms des champs sont soit larges, soit étroits. Par exemple, en ce qui concerne le nom de l'utilisateur, il est possible d'identifier l'objectif d'une entrée comme étant le nom complet, le prénom, le nom de famille ou le surnom. Vous pouvez affiner l'objectif en ajoutant à la valeur de autocomplete des éléments de détail séparés par des espaces :
shippingbillinghomeworkmobilefaxpager
Utilisez autocomplete sur les éléments <input> qui prennent une valeur textuelle ou numérique en entrée, les éléments <textarea> et les éléments <select>. La spécification HTML5 énumère les éléments appropriés à associer à chaque nom de champ autocomplete. (disponible en anglais seulement)
Bon exemple : Utilisation de l’attribut autocomplete
Il s'agit d'un formulaire simple qui recueille les coordonnées de l'utilisateur à l'aide de l'attribut autocomplete. Les noms des champs autocomplete utilisent des jetons pour faire la distinction entre la facturation et l'expédition, et entre le téléphone fixe et le téléphone mobile.
Les champs ne se remplissent automatiquement que si le navigateur a enregistré les valeurs des noms de champs (par exemple, given-name, family-name) ors d'une précédente soumission de formulaire. Pour tester, saisissez quelques valeurs et appuyez sur "Remplir le navigateur" pour stocker les valeurs des noms de champs dans le navigateur. Les données ne sont pas soumises, et nous ne les stockons pas.
L'exemple commence
L'exemple finit
Visualisation simplifiée du HTML
Ce balisage a été simplifié en supprimant les éléments de regroupement <div> et les attributs de classe.
HTML
Début du code
<form method="post" action="step1">
<label for="fname">Prénom</label>
<input id="fname" type="text" autocomplete="given-name">
<label for="lname">Nom de famille</label>
<input id="lname" type="text" autocomplete="family-name">
<label for="jobtitle">Titre du poste</label>
<input type="text" id="jobtitle" autocomplete="organization-title">
<label for="org">Organisation</label>
<input type="text" id="org" autocomplete="organization">
<fieldset>
<legend>Adresse d'expédition</legend>
<label for="ship-st">Rue</label>
<input type="text" id="ship-st" autocomplete="shipping street-address">
<label for="ship-city">Ville</label>
<input type="text" id="ship-city" autocomplete="shipping address-level2">
<label for="ship-prov">Province</label>
<input type="text" id="ship-prov" autocomplete="shipping address-level1">
<label for="ship-mobile-phone">Téléphone portable pour la livraison</label>
<input type="tel" id="ship-mobile-phone" autocomplete="shipping mobile tel-national">
<label for="ship-email">Courriel</label>
<input type="email" id="ship-email" autocomplete="shipping email">
</fieldset>
<fieldset>
<legend>L'adresse de facturation</legend>
<label for="bill-st">Rue</label>
<input type="text" id="bill-st" autocomplete="billing street-address">
<label for="bill-city">Ville</label>
<input type="text" id="bill-city" autocomplete="billing address-level2">
<label for="bill-prov">Province</label>
<input type="text" id="bill-prov" autocomplete="billing address-level1">
<label for="bill-phone">Téléphone</label>
<input type="tel" id="bill-phone" autocomplete="billing tel-national">
<label for="bill-email">Courriel</label>
<input type="email" id="bill-email" autocomplete="billing email">
</fieldset>
<input type="submit" value="Remplir le navigateur">
</form>Fin du code