Faciliter l’auto-complétion de formulaires avec Autofill

Personne,enfin je crois, n’aime remplir des formulaires de plusieurs dizaines de champs, sur parfois plusieurs pages. Cela est surtout le cas quand il s’agit de le faire depuis son smartphone : ça devient vite enervant, surtout s’il s’agit d’un formulaire que l’on avait déjà remplit dans le passé.

Pour résoudre cette difficulté rencontrée par les internautes, les navigateurs ont intégré l’auto-complétion des champs de formulaires. Chrome en particulier a introduit Autofill qui permet de stocker vos informations de saisies dans un formulaire, pour les rendre disponible lors d’une prochaine saisie comportant des champs similaires (notons les plus courants : adresse, ville, pays, nom, numéro de carte de crédit,…). Dans cet article, nous allons voir comment Autofill vous fera gagner énormement de temps, à vous ainsi qu’à votre utilisateurs.

Autofill : comment ça marche ?

Imaginez que vous vous inscrivez sur un site de vente en ligne, créé par un très bon développeur. Vous renseignez des informations de base comme votre Nom, prénom, Adresse, ville, Pays et Carte bancaire. Vous validez le formulaire pour créer votre compte.

Quelques jours plus tard vous décidez de vous inscrire sur un site de covoiturage, développé par un autre bon développeur, qui là aussi vous demande votre Nom, prénom, Adresse, ville, Pays et Carte bancaire. Avec Autofill, vous n’aurez plus à ressaisir ces informations puisqu’elles auront déjà été sauvegardées dans votre navigateur. Il vous suffira alors de cliquer sur le premier champs (Nom), puis de saisir la première lettre pour voir apparaitre une suggestion de données.

En cliquant sur la suggestion (touche « Entrée »), le formulaire se remplira automatiquement, vous faisant gagner un temps précieux dans votre journée déjà bien chargée.

Autofill gère différents types d’attributs comme les cartes de crédits, le Nom, l’Adress,…

Carte de crédit

Attribut « name » Attribut « autocomplete »
ccname cc-name
cardnumber cc-number
cvc cc-csc
ccmonth cc-exp-month
ccyear cc-exp-year
exp-date cc-exp
card-type cc-type

 

<label for="frmNameCC">Nom du détenteur de la carte</label>
<input autocomplete="cc-name" name="ccname" required="" type="text" id="frmNameCC" placeholder="Nom complet" />

<label for="frmCCNum">Numéro de carte</label>
<input autocomplete="cc-number" name="cardnumber" required="" type="text" id="frmCCNum" />

<label for="frmCCCVC">Cryptogramme</label>
<input autocomplete="cc-csc" name="cvc" required="" type="text" id="frmCCCVC" />

<label for="frmCCExp">Date d'expiration</label>
<input autocomplete="cc-exp" name="cc-exp" required="" type="text" id="frmCCExp" placeholder="MM-YYYY" />

Nom

Attribut « name » Attribut « autocomplete »
name name (Nom complet)
fname given-name(Prénom)
mname additional-name(Deuxième Prénom)
lname family-name(Nom de famille)
<label for="frmNameA">Nom</label> <input name="name" id="frmNameA" placeholder="Nom complet" required autocomplete="name">

Email

Attribut « name » Attribut « autocomplete »
email email
<label for="frmEmailA">Email</label>
<input type="email" name="email" id="frmEmailA" placeholder="[email protected]" required autocomplete="email"><label for="frmEmailC">Confirmer l'Email</label>
<input type="email" name="emailC" id="frmEmailC" placeholder="[email protected]" required autocomplete="email">

Adresse

Attribut « name » Attribut « autocomplete »
adress street-address (Si l’adresse postale s’écrit sur une seule ligne)
city address-line1, address-line2 (Si l’adresse postale s’écrit sur deux lignes)
region address-level1 (Région)
province address-level2 (Département ou autre en fonction du Pays)
state postal-code (Code postal)
zip country
zip2  
postal  
country  
<label for="frmAddressS">Adresse</label>
<input name="ship-address" required id="frmAddressS" placeholder="17, rue du Berry" autocomplete="shipping street-address">
<label for="frmCityS">Ville</label>
<input name="ship-city" required id="frmCityS" placeholder="Troyes" autocomplete="shipping address-level2">
<label for="frmStateS">Région</label>
<input name="ship-state" required id="frmStateS" placeholder="Champagne-Ardenne" autocomplete="shipping address-level1">
<label for="frmZipS">Code postal</label>
<input name="ship-zip" required id="frmZipS" placeholder="10000" autocomplete="shipping postal-code">
<label for="frmCountryS">Pays</label>
<input name="ship-country" required id="frmCountryS" placeholder="FRANCE" autocomplete="shipping country">

Téléphone

Attribut « name » Attribut « autocomplete »
phone tel (Numéro de téléphone)
mobile  
country-code  
area-code  
exchange  
suffix country
ext  

Exemple complet

<form method="post" id="usrForm">
<fieldset>
<legend>Informations de contact</legend>
<label for="frmNameA">Nom</label>
<input name="name" id="frmNameA" placeholder="Nom complet" required autocomplete="name">
<label for="frmEmailA">Email</label>
<input type="email" name="email" id="frmEmailA" placeholder="[email protected]"; required autocomplete="email">
<label for="frmEmailC">Confirmer l'Email</label>
<input type="email" name="emailC" id="frmEmailC" placeholder="[email protected]"; required autocomplete="email">
<label for="frmPhoneNumA">Téléphone</label>
<input type="tel" name="phone" id="frmPhoneNumA" placeholder="+33650780934" required autocomplete="tel"><datalist id="chocType">
<option value="white">
<option value="milk">
<option value="dark"></datalist>
</fieldset>
<fieldset>
<legend>Envoi</legend>
<label for="frmAddressS">Adresse postale</label>
<input name="ship-address" required id="frmAddressS" placeholder="17, rue du Berry" autocomplete="shipping street-address">
<label for="frmCityS">Ville</label>
<input name="ship-city" required id="frmCityS" placeholder="Troyes" autocomplete="shipping locality">
<label for="frmStateS">Région</label>
<input name="ship-state" required id="frmStateS" placeholder="Champagne-Ardenne" autocomplete="shipping region">
<label for="frmZipS">Code postal</label>
<input name="ship-zip" required id="frmZipS" placeholder="10000" autocomplete="shipping postal-code">
<label for="frmCountryS">Pays</label>
<input name="ship-country" required id="frmCountryS" placeholder="FRANCE" autocomplete="shipping country"><label>
<input type="checkbox" name="billAndShip" id="cbBillAndShip">
<br>Envoi à cette adresse.</label>
</fieldset>
<fieldset>
<legend>Adresse de Facturation</legend>
<label for="frmAddressB">Adresse</label>
<input name="bill-address" id="frmAddressB" required placeholder="17, rue du Berry" autocomplete="billing street-address">
<label for="frmCityB">Ville</label>
<input name="bill-city" id="frmCityB" required placeholder="Troyes" autocomplete="billing locality">
<label for="frmStateB">Région</label>
<input name="bill-state" id="frmStateB" required placeholder="Champagne-Ardenne" autocomplete="billing region">
<label for="frmZipB">Code postal</label>
<input name="bill-zip" id="frmZipB" required placeholder="10000" autocomplete="billing postal-code">
<label for="frmCountryB">Pays</label>
<input name="bill-country" id="frmCountryB" required placeholder="FRANCE" autocomplete="billing country"></fieldset><div id="paymentSec">
<fieldset>
<legend>Paiement</legend>
<label for="frmNameCC">Détenteur de la carte</label>
<input name="ccname" id="frmNameCC" required placeholder="Full Name" autocomplete="cc-name">
<label for="frmCCNum">Numéro de carte bancaire</label>
<input name="cardnumber" id="frmCCNum" required autocomplete="cc-number">
<label for="frmCCCVC">Cryptogramme</label>
<input name="cvc" id="frmCCCVC" required autocomplete="cc-csc">
<label for="frmCCExp">Date d'expiration</label>
<input name="cc-exp" id="frmCCExp" required placeholder="MM-YYYY" autocomplete="cc-exp">
<div>
<button class="btn" id="butCheckout">Valider</button>
</div>
</fieldset>
</div>
</form>

Laisser un commentaire