web-dev-qa-db-fra.com

Comment déclencher la saisie automatique dans Google Chrome?

J'aimerais savoir s'il existe une sorte de balisage spécial permettant d'activer la fonctionnalité 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 d'indiquer au navigateur "ceci est l'entrée de l'adresse" ou "ceci est le code postal champ "pour le remplir correctement (si l'utilisateur a activé cette fonction).

htmlgoogle-chromeautofill
166
Riesling

MISE À JOUR POUR 2017: On dirait que la réponse de Katie contient des informations plus récentes que la mienne. Futurs lecteurs: donnez votre vote positif à 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é Chrome Remplissage automatique "ne fonctionne que". Par exemple, l'extrait de code HTML suivant génère 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, j'ai appris que Chrome (et d'autres navigateurs activés pour le remplissage automatique) reposaient principalement sur des indices contextuels pour déterminer le type de données à renseigner dans les éléments de formulaire. Des exemples de tels indices contextuels incluent la name d'un élément d'entrée, le texte entourant l'élément et tout texte de marque de réservation.

Récemment, cependant, l’équipe Chrome a reconnu qu’il s’agissait d’une solution peu satisfaisante et a commencé à faire pression pour une normalisation dans ce domaine. n article très informatif du groupe Google Webmasters a récemment abordé cette question, en expliquant:

Malheureusement, il était jusqu'à présent difficile pour les webmasters de s'assurer que Chrome et les autres fournisseurs de remplissage de formulaire puissent analyser correctement leur formulaire. Certaines normes existent; Cependant, ils ont imposé de lourdes charges à la mise en place du site Web, de sorte qu’ils ne sont pas beaucoup utilisés dans la pratique.

(Les "standards" auxquels ils se réfèrent sont ne version plus récente de la spécification mentionnée dans la réponse d'Avalanchis ci-dessus.)

La publication de Google décrit ensuite la solution proposée (qui suscite de nombreuses critiques dans les commentaires de la publication). Ils proposent l'utilisation d'un nouvel attribut à cette fin:

Ajoutez simplement un attribut à l'élément d'entrée. Par exemple, un champ d'adresse e-mail pourrait ressembler à ceci:

_<input type=”text” name=”field1” x-autocompletetype=”email” />_

... où _x-_ signifie "expérimental" et sera supprimé si et quand cela devient un standard. Lisez le post 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 .

UPDATE: Comme indiqué dans ces perspicaceréponses , toutes les expressions régulières Chrome utilise pour identifier/reconnaître les champs communs peut être trouvé dans autofill_regex_constants.cc.utf8 . Donc, pour répondre à la question initiale, assurez-vous que les noms de vos champs HTML correspondent à ces expressions. Quelques exemples incluent:

  • prénom: _"first.*name|initials|fname|first$"_
  • nom de famille: _"last.*name|lname|surname|last$|secondname|family.*name"_
  • email: _"e.?mail"_
  • adresse (ligne 1): _"address.*line|address1|addr1|street"_
  • code postal: _"Zip|postal|post.*code|pcode|^1z$"_
175
kmote

Cette question est assez ancienne mais j'ai une réponse mise à jour pour 2017!

Voici un lien vers la documentation du WHATWG pour activer la complétion automatique.

Google a écrit un joli guide sympa pour développer des applications Web conviviales pour 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 champs <input>
  • Ajoutez un attribut autocomplete à vos balises <input> et complétez-le en utilisant ce guide .
  • Nommez correctement vos attributs name et autocomplete pour toutes les balises <input>

  • 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 tags <input>

Afin de déclencher l'auto-complétion, assurez-vous de nommer correctement les attributs name et autocomplete dans vos balises <input>. Cela autorisera automatiquement la complétion 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:

  • Prénom
    • Utilisez l'un de ces éléments pour name: name fname mname lname
    • Utilisez n’importe lequel d’entre eux pour autocomplete:
      • name (pour le nom complet)
      • given-name (pour prénom)
      • additional-name (pour le deuxième prénom)
      • family-name (pour le nom de famille)
    • Exemple: <input type="text" name="fname" autocomplete="given-name">
  • Email
    • Utilisez n'importe lequel de ces éléments pour name: email
    • Utilisez n'importe lequel 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 n’importe lequel d’entre eux pour autocomplete:
      • Pour une adresse saisie:
        • 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 n'importe lequel 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 n’importe lequel d’entre eux pour autocomplete:
      • cc-name
      • cc-number
      • cc-csc
      • cc-exp-month
      • cc-exp-year
      • cc-exp
      • cc-type
  • Noms d'utilisateur
    • Utilisez n'importe lequel de ces éléments pour name: username
    • Utilisez n'importe lequel de ces éléments pour autocomplete: username
  • Mots de passe
    • Utilisez n'importe lequel de ces éléments pour name: password
    • Utilisez n’importe lequel d’entre eux pour autocomplete:
      • current-password (pour les formulaires de connexion)
      • new-password (pour les formulaires d'inscription et de changement de mot de passe)

Ressources

53
Katie S

D'après mes tests, la balise x-autocomplete ne fait rien. Utilisez plutôt les balises autocomplete sur vos balises d'entrée et définissez leurs valeurs conformément à la spécification 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".

37
Micah

Vous devez nommer les éléments de manière appropriée pour que le navigateur les remplisse automatiquement.

Voici les spécifications de l'IETF pour cela:

http://www.ietf.org/rfc/rfc3106.txt1

5
Avalanchis

On dirait 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 en avoir demandé à l'utilisateur:

http://www.chromium.org/developers/using-requestautocompletehttp://blog.alexmaccaw.com/requestautocomplete

nouvelles infos de 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

2
Riesling

Je viens de jouer avec les spécifications et j'ai un bon exemple de travail - incluant 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ère également du type d’adresse . Il a également été testé sur iOS 8.1.0 et il semble qu’il remplisse toujours tous les champs à la fois, tandis que le bureau chromé remplit automatiquement adresse par adresse.

0
staabm

Voici la nouvelle liste de "noms" Google Autofill. Il existe tous les noms pris en charge dans toutes les langues autorisées.

autofill_regex_constants.cc

0
Alvargon

Ici c'est la vraie réponse:

La seule différence réside dans l'étiquette elle-même. Le "Nom" est extrait de "Nom" ou "Nom" en portugais.

Alors voici ce dont vous avez besoin:

  • Une enveloppe de formulaire;
  • Un <label for="id_of_field">Name</label>
  • Un <input id="id_of_field"></input>

Rien de plus.

0
Totty.js

Dans mon cas, $('#EmailAddress').attr('autocomplete', 'off'); n'est pas travaillé . Mais les travaux suivants fonctionnent sur chrome Version 67 par jQuery.

$('#EmailAddress').attr('autocomplete', 'new-email');
$('#Password').attr('autocomplete', 'new-password');
0
reza.cse08

Google fournit maintenant une documentation à ce sujet:

Aidez les utilisateurs à commander plus rapidement avec la saisie automatique | Web | Google Developers

et

Create Amazing Forms: Utilisez des métadonnées pour activer la saisie automatique | Web | Google Developers

0
henry