Je voudrais savoir s'il existe une sorte de balisage spécial pour activer la fonction de remplissage automatique de Chrome pour un formulaire spécifique. Je n'ai trouvé que des questions sur la façon de le désactiver, mais j'aimerais savoir si je peux ajouter une sorte de balisage au code html afin de dire au navigateur "ceci est l'entrée pour l'adresse" ou "ceci est le code postal field "pour le remplir correctement (on suppose que l'utilisateur a activé cette fonction).
Réponses:
MISE À JOUR pour 2017: On dirait que la réponse de Katie a plus d'informations à jour que la mienne. Futurs lecteurs: donnez votre avis sur sa réponse .
C'est une excellente question pour laquelle la documentation est étonnamment difficile à trouver. En fait, dans de nombreux cas, vous constaterez que la fonctionnalité de saisie automatique de Chrome "fonctionne". Par exemple, l'extrait de code HTML suivant produit un formulaire qui, du moins pour moi (Chrome v.18), est automatiquement rempli après avoir cliqué dans le premier champ:
<!DOCTYPE html>
<html>
<body>
<form method="post">
First name:<input type="text" name="fname" /><br />
Last name: <input type="text" name="lname" /><br />
E-mail: <input type="text" name="email" /><br />
Phone: <input type="text" name="phone" /><br />
Address: <input type="text" name="address" /><br />
</form>
</body>
</html>
Cependant, cette réponse n'est pas satisfaisante, car elle laisse la solution dans le domaine de la «magie». En creusant plus profondément, j'ai appris que Chrome (et d'autres navigateurs activés pour la saisie automatique) s'appuyaient principalement sur des indices contextuels pour déterminer le type de données à remplir dans les éléments de formulaire. Des exemples de tels indices contextuels incluent le named'un élément d'entrée, le texte entourant l'élément et tout texte d'espace réservé.
Récemment, cependant, l'équipe Chrome a reconnu qu'il s'agissait d'une solution insatisfaisante et a commencé à faire pression pour une normalisation dans ce domaine. Un article très instructif du groupe Google Webmasters a récemment abordé ce problème, expliquant:
Malheureusement, jusqu'à présent, il était difficile pour les webmasters de s'assurer que Chrome et d'autres fournisseurs de remplissage de formulaires puissent analyser correctement leur formulaire. Certaines normes existent; mais ils imposent de lourdes charges à la mise en œuvre du site Web, de sorte qu'ils ne sont pas beaucoup utilisés dans la pratique.
(Les "normes" auxquelles ils se réfèrent sont une version plus récente de la spécification mentionnée dans la réponse d'Avalanchis ci-dessus.)
Le post de Google poursuit en décrivant la solution proposée (qui fait l'objet de critiques importantes dans les commentaires du post). Ils proposent l'utilisation d'un nouvel attribut à cet effet:
Ajoutez simplement un attribut à l'élément d'entrée, par exemple un champ d'adresse e-mail pourrait ressembler à:
<input type=”text” name=”field1” x-autocompletetype=”email” />
... où le x-signifie "expérimental" et sera supprimé si et quand cela devient un standard. Lisez l'article pour plus de détails, ou si vous voulez creuser plus profondément, vous trouverez une explication plus complète de la proposition sur le wiki whatwg .
MISE
À JOUR: comme indiqué dans ces réponses perspicaces , toutes les expressions régulières que Chrome utilise pour identifier / reconnaître les champs communs se trouvent dans . Donc, pour répondre à la question d'origine, assurez-vous simplement que les noms de vos champs html correspondent à ces expressions. Quelques exemples incluent:autofill_regex_constants.cc.utf8
"first.*name|initials|fname|first$""last.*name|lname|surname|last$|secondname|family.*name""e.?mail""address.*line|address1|addr1|street""zip|postal|post.*code|pcode|^1z$"Cette question est assez ancienne mais j'ai une réponse à jour !
Voici un lien vers la documentation WHATWG pour activer la saisie semi-automatique.
Google a écrit un très bon guide pour développer des applications Web compatibles avec les appareils mobiles. Ils ont une section sur la façon de nommer les entrées sur les formulaires pour utiliser facilement le remplissage automatique. Même s'il est écrit pour mobile, cela s'applique à la fois au bureau et au mobile!
Voici quelques points clés sur la façon d'activer la saisie semi-automatique:
<label>pour tous vos <input>champsautocompleteattribut à vos <input>balises et remplissez-le à l'aide de ce guide .nameet autocompletepour toutes les <input>balisesExemple :
<label for="frmNameA">Name</label>
<input type="text" name="name" id="frmNameA"
placeholder="Full name" required autocomplete="name">
<label for="frmEmailA">Email</label>
<input type="email" name="email" id="frmEmailA"
placeholder="name@example.com" required autocomplete="email">
<!-- note that "emailC" will not be autocompleted -->
<label for="frmEmailC">Confirm Email</label>
<input type="email" name="emailC" id="frmEmailC"
placeholder="name@example.com" required autocomplete="email">
<label for="frmPhoneNumA">Phone</label>
<input type="tel" name="phone" id="frmPhoneNumA"
placeholder="+1-555-555-1212" required autocomplete="tel">
<input>balisesPour déclencher la saisie semi-automatique, assurez-vous de nommer correctement les attributs nameet autocompletedans vos <input>balises. Cela permettra automatiquement la saisie semi-automatique sur les formulaires. Assurez-vous également d'avoir un <label>! Cette information peut également être trouvée ici .
Voici comment nommer vos entrées:
name:name fname mname lnameautocomplete:
name (pour le nom complet)given-name (pour le prénom)additional-name (pour le deuxième prénom)family-name (pour le nom)<input type="text" name="fname" autocomplete="given-name">name:emailautocomplete:email<input type="text" name="email" autocomplete="email">name:address city region province state zip zip2 postal country autocomplete:
street-addressaddress-line1address-line2address-level1 (état ou province)address-level2 (ville)postal-code (code postal)countryname:phone mobile country-code area-code exchange suffix extautocomplete:telname:ccname cardnumber cvc ccmonth ccyear exp-date card-typeautocomplete:
cc-namecc-numbercc-csccc-exp-monthcc-exp-yearcc-expcc-typename:usernameautocomplete:usernamename:passwordautocomplete:
current-password (pour les formulaires de connexion)new-password (pour les formulaires d'inscription et de changement de mot de passe)D'après mes tests, la x-autocompletebalise ne fait rien. À la place, utilisez des autocompletebalises sur vos balises d'entrée et définissez leurs valeurs selon les spécifications HTML ici http://www.whatwg.org/specs/web-apps/current-work/multipage/association-of-controls-and-forms. html # autofill-field .
Exemple:
<input name="fname" autocomplete="given-name" type="text" placeholder="First Name" required>
La balise de formulaire parent nécessite autocomplete = "on" et method = "POST".
on , offou default. Donc, ce balisage n'est pas valide et sera sujet à des incohérences. Je pense en fait que le placement dans l'attribut de saisie semi-automatique n'est pas pertinent. J'imagine qu'il examine tous les attributs et que la saisie semi-automatique est l'un de ceux qu'il vérifie.
Vous devez nommer les éléments de manière appropriée afin que le navigateur les remplisse automatiquement.
Voici la spécification IETF pour cela:
J'ai juste joué avec les spécifications et j'ai eu un bel exemple de travail - y compris quelques champs supplémentaires.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<form autocomplete="on" method="POST">
<fieldset>
<legend>Ship the blue gift to...</legend>
<p>
<label> Firstname:
<input name="fname" autocomplete="section-blue shipping given-name" type="text" required>
</label>
</p>
<p>
<label> Lastname:
<input name="fname" autocomplete="section-blue shipping family-name" type="text" required>
</label>
</p>
<p>
<label> Address: <input name=ba
autocomplete="section-blue shipping street-address">
</label>
</p>
<p>
<label> City: <input name=bc
autocomplete="section-blue shipping address-level2">
</label>
</p>
<p>
<label> Postal Code: <input name=bp
autocomplete="section-blue shipping postal-code">
</label>
</p>
</fieldset>
<fieldset>
<legend>Ship the red gift to...</legend>
<p>
<label> Firstname:
<input name="fname" autocomplete="section-red shipping given-name" type="text" required>
</label>
</p>
<p>
<label> Lastname:
<input name="fname" autocomplete="section-red shipping family-name" type="text" required>
</label>
</p>
<p>
<label> Address: <input name=ra
autocomplete="section-red shipping street-address">
</label>
</p>
<p>
<label> City: <input name=bc
autocomplete="section-red shipping address-level2">
</label>
</p>
<p>
<label> Postal Code: <input name=rp
autocomplete="section-red shipping postal-code">
</label>
</p>
</fieldset>
<fieldset>
<legend>payment address</legend>
<p>
<label> Firstname:
<input name="fname" autocomplete="billing given-name" type="text" required>
</label>
</p>
<p>
<label> Lastname:
<input name="fname" autocomplete="billing family-name" type="text" required>
</label>
</p>
<p>
<label> Address: <input name=ra
autocomplete="billing street-address">
</label>
</p>
<p>
<label> City: <input name=bc
autocomplete="billing address-level2">
</label>
</p>
<p>
<label> Postal Code: <input name=rp
autocomplete="billing postal-code">
</label>
</p>
</fieldset>
<input type="submit" />
</form>
</body>
</html>
Il contient 2 zones d'adresses distinctes et différents types d'adresses. Je l'ai également testé sur iOS 8.1.0 et il semble qu'il remplisse toujours tous les champs à la fois, tandis que le chrome du bureau remplit automatiquement l'adresse par adresse.
Il semble que nous aurons plus de contrôle sur cette fonctionnalité de remplissage automatique, une nouvelle API expérimentale arrive dans Chrome Canary, qui peut être utilisée pour accéder aux données après l'avoir demandé à l'utilisateur:
http://www.chromium.org/developers/using-requestautocomplete http://blog.alexmaccaw.com/requestautocomplete
nouvelles infos par google:
http://googlewebmastercentral.blogspot.de/2015/03/helping-users-fill-out-online-forms.html
Voici la vraie réponse:
Cela fonctionne: http://jsfiddle.net/68LsL1sq/1/ <label for="name">Nom</label>
Ce n'est pas: http://jsfiddle.net/68LsL1sq/2/ <label for="name">No</label>
La seule différence réside dans l'étiquette elle-même. Le "Nom" vient de "Nom" ou "Nome" en portugais.
Voici donc ce dont vous avez besoin:
<label for="id_of_field">Name</label><input id="id_of_field"></input>Rien de plus.
Voici la nouvelle liste des "noms" de remplissage automatique de Google. Il existe tous les noms pris en charge dans toutes les langues autorisées.
Dans mon cas, $('#EmailAddress').attr('autocomplete', 'off');ne fonctionne pas. Mais la suite fonctionne sur la version 67 de chrome par jQuery.
$('#EmailAddress').attr('autocomplete', 'new-email');
$('#Password').attr('autocomplete', 'new-password');