web-dev-qa-db-fra.com

Comment fonctionne le remplissage automatique des formulaires dans le navigateur?

Comment le formulaire remplissage automatique fonctionne-t-il dans les navigateurs Web modernes? Quelles sont les techniques les plus couramment utilisées dans les navigateurs qui implémentent le remplissage automatique de formulaires?

-- ÉDITER --

La question ne concerne pas la saisie semi-automatique, mais la saisie automatique des formulaires, qui se soucie non seulement des valeurs précédemment saisies mais également de la signification et de la structure du champ à remplir. Google Chrome, par exemple, essaie d'analyser les champs saisis pour deviner leur type et leur structure. Ou du moins est-ce ce que j'ai compris du code lié ci-dessus.

browserformsautofill
31
fjsj

Jetez un œil à cette réponse par kmote.

Le fait saillant est que le navigateur regarde la balise name du champ et fait une supposition éclairée sur le type de données qui y irait (la correspondance d'expression régulière est une bonne façon naïve de le faire). Chrome travaille pour obtenir une sorte de normalisation afin que ce ne soit pas aussi aléatoire).

12
akroy

Différentes technologies et navigateurs utilisent différentes méthodes pour calculer ce qu'il faut afficher ainsi que la façon dont il l'affiche, mais certaines sources à vérifier sont:

  • Google's description de haut niveau
  • Comment l'implémenter avec jQuery (notez qu'il existe également une saisie semi-automatique jQuery plugin ).

Si vous cherchez à l'implémenter (ou simplement à l'utiliser) vous-même, je vous recommande fortement de jeter un œil au plugin.

9
Igor

Le premier élément de réponse est simplement l'attribut autocomplete du formulaire HTML non standard introduit avec Internet Explorer il y a quelques années.

Ironiquement, vous pouvez lire une bonne histoire une introduction sur le site de mozilla ici: L'attribut de saisie semi-automatique et les documents Web en utilisant XHTML

4
Simon Mourier

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

Pour déclencher la saisie semi-automatique, tout ce que vous avez à faire est de le nommer correctement.

La réponse suivante est tirée de ma réponse originale d'ici: https://stackoverflow.com/a/41965106/169615

Voici un lien vers l'officiel norme HTML WHATWG actuelle pour activer la saisie semi-automatique.

Google a écrit un joli joli guide pour développer des applications Web qui sont 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 <input> champs
  • Ajoutez un attribut autocomplete à votre <input> tags et remplissez-le à l'aide de cette guide .
  • Nommez correctement vos attributs name et autocomplete pour tous 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 votre <input> Mots clés

Afin de déclencher la saisie semi-automatique, assurez-vous de nommer correctement les attributs name et autocomplete dans votre <input> Mots clés. 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'une de ces options pour name: name fname mname lname
    • Utilisez l'une de ces options 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 de famille)
    • Exemple: <input type="text" name="fname" autocomplete="given-name">
  • Email
    • Utilisez l'une de ces options pour name: email
    • Utilisez l'une de ces options pour autocomplete: email
    • Exemple: <input type="text" name="email" autocomplete="email">
  • Adresse
    • Utilisez l'une de ces options pour name: address city region province state Zip zip2 postal country
    • Utilisez l'une de ces options 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'une de ces options pour name: phone mobile country-code area-code exchange suffix ext
    • Utilisez l'une de ces options pour autocomplete: tel
  • Carte de crédit
    • Utilisez l'une de ces options pour name: ccname cardnumber cvc ccmonth ccyear exp-date card-type
    • Utilisez l'une de ces options pour autocomplete:
      • cc-name
      • cc-number
      • cc-csc
      • cc-exp-month
      • cc-exp-year
      • cc-exp
      • cc-type
  • Noms d'utilisateur
    • Utilisez l'une de ces options pour name: username
    • Utilisez l'une de ces options pour autocomplete: username
  • Mots de passe
    • Utilisez l'une de ces options pour name: password
    • Utilisez l'une de ces options pour autocomplete:
      • current-password (pour les formulaires de connexion)
      • new-password (pour les formulaires d'inscription et de changement de mot de passe)

Ressources

3
Katie