Comment déclencher la saisie automatique dans Google Chrome?

Question 1

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).

Question 2

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

Prénom: "first.*name|initials|fname|first$"
nom de famille: "last.*name|lname|surname|last$|secondname|family.*name"
email: "e.?mail"
Adresse 1): "address.*line|address1|addr1|street"
code postal: "zip|postal|post.*code|pcode|^1z$"

Question 3

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!

Comment activer la saisie semi-automatique sur vos formulaires HTML

Voici quelques points clés sur la façon d'activer la saisie semi-automatique:

Utilisez un <label>pour tous vos <input>champs
Ajoutez un autocompleteattribut à vos <input>balises et remplissez-le à l'aide de ce guide .
Nommez correctement vos attributs nameet autocompletepour toutes les <input>balises

Exemple :

<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="[email protected]" required autocomplete="email">

<!-- note that "emailC" will not be autocompleted -->
<label for="frmEmailC">Confirm Email</label>
<input type="email" name="emailC" id="frmEmailC"
placeholder="[email protected]" required autocomplete="email">

<label for="frmPhoneNumA">Phone</label>
<input type="tel" name="phone" id="frmPhoneNumA"
placeholder="+1-555-555-1212" required autocomplete="tel">

Comment nommer vos `<input>`balises

Pour 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:

Nom
- Utilisez l'un de ces éléments pour name:name fname mname lname
- Utilisez l'un de ces éléments pour autocomplete:
  - name (pour le nom complet)
  - given-name (pour le prénom)
  - additional-name (pour le deuxième prénom)
  - family-name (pour le nom)
- Exemple: <input type="text" name="fname" autocomplete="given-name">
Email
- Utilisez l'un de ces éléments pour name:email
- Utilisez l'un de ces éléments pour autocomplete:email
- Exemple: <input type="text" name="email" autocomplete="email">
Adresse
- Utilisez l'un de ces éléments pour name:address city region province state zip zip2 postal country
- Utilisez l'un de ces éléments pour autocomplete:
  - Pour une entrée d'adresse:
    - street-address
  - Pour deux entrées d'adresse:
    - address-line1
    - address-line2
  - address-level1 (état ou province)
  - address-level2 (ville)
  - postal-code (code postal)
  - country
Téléphone
- Utilisez l'un de ces éléments pour name:phone mobile country-code area-code exchange suffix ext
- Utilisez l'un de ces éléments pour autocomplete:tel
Carte de crédit
- Utilisez l'un de ces éléments pour name:ccname cardnumber cvc ccmonth ccyear exp-date card-type
- Utilisez l'un de ces éléments pour autocomplete:
  - cc-name
  - cc-number
  - cc-csc
  - cc-exp-month
  - cc-exp-year
  - cc-exp
  - cc-type
Noms d'utilisateur
- Utilisez l'un de ces éléments pour name:username
- Utilisez l'un de ces éléments pour autocomplete:username
Mots de passe
- Utilisez l'un de ces éléments pour name:password
- Utilisez l'un de ces éléments pour autocomplete:
  - current-password (pour les formulaires de connexion)
  - new-password (pour les formulaires d'inscription et de changement de mot de passe)

Ressources

Norme HTML WHATWG actuelle pour la saisie semi-automatique.
"Créer des formulaires étonnants" de Google . Semble être mis à jour presque quotidiennement. Excellente lecture.
"Aidez les utilisateurs à effectuer des achats plus rapidement grâce à la saisie automatique" de Google en 2015.

Question 4

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".

Question 5

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:

http://www.ietf.org/rfc/rfc3106.txt 1

Question 6

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>

JSBIN

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.

Question 7

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

https://developers.google.com/web/fundamentals/input/form/label-and-name-inputs#use-metadata-to-enable-auto-complete

Question 8

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:

Un wrapper de formulaire;
UNE <label for="id_of_field">Name</label>
Un <input id="id_of_field"></input>

Rien de plus.

Question 9

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.

autofill_regex_constants.cc

Question 10

Google fournit désormais une documentation à ce sujet:

Aidez les utilisateurs à passer à la caisse plus rapidement grâce à la saisie automatique | Web | Développeurs Google

et

Créez des formulaires étonnants: utilisez les métadonnées pour activer la saisie semi-automatique Web | Développeurs Google

Question 11

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');

Answer 1

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).

Answer 2

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

Prénom: "first.*name|initials|fname|first$"
nom de famille: "last.*name|lname|surname|last$|secondname|family.*name"
email: "e.?mail"
Adresse 1): "address.*line|address1|addr1|street"
code postal: "zip|postal|post.*code|pcode|^1z$"

Answer 3

3

De plus, vous devez soumettre un <form> -Tag complet avec "action" et "method"

qualle

Answer 4

Bien que cela ait pu être pertinent à partir de mes tests, seules les méthodes que j'ai décrites ci-dessous fonctionnent réellement.

Micah

Answer 5

Je suppose que les constantes regex à remplissage automatique ne sont pas la seule chose qu'elle utilise, elles se souviennent également des éléments des entrées nommées personnalisées.

CloudMeta

Answer 6

1

Utilisé l'URL dans cette réponse et elle était cassée. Cela fonctionne maintenant: code.google.com/p/chromium/codesearch#chromium/src/components/…

Nathan

Answer 7

2

L'URL fournie par @Nathan ne fonctionne plus - Voici la version actuelle, jusqu'à ce qu'ils la modifient à nouveau :) cs.chromium.org/chromium/src/components/autofill/core/common/…

HungryBeagle

Answer 8

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!

Comment activer la saisie semi-automatique sur vos formulaires HTML

Voici quelques points clés sur la façon d'activer la saisie semi-automatique:

Utilisez un <label>pour tous vos <input>champs
Ajoutez un autocompleteattribut à vos <input>balises et remplissez-le à l'aide de ce guide .
Nommez correctement vos attributs nameet autocompletepour toutes les <input>balises

Exemple :

<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="[email protected]" required autocomplete="email">

<!-- note that "emailC" will not be autocompleted -->
<label for="frmEmailC">Confirm Email</label>
<input type="email" name="emailC" id="frmEmailC"
placeholder="[email protected]" required autocomplete="email">

<label for="frmPhoneNumA">Phone</label>
<input type="tel" name="phone" id="frmPhoneNumA"
placeholder="+1-555-555-1212" required autocomplete="tel">

Comment nommer vos `<input>`balises

Pour 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:

Nom
- Utilisez l'un de ces éléments pour name:name fname mname lname
- Utilisez l'un de ces éléments pour autocomplete:
  - name (pour le nom complet)
  - given-name (pour le prénom)
  - additional-name (pour le deuxième prénom)
  - family-name (pour le nom)
- Exemple: <input type="text" name="fname" autocomplete="given-name">
Email
- Utilisez l'un de ces éléments pour name:email
- Utilisez l'un de ces éléments pour autocomplete:email
- Exemple: <input type="text" name="email" autocomplete="email">
Adresse
- Utilisez l'un de ces éléments pour name:address city region province state zip zip2 postal country
- Utilisez l'un de ces éléments pour autocomplete:
  - Pour une entrée d'adresse:
    - street-address
  - Pour deux entrées d'adresse:
    - address-line1
    - address-line2
  - address-level1 (état ou province)
  - address-level2 (ville)
  - postal-code (code postal)
  - country
Téléphone
- Utilisez l'un de ces éléments pour name:phone mobile country-code area-code exchange suffix ext
- Utilisez l'un de ces éléments pour autocomplete:tel
Carte de crédit
- Utilisez l'un de ces éléments pour name:ccname cardnumber cvc ccmonth ccyear exp-date card-type
- Utilisez l'un de ces éléments pour autocomplete:
  - cc-name
  - cc-number
  - cc-csc
  - cc-exp-month
  - cc-exp-year
  - cc-exp
  - cc-type
Noms d'utilisateur
- Utilisez l'un de ces éléments pour name:username
- Utilisez l'un de ces éléments pour autocomplete:username
Mots de passe
- Utilisez l'un de ces éléments pour name:password
- Utilisez l'un de ces éléments pour autocomplete:
  - current-password (pour les formulaires de connexion)
  - new-password (pour les formulaires d'inscription et de changement de mot de passe)

Ressources

Norme HTML WHATWG actuelle pour la saisie semi-automatique.
"Créer des formulaires étonnants" de Google . Semble être mis à jour presque quotidiennement. Excellente lecture.
"Aidez les utilisateurs à effectuer des achats plus rapidement grâce à la saisie automatique" de Google en 2015.

Answer 9

39

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".

Michée
la source

2

dans quels navigateurs cette spécification est-elle implémentée? une expérience / des tests déjà effectués?

staabm

La spécification W3C stipule que la saisie semi-automatique ne doit contenir que 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.

Liam

1

C'est du HTML correct, voir les spécifications WHATWG et l'article de Google .

AlecRust le

Answer 10

2

dans quels navigateurs cette spécification est-elle implémentée? une expérience / des tests déjà effectués?

staabm

Answer 11

La spécification W3C stipule que la saisie semi-automatique ne doit contenir que 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.

Liam

Answer 12

1

C'est du HTML correct, voir les spécifications WHATWG et l'article de Google .

AlecRust le

Answer 13

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:

http://www.ietf.org/rfc/rfc3106.txt 1

Answer 14

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>

JSBIN

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.

Answer 15

1

Je ne sais pas pourquoi cette réponse reçoit des votes négatifs. L'exemple ci-dessus fonctionne toujours pour moi en utilisant les navigateurs décrits

staabm

Answer 16

1

La saisie semi-automatique montrée dans les exemples ci-dessus provient d'ici: html.spec.whatwg.org/multipage/forms.html#autofill

Bryan Rehbein

Answer 17

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

https://developers.google.com/web/fundamentals/input/form/label-and-name-inputs#use-metadata-to-enable-auto-complete

Answer 18

0

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:

Un wrapper de formulaire;
UNE <label for="id_of_field">Name</label>
Un <input id="id_of_field"></input>

Rien de plus.

Totty.js
la source

J'ai aussi compris que l'étiquette pouvait également déclencher l'auto-complétion des chromes.

emfi

Donc, votre point est que le nom de l'étiquette est également utilisé lors de l'élaboration des champs de saisie semi-automatique? Cette réponse n'est pas très claire

Liam

En fait, Nom vient du français. Mais je l'ai fait fonctionner sans étiquette, un espace réservé pour l'entrée avec la valeur correcte fonctionne également.

AxelH

Answer 19

J'ai aussi compris que l'étiquette pouvait également déclencher l'auto-complétion des chromes.

emfi

Answer 20

Donc, votre point est que le nom de l'étiquette est également utilisé lors de l'élaboration des champs de saisie semi-automatique? Cette réponse n'est pas très claire

Liam

Answer 21

En fait, Nom vient du français. Mais je l'ai fait fonctionner sans étiquette, un espace réservé pour l'entrée avec la valeur correcte fonctionne également.

AxelH

Answer 22

0

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.

autofill_regex_constants.cc

Alvargon
la source

Answer 23

0

Google fournit désormais une documentation à ce sujet:

Aidez les utilisateurs à passer à la caisse plus rapidement grâce à la saisie automatique | Web | Développeurs Google

et

Créez des formulaires étonnants: utilisez les métadonnées pour activer la saisie semi-automatique Web | Développeurs Google

Henry
la source

Les réponses contenant uniquement des liens deviennent inutiles si ces liens disparaissent, comme le premier de cette réponse.

bfontaine le

C'est vrai, mais c'est pourquoi la réponse est un wiki communautaire: encourager les autres à y contribuer. Le vote défavorable d'un wiki de la communauté n'a pas d'impact sur l'auteur, il ne sert qu'à enterrer la propre documentation de Google. N'hésitez pas à mettre à jour une réponse wiki de la communauté, surtout si c'est quelque chose d'aussi simple que de mettre à jour un lien!

henry

Answer 24

Les réponses contenant uniquement des liens deviennent inutiles si ces liens disparaissent, comme le premier de cette réponse.

bfontaine le

Answer 25

C'est vrai, mais c'est pourquoi la réponse est un wiki communautaire: encourager les autres à y contribuer. Le vote défavorable d'un wiki de la communauté n'a pas d'impact sur l'auteur, il ne sert qu'à enterrer la propre documentation de Google. N'hésitez pas à mettre à jour une réponse wiki de la communauté, surtout si c'est quelque chose d'aussi simple que de mettre à jour un lien!

henry

Answer 26

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');

Comment déclencher la saisie automatique dans Google Chrome?

Réponses:

Comment activer la saisie semi-automatique sur vos formulaires HTML

Comment nommer vos <input>balises

Ressources

JSBIN

Comment nommer vos `<input>`balises