自动完成HTML表单

Question

我正在寻找有关表单字段自动完成的答案.

如何自动填写常用输入,如名字,姓氏,地址..？

在Chrome中,如果用户拥有Google个人资料,则可以自动填充字段.

看来IE提供了类似的功能:

(来自MS网站)"您可以使用自动完成功能将您输入的密码和其他信息存储到网络表单字段中.当您启用自动完成功能时,Internet Explorer会自动填写您经常在网络表单中输入的字段,例如您的姓名和地址".

有什么方法可以确保自动填充发生,跨浏览器,使用HTML/JS？

Answer 1

这个问题已经过时了,但我有2017年的最新答案!

现在有IS如何命名一个跨浏览器的标准<input>,以触发自动完成标签.

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

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

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

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

• 使用a <label>表示所有<input>字段
• 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="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>标签

要触发自动填充,请确保在代码中正确命名name和autocomplete属性<input>.这将自动允许表单上的自动填充.一定要有一个<label>!此信息也可以在此处找到.

以下是如何命名输入:

• 名称
  • 使用以下任何一个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 (用于注册和密码更改表单)

资源

• 当前WHATWG HTML自动完成标准.
• 来自Google的"创造惊人的形式".似乎几乎每天都会更新.优秀阅读.
• 2015年,Google帮助用户"通过自动填充功能更快地结帐".