Comment fonctionne sous forme d'auto-remplissage dans le navigateur de travail?
Comment ne forme remplissage automatique travail dans les navigateurs web modernes? Qui sont les techniques les plus courantes utilisées dans les navigateurs qui implémentent automatique de remplissage de forme?
-- EDIT --
La question n'est pas à propos de la saisie semi-automatique, est sur la forme autofilling, qui ne se soucie pas seulement de la déjà saisi les valeurs, mais tient également compte de la signification et de la structure du champ à remplir. Google Chrome mise en œuvre, par exemple, essaie d'analyser les champs de saisie de deviner de quel type et de la structure. Ou au moins, c'est que ce que j'ai compris dans le code ci-dessus.
- La bonne réponse à une autre question: stackoverflow.com/a/9795126/1092672
- Grand @Akroy ! S'il vous plaît créer une réponse avec ce lien et je vais l'accepter.
Vous devez vous connecter pour publier un commentaire.
Prendre un coup d'oeil à cette réponse par kmote.
De souligner, c'est que le navigateur regarde le champ de
name
tag et fait une supposition éclairée à ce genre de données serait d'y aller (regex de correspondance est une bonne naïf façon de le faire). Chrome est de travailler pour obtenir une sorte de normalisation de sorte que ce n'est pas tout à fait comme les hit-or-miss.Différentes technologies et les navigateurs utilisent différentes méthodes pour calculer les deux éléments à afficher ainsi que la manière de les afficher, mais certaines sources à consulter sont:
Si vous êtes à la recherche dans la mise en œuvre (ou simplement l'utiliser) de vous-même, je vous recommande vivement de prendre un coup d'oeil au plugin.
Le premier élément de réponse est tout simplement non standard HTML du formulaire
autocomplete
attribut qui a été introduite avec Internet Explorer il y a quelques années.Ironiquement, vous pouvez lire une bonne histoire d'une introduction sur mozilla site ici: L'attribut autocomplete et documents web en XHTML
Cette question est assez vieux, mais j'ai un mise à jour de réponse pour 2017!
Afin de déclencher la saisie semi-automatique, tout ce que vous avez à faire est le nom de ce droit.
La réponse suivante est de ma réponse originale à cette question à partir d'ici: https://stackoverflow.com/a/41965106/1696153
Voici un lien officiel de courant WHATWG Standard HTML pour activer la saisie semi-automatique.
Google a écrit un joli guide de nice pour le développement d'applications web qui sont sympa pour les appareils mobiles. Ils ont une section sur la façon de nommer les entrées sur les formes d'utiliser facilement l'auto-remplissage. Eventhough il est écrit pour mobile, cela s'applique pour les ordinateurs de bureau et mobiles!
Comment faire pour Activer la saisie semi-automatique sur vos formulaires HTML
Voici quelques points clés sur la façon d'activer la saisie semi-automatique:
<label>
pour tous vos<input>
champsautocomplete
attribut à votre<input>
balises et de le remplir à l'aide de cette guide.name
etautocomplete
attributs correctement pour toutes les<input>
tagsExemple:
Comment le nom de votre
<input>
tagsAfin de déclencher la saisie semi-automatique, assurez-vous que vous avez correctement le nom de la
name
etautocomplete
attributs dans votre<input>
balises. Cela va automatiquement pour permettre la saisie semi-automatique des formulaires. Assurez-vous également d'avoir un<label>
! Cette information peut également être trouvé ici.Voici comment le nom de vos données:
name
:name fname mname lname
autocomplete
:name
(nom complet)given-name
(pour le prénom)additional-name
(pour le prénom)family-name
(pour le nom)<input type="text" name="fname" autocomplete="given-name">
name
:email
autocomplete
:email
<input type="text" name="email" autocomplete="email">
name
:address city region province state zip zip2 postal country
autocomplete
:street-address
address-line1
address-line2
address-level1
(état ou province)address-level2
(ville)postal-code
(zip code)country
name
:phone mobile country-code area-code exchange suffix ext
autocomplete
:tel
name
:ccname cardnumber cvc ccmonth ccyear exp-date card-type
autocomplete
:cc-name
cc-number
cc-csc
cc-exp-month
cc-exp-year
cc-exp
cc-type
name
:username
autocomplete
:username
name
:password
autocomplete
:current-password
(pour signer des formulaires)new-password
(pour l'inscription et changement de mot de passe formulaires)Ressources