35

表单自动填充如何在现代 Web 浏览器中工作?实现自动表单填充的浏览器中最常用的技术有哪些?

- 编辑 -

问题不是关于自动完成,而是关于表单自动填充,它不仅关心先前输入的值,还考虑要完成的字段的含义和结构。例如,Google Chrome 实现尝试解析输入的字段以猜测它们的类型和结构。或者至少是我从上面链接的代码中理解的。

4

4 回答 4

16

看看kmote的这个答案

重点是浏览器会查看字段的name标签,并有根据地猜测会出现什么样的数据(正则表达式匹配是一种很好的幼稚方式)。Chrome 正在努力实现某种标准化,这样就不会那么顺利。

于 2013-10-14T21:31:47.053 回答
10

不同的技术和浏览器使用不同的方法来计算要显示的内容以及显示方式,但需要检查的一些来源是:

如果您正在考虑自己实现它(或只是使用它),我强烈建议您查看该插件。

于 2011-02-11T20:10:43.547 回答
4

autocompleteanswer 的第一个元素就是几年前 Internet Explorer 引入的非标准 HTML 表单的属性。

具有讽刺意味的是,您可以在此处阅读有关 mozilla 网站的介绍:自动完成属性和使用 XHTML 的 Web 文档

于 2010-12-25T21:37:59.593 回答
4

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

为了触发自动完成,您所要做的就是正确命名它。

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

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

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

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

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

  • 将 a<label>用于所有<input>字段
  • autocomplete为您的标签添加一个属性<input>并使用本指南进行填写。
  • 为所有标签正确命名您的nameautocomplete属性<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="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>标签

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

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

  • 姓名
    • 将这些中的任何一个用于namename fname mname lname
    • 将这些中的任何一个用于autocomplete
      • name(全名)
      • given-name(对于名字)
      • additional-name(中间名)
      • family-name(对于姓氏)
    • 例子:<input type="text" name="fname" autocomplete="given-name">
  • 电子邮件
    • 将这些中的任何一个用于nameemail
    • 将这些中的任何一个用于autocompleteemail
    • 例子:<input type="text" name="email" autocomplete="email">
  • 地址
    • 将这些中的任何一个用于nameaddress city region province state zip zip2 postal country
    • 将这些中的任何一个用于autocomplete
      • 对于一个地址输入:
        • street-address
      • 对于两个地址输入:
        • address-line1
        • address-line2
      • address-level1(州或省)
      • address-level2(城市)
      • postal-code(邮政编码)
      • country
  • 电话
    • 将这些中的任何一个用于namephone mobile country-code area-code exchange suffix ext
    • 将这些中的任何一个用于autocompletetel
  • 信用卡
    • 将这些中的任何一个用于nameccname 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
  • 用户名
    • 将这些中的任何一个用于nameusername
    • 将这些中的任何一个用于autocompleteusername
  • 密码
    • 将这些中的任何一个用于namepassword
    • 将这些中的任何一个用于autocomplete
      • current-password(用于登录表格)
      • new-password(用于注册和密码更改表格)

资源

于 2017-01-31T18:44:57.720 回答