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

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

html google-chrome

Html 如何在Google Chrome中触发自动填充？,html,google-chrome,autofill,Html,Google Chrome,Autofill,我想知道是否有某种特殊的标记来启用特定表单的Chrome自动填充功能。我只发现了关于如何禁用它的问题，但我想知道我是否可以在html代码中添加某种标记，以便告诉浏览器“这是地址的输入”或“这是邮政编码字段”以正确填写（假设用户激活了此功能）.您需要正确命名元素，以便浏览器自动填充它们以下是IETF规范： 2017年更新：看起来凯蒂的答案比我的更具最新信息。未来的读者：把你的选票投给这是一个很好的问题，而且很难找到文档。事实上，在很多情况下，你会发现Chrome的自动填充功能“很有效”。例如，

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

您需要正确命名元素，以便浏览器自动填充它们

以下是IETF规范：

2017年更新：看起来凯蒂的答案比我的更具最新信息。未来的读者：把你的选票投给

这是一个很好的问题，而且很难找到文档。事实上，在很多情况下，你会发现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>


名字：

姓氏：

电子邮件：

电话：

地址：

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

名称

、元素周围的文本以及任何占位符文本

然而，最近，Chrome团队承认这是一个不令人满意的解决方案，他们已经开始在这个问题上要求标准化。谷歌网站管理员小组最近讨论了这一问题，解释说：

不幸的是，到目前为止，网站管理员很难确保Chrome和其他表单填充提供商能够正确解析他们的表单。存在一些标准；但它们给网站的实现带来了沉重的负担，因此在实践中没有得到太多的应用

（他们提到的“标准”在上述阿瓦兰奇的回答中提到。）

谷歌邮报接着描述了他们提出的解决方案（在帖子的评论中遭到了严重的批评）。他们建议为此目的使用新属性：

只需向输入元素添加一个属性，例如电子邮件地址字段可能如下所示：

…其中，

x-

代表“实验性”，如果成为标准，将被删除。阅读更多细节，或者如果你想更深入地挖掘，你会发现一个更完整的解释的建议

更新： 正如本文所指出的，Chrome用于识别公共字段的所有正则表达式都可以在中找到。所以要回答最初的问题，只需确保html字段的名称与这些表达式匹配即可。一些例子包括：

名字：

“第一个。*名字|缩写| fname |第一个$”

姓氏：

“姓氏.*姓名|姓氏|姓氏$|第二名|家族.*姓氏”

电子邮件：
```
“电子邮件”
```

地址（第1行）：

“地址。*第1行|地址1 |地址1 |街道”

邮政编码：

“邮政编码”.*邮政编码“^1z$”

看起来我们将获得更多关于自动填充功能的控制，Chrome Canary即将推出一个新的实验性API，可用于在向用户索要数据后访问数据：

谷歌提供的新信息：

根据我的测试，

x-autocomplete

标记没有任何作用。在输入标记上使用

autocomplete

标记，并根据此处的HTML规范设置它们的值

例如：

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

父表单标记需要autocomplete=“on”和method=“POST”。

我刚刚对规范进行了修改，得到了一个很好的工作示例，其中包括一些其他字段

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


JS-Bin
将蓝色礼物发送到。。。

名字：


姓氏：


地址:


城市：


邮政编码：

将红色礼物发送到。。。

名字：


姓氏：


地址:


城市：


邮政编码：

付款地址

名字：


姓氏：


地址:


城市：


邮政编码：

它包含两个独立的地址区域和不同的地址类型。

它也在iOS 8.1.0上进行了测试，似乎它总是一次填充所有字段，而桌面chrome会按地址自动填充地址。

这里是真正的答案：

这是有效的：
```
Nom
```
这不是：
```
No
```

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

因此，以下是您需要的：

包装纸
A
```
名称
```
一个

没什么了。

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

谷歌为开发对移动设备友好的web应用程序写了一份报告。他们

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

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