Html 如何在 Google Chrome 中触发自动填充？

Question

提问by Riesling

I would like to know if there is some kind of special markup to enable the Chrome autofill feature for a specific form. I only found questions about how to disable it, but I would like to know if I can add some kind of markup to the html code in order to tell the browser "this is the input for the address" or "this is the ZIP code field" to correctly fill it in (assumed the user activated this feature).

我想知道是否有某种特殊标记可以为特定表单启用 Chrome 自动填充功能。我只发现了有关如何禁用它的问题，但我想知道是否可以在 html 代码中添加某种标记以告诉浏览器“这是地址的输入”或“这是邮政编码”字段”以正确填写（假设用户激活了此功能）。

Answer 1

采纳答案by kmote

UPDATE for 2017:Looks like the answer from Katie has more up-to-date information than mine. Future readers: give your up-votes to her answer.

2017 年更新：看起来 Katie 的答案比我的有更多最新信息。未来的读者：给她的答案投赞成票。

This is a great question and one for which documentation is surprisingly hard to come by. Actually, in many cases you will find that the Chrome Autofill functionality "just works." For example, the following snippet of html produces a form which, at least for me (Chrome v. 18), is automatically filled after clicking in the first field:

这是一个很好的问题，而且文档出奇地难以获得。实际上，在许多情况下，您会发现 Chrome 自动填充功能“正常工作”。例如，以下 html 片段会生成一个表单，至少对我而言（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>

However, this answer is unsatisfactory, as it leaves the solution in the realm of "magic." Digging deeper I learned that Chrome (and other autofill-enabled browsers) primarily rely on contextual clues to determine the type of data that should be filled into form elements. Examples of such contextual clues include the nameof an input element, the text surrounding the element, and any placeholder text.

然而，这个答案并不令人满意，因为它将解决方案留在了“魔法”领域。深入挖掘后，我了解到 Chrome（和其他支持自动填充的浏览器）主要依靠上下文线索来确定应填充到表单元素中的数据类型。此类上下文线索的示例包括name输入元素的、元素周围的文本以及任何占位符文本。

Recently, however, the Chrome team acknowledged that this is an unsatisfactory solution, and they have begun pressing for standardization in this matter. A very informative postfrom the Google Webmasters group recently discussed this issue, explaining:

不过最近，Chrome 团队承认这是一个不能令人满意的解决方案，他们已经开始推动这件事的标准化。最近来自 Google 网站管理员小组的一篇内容丰富的帖子讨论了这个问题，解释说：

Unfortunately, up to now it has been difficult for webmasters to ensure that Chrome and other form-filling providers can parse their form correctly. Some standards exist; but they put onerous burdens on the implementation of the website, so they're not used much in practice.

不幸的是，到目前为止，网站管理员很难确保 Chrome 和其他表单填写服务提供商能够正确解析他们的表单。存在一些标准；但是它们给网站的实施带来了繁重的负担，因此它们在实践中的使用并不多。

(The "standards" they refer to is a more recent verion of the specmentioned in Avalanchis' answer above.)

（他们所指的“标准”是上述 Avalanchis 回答中提到的规范的更新版本。）

The Google post goes on to describe their proposed solution (which is met by significant criticism in the comments of the post). They propose the use of a new attribute for this purpose:

谷歌的帖子继续描述了他们提出的解决方案（在帖子的评论中遭到了重大批评）。他们建议为此使用一个新属性：

Just add an attribute to the input element, for example an email address field might look like:
<input type=”text” name=”field1” x-autocompletetype=”email” />

只需向 input 元素添加一个属性，例如电子邮件地址字段可能如下所示：
<input type=”text” name=”field1” x-autocompletetype=”email” />

...where the x-stands for "experimental" and will be removed if & when this becomes a standard. Read the postfor more details, or if you want to dig deeper, you will find a more complete explanation of the proposal on the whatwg wiki.

...x-代表“实验性”的地方，如果&当这成为标准时将被删除。阅读帖子了解更多细节，或者如果你想更深入地挖掘，你会在 whatwg wiki 上找到更完整的提案解释。

UPDATE:As pointed out in these insightful answers, all the regular expressions Chrome uses to identify/recognize common fields can be found in autofill_regex_constants.cc.utf8. So to answer the original question, just make sure the names for your html fields get matched by these expressions. Some examples include:

更新：正如这些有见地的答案所指出的，Chrome 用于识别/识别常见字段的所有正则表达式都可以在autofill_regex_constants.cc.utf8. 因此，要回答最初的问题，只需确保您的 html 字段的名称与这些表达式匹配。一些例子包括：

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

名："first.*name|initials|fname|first$"
姓："last.*name|lname|surname|last$|secondname|family.*name"
电子邮件："e.?mail"
地址第一行）："address.*line|address1|addr1|street"
邮政编码："zip|postal|post.*code|pcode|^1z$"

Answer 2

回答by Katie

This question is pretty old but I have an updated answer!

这个问题很老了，但我有一个更新的答案！

Here's a link to the WHATWG documentation for enabling autocomplete.

这是启用自动完成功能的 WHATWG 文档的链接。

Google wrote a pretty nice guidefor developing web applications that are friendly for mobile devices. They have a section on how to name the inputs on forms to easily use auto-fill. Eventhough it's written for mobile, this applies for both desktop and mobile!

Google 编写了一份非常好的指南，用于开发对移动设备友好的 Web 应用程序。他们有一节介绍如何命名表单上的输入以轻松使用自动填充。即使它是为移动设备编写的，这也适用于桌面设备和移动设备！

How to Enable AutoComplete on your HTML forms

如何在 HTML 表单上启用自动完成

Here are some key points on how to enable autocomplete:

以下是有关如何启用自动完成的一些要点：

Use a <label>for all your <input>fields
Add a autocompleteattributeto your <input>tags and fill it in using this guide.
Name your nameand autocompleteattributes correctly for all <input>tags

Example:

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

<label>对所有<input>字段使用 a
autocomplete为您的<input>标签添加一个属性并使用本指南填写它。
为所有标签正确命名您的name和autocomplete属性<input>

示例：

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

How to name your `<input>`tags

如何命名你的`<input>`标签

In order to trigger autocomplete, make sure you correctly name the nameand autocompleteattributes in your <input>tags. This will automatically allow for autocomplete on forms. Make sure also to have a <label>! This information can also be found here.

为了触发自动完成，请确保正确命名标签中的name和autocomplete属性<input>。这将自动允许在表单上自动完成。确保也有一个<label>！此信息也可以在此处找到。

Here's how to name your inputs:

以下是命名输入的方法：

Name
- Use any of these for name: name fname mname lname
- Use any of these for autocomplete:
  - name(for full name)
  - given-name(for first name)
  - additional-name(for middle name)
  - family-name(for last name)
- Example: <input type="text" name="fname" autocomplete="given-name">
Email
- Use any of these for name: email
- Use any of these for autocomplete: email
- Example: <input type="text" name="email" autocomplete="email">
Address
- Use any of these for name: address city region province state zip zip2 postal country
- Use any of these for autocomplete:
  - For one address input:
    - street-address
  - For two address inputs:
    - address-line1
    - address-line2
  - address-level1(state or province)
  - address-level2(city)
  - postal-code(zip code)
  - country
Phone
- Use any of these for name: phone mobile country-code area-code exchange suffix ext
- Use any of these for autocomplete: tel
Credit Card
- Use any of these for name: ccname cardnumber cvc ccmonth ccyear exp-date card-type
- Use any of these for autocomplete:
  - cc-name
  - cc-number
  - cc-csc
  - cc-exp-month
  - cc-exp-year
  - cc-exp
  - cc-type
Usernames
- Use any of these for name: username
- Use any of these for autocomplete: username
Passwords
- Use any of these for name: password
- Use any of these for autocomplete:
  - current-password(for sign-in forms)
  - new-password(for sign-up and password-change forms)

姓名
- 将其中任何一个用于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：
  - 对于一个地址输入：
    - street-address
  - 对于两个地址输入：
    - address-line1
    - address-line2
  - address-level1（州或省）
  - address-level2（城市）
  - postal-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（用于登录表格）
  - new-password（用于注册和密码更改表格）

Resources

资源

Current WHATWG HTML Standard for autocomplete.
"Create Amazing Forms" from Google. Seems to be updated almost daily. Excellent read.
"Help Users Checkout Faster with Autofill" from Googlein 2015.

Answer 3

回答by Micah

From my testing, the x-autocompletetag does nothing. Instead use autocompletetags on your input tags, and set their values according to the HTML spec here http://www.whatwg.org/specs/web-apps/current-work/multipage/association-of-controls-and-forms.html#autofill-field.

从我的测试来看，x-autocomplete标签什么都不做。而是autocomplete在输入标签上使用标签，并根据此处的 HTML 规范设置它们的值http://www.whatwg.org/specs/web-apps/current-work/multipage/association-of-controls-and-forms。 html#自动填充字段。

Example:

例子：

<input name="fname" autocomplete="given-name" type="text" placeholder="First Name" required>

The parent form tag needs autocomplete="on" and method="POST".

父表单标签需要 autocomplete="on" 和 method="POST"。

Answer 4

回答by Avalanchis

You need to name the elements appropriately so that the browser will autofill them.

您需要适当地命名元素，以便浏览器自动填充它们。

Here's the IETF spec for this:

这是 IETF 规范：

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

Answer 5

回答by staabm

I just played arround with the spec and got a nice working example - including a few more fields.

我只是玩了一下规范并得到了一个很好的工作示例 - 包括更多的领域。

<!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

It contains 2 separate address areas and also differen address-types. Tested it also on iOS 8.1.0 and it seems that it always fill all fields at once, while desktop chrome autofill address by address.

它包含 2 个独立的地址区域和不同的地址类型。也在 iOS 8.1.0 上对其进行了测试，它似乎总是一次填充所有字段，而桌面 chrome 按地址自动填充地址。

Answer 6

回答by Riesling

Looks like we'll get more control about this autofill feature, there is a new experimental API coming to Chrome Canary, which can be used to access the data after asking the user for it:

看起来我们将获得对这个自动填充功能的更多控制，Chrome Canary 有一个新的实验性 API，可用于在询问用户后访问数据：

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

new infos by 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 7

回答by henry

Google now provides documentation for this:

Google 现在为此提供了文档：

Help users checkout faster with Autofill | Web | Google Developers

使用自动填充帮助用户更快地结帐 | 网站 | 谷歌开发者

and

和

Create Amazing Forms: Use metadata to enable auto-complete | Web | Google Developers

创建惊人的表单：使用元数据启用自动完成 | 网站 | 谷歌开发者

Answer 8

回答by Alvargon

Here is the new list of Google Autofill "names". There are all the supported names in any allowed language.

这是 Google 自动填充“名称”的新列表。有任何允许的语言的所有受支持的名称。

autofill_regex_constants.cc

Answer 9

回答by Totty.js

Here it is the real answer:

这是真正的答案：

This works: http://jsfiddle.net/68LsL1sq/1/<label for="name">Nom</label>
This not: http://jsfiddle.net/68LsL1sq/2/<label for="name">No</label>

这有效：http: //jsfiddle.net/68LsL1sq/1/<label for="name">Nom</label>
这不是：http: //jsfiddle.net/68LsL1sq/2/<label for="name">No</label>

The only difference is in the label itself. The "Nom" cames from "Name" or "Nome" in portuguese.

唯一的区别在于标签本身。“Nom”来自葡萄牙语中的“Name”或“Nome”。

So here is what you need:

所以这是你需要的：

A form wrapper;
A <label for="id_of_field">Name</label>
An <input id="id_of_field"></input>

一个表单包装器；
一种 <label for="id_of_field">Name</label>
一个 <input id="id_of_field"></input>

Nothing more.

而已。

Answer 10

回答by reza.cse08

In my case, $('#EmailAddress').attr('autocomplete', 'off');is not worked. But following works on chrome Version 67 by jQuery.

在我的情况下，$('#EmailAddress').attr('autocomplete', 'off');是行不通的。但是下面的工作由 jQuery 处理 chrome 版本 67。

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

Html 如何在 Google Chrome 中触发自动填充？

提问by Riesling

采纳答案by kmote

回答by Katie

How to Enable AutoComplete on your HTML forms

如何在 HTML 表单上启用自动完成

How to name your `<input>`tags

如何命名你的`<input>`标签

Resources

资源

回答by Micah

回答by Avalanchis

回答by staabm

JSBIN

JSBIN

回答by Riesling

回答by henry

回答by Alvargon

回答by Totty.js

回答by reza.cse08

相关推荐

最近更新

标签

Html 如何在 Google Chrome 中触发自动填充？

提问by Riesling

采纳答案by kmote

回答by Katie

How to Enable AutoComplete on your HTML forms

如何在 HTML 表单上启用自动完成

How to name your <input>tags

如何命名你的<input>标签

Resources

资源

回答by Micah

回答by Avalanchis

回答by staabm

JSBIN

JSBIN

回答by Riesling

回答by henry

回答by Alvargon

回答by Totty.js

回答by reza.cse08

相关推荐

Html 圆角（边界半径）Safari 问题

Html 通过 URL 传递表单变量

Html 使用 highcharts 时，为什么 Bootstrap 选项卡会显示宽度不正确的选项卡窗格 div？

Html CSS 流体列，固定边距；圣杯的圣杯

相关推荐

最近更新

标签

How to name your `<input>`tags

如何命名你的`<input>`标签