如何在Google Chrome中触发自动填充function？
我想知道是否有某种特殊的标记来启用特定表单的Chrome自动填充function。 我只发现如何禁用它的问题，但我想知道，如果我可以添加一些标记的HTML代码，以告诉浏览器“这是input的地址”或“这是邮政编码字段“来正确填写（假设用户激活了这个function）。
这是一个很好的问题，对于哪个文档来说是很难的。 实际上，在很多情况下，您会发现Chrome自动填充function“正常工作”。 例如，下面的代码片段生成一个表单，至less对我来说（Chrome v。18），在第一个字段中单击后会自动填充：
<!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> 然而，这个答案并不令人满意，因为它将解决scheme留在了“魔术”领域。 深入挖掘我了解到Chrome（以及其他支持自动填充的浏览器）主要依靠上下文线索来确定应填入表单元素的数据types。 这种上下文线索的例子包括input元素的name ，元素周围的文本以及任何占位符文本。
然而，最近Chrome团队承认这是一个不理想的解决scheme，他们已经开始在这个问题上寻求标准化。 来自Google网站pipe理员小组的一篇非常翔实的文章最近讨论了这个问题，他解释说：
不幸的是，到现在为止，网站pipe理员很难确保Chrome和其他表单填写提供商能够正确parsing表单。 有一些标准存在; 但是他们对网站的实施负担很重，实践中用处不大。
（他们提到的“标准”是上文Avalanchis的答案中提到的规范的更新版本 。）
谷歌的post继续描述他们提出的解决scheme（这是通过评论中的重大批评来应对）。 他们build议为此使用一个新的属性：
只需在input元素中添加一个属性，例如电子邮件地址字段可能如下所示：
<input type=”text” name=”field1” x-autocompletetype=”email” />
…其中的x-代表“实验”，将被删除，如果当这成为一个标准。 阅读post以获取更多详细信息，或者如果您想深入了解，可以在whatwg wiki上find更完整的提案说明。
更新：正如在这些深刻的 答案中指出的，所有的正则expression式Chrome浏览器用来识别/识别通用字段可以在autofill_regex_constants.cc.utf8find。 因此，要回答原来的问题，只要确保您的html字段的名称匹配这些expression式。 一些例子包括：
- 名字：
"first.*name|initials|fname|first$" - 姓氏：
"last.*name|lname|surname|last$|secondname|family.*name" - 电子邮件：
"e.?mail" - 地址（第1行）：
"address.*line|address1|addr1|street" - 邮政编码：
"zip|postal|post.*code|pcode|^1z$"
从我的testing中， x-autocomplete标签什么都不做。 而是在input标签上使用autocomplete标签，并根据HTML规范设置它们的值。http://www.whatwg.org/specs/web-apps/current-work/multipage/association-of-controls-and-forms .html＃自动填写字段 。
例：
<input name="fname" autocomplete="given-name" type="text" placeholder="First Name" required>
父表单标记需要autocomplete =“on”和method =“POST”。
这个问题是相当古老的，但我有一个更新的2017年答案 ！
这是WHATWG文档的一个链接，用于启用自动完成function。
Google为开发对移动设备友好的Web应用程序编写了一个非常好的指南 。 他们有一个关于如何命名表单上的input的部分，以便于使用自动填充。 尽pipe它是为手机编写的，但适用于桌面和移动设备！
如何在您的HTML表单上启用自动完成function
以下是关于如何启用自动填充的一些要点：
- 对所有的
<input>字段使用<label> - 为您的
<input>标签添加一个autocomplete属性并使用本指南进行填充。 - 为所有
<input>标签正确命名您的name和autocomplete属性 -
例如 ：
<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>标签
为了触发自动完成，请确保在<input>标记中正确命名name和autocomplete属性。 这将自动允许在窗体上自动完成。 确保也有一个<label> ！ 这些信息也可以在这里find。
以下是如何命名您的input：
- 名称
- 使用任何这些
name：name fname mname lname - 使用其中的任何一种进行
autocomplete：-
name（全名） -
given-name（名字） -
additional-name（中间名称） -
family-name（姓氏）
-
- 例如：
<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：- 对于一个地址input：
-
street-address
-
- 对于两个地址input：
-
address-line1 -
address-line2
-
-
address-level1（州或省） -
address-level2（城市） -
postal-code（邮政编码） -
country
- 对于一个地址input：
- 使用这些
- 电话
- 使用以下任何
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（用于login表单） -
new-password（用于注册和密码更改表单）
-
- 使用任何这些
资源
- 目前WHATWG HTML自动完成标准。
- 从Google创build“惊人的forms” 。 似乎几乎每天都在更新。 优秀的阅读。
- Google在2015年“帮助用户使用自动填充更快速地签出” 。
看起来我们将会对这个自动填充function有更多的控制，Chrome Canary有一个新的实验性API，可以在询问用户之后访问数据：
http://www.chromium.org/developers/using-requestautocomplete http://blog.alexmaccaw.com/requestautocomplete
谷歌新的信息：
http://googlewebmastercentral.blogspot.de/2015/03/helping-users-fill-out-online-forms.html
这里是真正的答案：
-
这工作： http : //jsfiddle.net/68LsL1sq/1/
<label for="name">Nom</label> -
这不是： http : //jsfiddle.net/68LsL1sq/2/
<label for="name">No</label>
唯一的区别在于标签本身。 “Nom”来自葡萄牙语的“Name”或“Nome”。
所以这里是你需要的：
- 一个表单包装器;
-
<label for="id_of_field">Name</label> - 一个
<input id="id_of_field"></input>
而已。
我只是和规范一起玩了一个很好的例子 – 包括更多的领域。
<!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
它包含2个独立的地址区域，也有不同的地址types。 testing它也在iOS 8.1.0，它似乎总是一次填充所有领域，而桌面铬自动填充地址的地址。
Google现在为此提供文档：
使用自动填充function帮助用户更快地结帐 Web | Google Developers
和
创build令人惊叹的表单：使用元数据启用自动完成| Web | Google Developers
