当前位置： 文江博客话题详情

Chrome 自动填充需要哪些属性？

发布于 2025-01-05 08:45:31 字数 352 浏览 0 评论 0原文

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

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

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

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

原文

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.

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.

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

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

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（3）

北笙凉宸 2025-01-12 08:45:31

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

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

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

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

Google 写了一个<一href="https://developers.google.com/web/fundamentals/design-and-ui/input/forms/#recommended_input_name_and_autocomplete_attribute_values" rel="noreferrer">非常好的指南，用于开发友好的网络应用程序对于移动设备。他们有一个部分介绍如何命名表单上的输入以轻松使用自动填充功能。尽管它是为移动设备编写的，但这适用于桌面和移动设备！

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

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

  • 对所有 字段使用
  • 将 autocomplete 属性添加到您的 标记中，并使用此 指南。
  • 为所有 标记正确命名 name 和 autocomplete 属性

  • 示例：

    
<输入类型=“文本”名称=“名称”id=“frmNameA”
placeholder =“全名”需要自动完成=“名称”>

<标签=“frmEmailA”>电子邮件
<输入类型=“电子邮件”名称=“电子邮件”id=“frmEmailA”
placeholder="[电子邮件受保护]" 必需 autocomplete="email">



<输入类型=“电子邮件”名称=“emailC”id=“frmEmailC”
placeholder="[电子邮件受保护]" 必需 autocomplete="email">


<输入类型=“电话”名称=“电话”id=“frmPhoneNumA”
placeholder="+1-555-555-1212" 需要 autocomplete="tel">

如何命名 标签

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

以下是如何命名您的输入：

  • 名称
    • 使用以下任何一个作为名称：name fname mname lname
    • 使用其中任何一个自动完成：
      • 姓名（全名）
      • given-name（名字）
      • additional-name（中间名）
      • family-name（姓氏）
    • 示例：
  • 电子邮件
    • 使用其中任何一个作为名称：电子邮件
    • 使用其中任何一项自动完成：电子邮件
    • 示例：
  • 地址
    • 使用以下任意一项作为名称：地址 城市 地区 省 州 zip zip2 邮政国家
    • 使用其中任何一个自动完成：
      • 对于一个地址输入：
        • 街道地址
      • 对于两个地址输入：
        • 地址行1
        • 地址行2
      • address-level1（州或省）
      • 地址级别2（城市）
      • 邮政编码（邮政编码）
      • 国家/地区
  • 电话
    • 使用以下任意一项作为名称：电话、手机、国家/地区代码、区号交换后缀分机号
    • 使用其中任何一个来自动完成：tel
  • 信用卡
    • 使用以下任意一项作为姓名：ccname 卡号 cvc ccmonth ccyear exp-date 卡类型
    • 使用其中任何一个自动完成：
      • 抄送名称
      • 抄送号码
      • cc-csc
      • cc-exp-month
      • cc-exp-year
      • cc-exp
      • cc 类型
  • 用户名
    • 使用其中任何一个作为名称：用户名
    • 使用其中任何一项自动完成：用户名
  • 密码
    • 使用以下任意一项作为名称：密码
    • 使用其中任何一个自动完成：
      • 当前密码（用于登录表单）
      • 新密码（用于注册表单和密码更改表单）

资源

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

There is now full documentation on how to trigger autocomplete.

Here's a link to the official current WHATWG HTML Standard for enabling autocomplete.

The following answer is from my original answer from here: https://stackoverflow.com/a/41965106/1696153

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!

How to Enable AutoComplete on your HTML forms

Here are some key points on how to enable 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="[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

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
    • 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)

Resources

回复 原文
过度放纵 2025-01-12 08:45:31

有很多内容可能是“预期的”（例如 RFC3106 中的内容或hCard 格式），但最终取决于您可以在Chromium 来源 代码，我猜。

这个特定部分似乎是 Chromium 的 AutoFill 实现 您可能感兴趣，我对此感兴趣使用 Google 代码搜索功能 适用于 Chromium 现已通过 Google 代码项目托管提供。

一些用于正则表达式的常量经过外部处理在 autofill_regex_constants 中定义.h 并以相当 广泛autofill_regex_constants.cc.utf8 中的列表（即使支持 I18N！）。

There are a bunch of stuff that could be "expected" (like things in RFC3106 or the hCard format) but in the end it comes down to what you can find in the Chromium source code, I guess.

This specific section which seems to be Chromium's AutoFill implementation is probably of interest for you, which I found by using the Google Code Search feature for Chromium now available via Google Code Project Hosting.

Some of the constants are extern-ed used for regular expressions are defined in autofill_regex_constants.h and provided in a fairly extensive list (even with I18N support!) in autofill_regex_constants.cc.utf8.

回复 原文
瑕疵 2025-01-12 08:45:31

看起来 Chrome (v51.0) 实现了以下规范： https://html .spec.whatwg.org/multipage/forms.html#autofill

这意味着您可以使用 Chrome 应填写的特定类型的值来填充 autocomplete 属性。

示例：

<input type="text" autocomplete="address-line1" id="a1" name="a1" />
<input type="text" autocomplete="address-line2" id="a2" name="a2" />
<input type="text" autocomplete="address-level2" id="city" name="city" />
<input type="text" autocomplete="address-level1" id="state" name="state" />
<input type="text" autocomplete="country-name" id="country" name="country" />

<input type="text" autocomplete="tel" id="phone" name="phone" />
<input type="text" autocomplete="email" id="email" name="email" />

（显然我在示例中省略了标签）

It looks like Chrome (v51.0) implements the following spec: https://html.spec.whatwg.org/multipage/forms.html#autofill

This means that you can populate the autocomplete attribute with specific types of values that Chrome should fill in.

Examples:

<input type="text" autocomplete="address-line1" id="a1" name="a1" />
<input type="text" autocomplete="address-line2" id="a2" name="a2" />
<input type="text" autocomplete="address-level2" id="city" name="city" />
<input type="text" autocomplete="address-level1" id="state" name="state" />
<input type="text" autocomplete="country-name" id="country" name="country" />

<input type="text" autocomplete="tel" id="phone" name="phone" />
<input type="text" autocomplete="email" id="email" name="email" />

(Obviously I've left out the labels on the examples)

回复 原文
~没有更多了~

关于作者

恋你朝朝暮暮

暂无简介

文章
评论
505 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

忆悲凉

文章 0 评论 0

hgfg1645

文章 0 评论 0

qq_qLPLYi

文章 0 评论 0

戏舞

文章 0 评论 0

殊姿

文章 0 评论 0

﹂绝世的画

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文