Chrome 自动填充需要哪些属性? [英] Which Attributes Does Chrome Autofill Expect?

问题描述

我希望将我们的网站与 Chrome 的地址自动填充功能联系起来，但我找不到任何关于它希望如何呈现表单的参考.

I was hoping to tie our site in with Chrome's Address Autofill, but I can't find any reference for how it expects the forms to be presented.

我猜它正在寻找表单的 name= 字段中非常具体的东西，但是一个好的参考会很好，而不必对其进行逆向工程.

I'm guessing it's looking for something pretty specific in the name= fields of the forms, but a good reference would be nice, instead of having to reverse engineer it.

目前，Chrome 不填充我们的任何表单，但 Safari 填充了大部分表单.冒着同时问两个问题的风险:有人也有 safari 的参考吗?Safari 似乎正在使用我们的 title= 字段...

At the moment, Chrome fills none of our forms, but Safari fills most of them. At the risk of asking two questions at once: anyone got a reference for safari as well? Safari seems to be using our title= fields...

它不使用这个标准，是吗?http://www.ietf.org/rfc/rfc3106.txt

It doesn't use this standard, does it? http://www.ietf.org/rfc/rfc3106.txt

推荐答案

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

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

现在有关于如何触发自动完成的完整文档.

这是官方的链接用于启用自动完成功能的当前 WHATWG HTML 标准.

以下答案来自我在这里的原始答案:https://stackoverflow.com/a/41965106/1696153

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

Google wrote a pretty nice guide for 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!

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

Here are some key points on how to enable autocomplete:

• 为所有字段使用
• 将 autocomplete 属性添加到您的 <input> 标签并使用此 指南.
• 为所有 标签正确命名您的 name 和 autocomplete 属性

• 示例:

• Use a <label> for all your <input> fields
• Add a autocomplete attribute to your <input> tags and fill it in using this guide.
• Name your name and autocomplete attributes 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="[e-mail]" required autocomplete="email">

<!-- note that "emailC" will not be autocompleted -->
<label for="frmEmailC">Confirm Email</label>
<input type="email" name="emailC" id="frmEmailC"
placeholder="[e-mail]" required autocomplete="email">

<label for="frmPhoneNumA">Phone</label>
<input type="tel" name="phone" id="frmPhoneNumA"
placeholder="[phone]" required autocomplete="tel">

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

In order to trigger autocomplete, make sure you correctly name the name and autocomplete attributes 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.

以下是命名输入的方法:

Here's how to name your inputs:

• 姓名
  • 对 name 使用以下任何一种:name fname mname lname
  • 将其中任何一项用于autocomplete:
    • name(全名)
    • given-name(名字)
    • additional-name(中间名)
    • family-name(用于姓氏)
    • 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)
        • 对name 使用以下任何一种:email
        • 将其中任何一个用于autocomplete:email
        • 示例:
        • 对name 使用其中任何一个:address city region Province state zip zip2 postal country
        • 将其中任何一项用于autocomplete:
          • 对于一个地址输入:
            • 街道地址
            • address-line1
            • address-line2
            • 对name使用以下任何一种:手机移动国家代码区号交换后缀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(用于注册和密码更改表格)
                • 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)
                  • 用于自动完成的当前 WHATWG HTML 标准.
                  • 来自 Google 的创建令人惊叹的表单".似乎几乎每天都在更新.优秀的阅读.
                  • 来自 Google 的使用自动填充功能帮助用户更快地结账" 2015 年.
                  • 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 Google in 2015.

                  这篇关于Chrome 自动填充需要哪些属性?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！