HTML5 表单自动填表功能

Posted by 任平生 on April 16, 2015

使用 autocomplete 属性可以为表单提供自动填表能力：

autocomplete.png

<input type="text" name="name" autocomplete="name">

<input type="email" name="email" autocomplete="email">

<input type="tel" name="phone" autocomplete="tel">

HTML5 表单的自动填表已经成为 WHATWG HTML 标准的一部分了，autocomplete 可以使用的取值有以下这些：

autocomplete 取值 含义 取值格式 取值示例 Control group
name 全名 单行任意文字 Sir Timothy John Berners-Lee,
OM, KBE, FRS, FREng, FRSA		 Text
honorific-prefix 名字前的尊称 (e.g. "Mr.", "Ms.", "Dr.", "Mlle") 单行任意文字 Sir Text
given-name 名字 单行任意文字 Timothy Text
additional-name 中间名 单行任意文字 John Text
family-name 姓氏 单行任意文字 Berners-Lee Text
honorific-suffix 名字后的尊称，一般都是封衔 (e.g. "Jr.", "B.Sc.", "MBASW", "II") 单行任意文字 OM, KBE, FRS, FREng, FRSA Text
nickname 昵称 单行任意文字 Tim Text
organization-title 职称 (e.g. "Software Engineer", "Senior Vice President", "Deputy Managing Director") 单行任意文字 Professor Text
username 用户名 单行任意文字 timbl Text
new-password 新密码 (e.g. 新建账户或者修改密码时) 单行任意文字 GUMFXbadyrS3 Password
current-password 当前 username 对应的密码 (e.g. 登陆时) 单行任意文字 qwerty Password
organization 公司、组织名 单行任意文字 World Wide Web Consortium Text
street-address 街道地址 (多行) Free-form text 32 Vassar Street
MIT Room 32-G524		 多行文字
address-line1 街道地址 (单行) 单行任意文字 32 Vassar Street Text
address-line2 单行任意文字 MIT Room 32-G524 Text
address-line3 单行任意文字 Text
address-level4 乡、镇 单行任意文字 Text
address-level3 区、县 单行任意文字 Text
address-level2 城市 单行任意文字 Cambridge Text
address-level1 州、省、直辖市 单行任意文字 MA Text
country 国家代码 Valid ISO 3166-1-alpha-2 country code [ISO3166] US, CN Text
country-name 国家名字 单行任意文字; 有时来自 country US Text
postal-code 邮政编码 单行任意文字 02139 Text
cc-name 信用卡持卡人全名 单行任意文字 Tim Berners-Lee Text
cc-given-name 信用卡持卡人名字 单行任意文字 Tim Text
cc-additional-name 信用卡持卡人中间名 单行任意文字 Text
cc-family-name 信用卡持卡人姓氏 单行任意文字 Berners-Lee Text
cc-number 信用卡卡号 ASCII digits 4114360123456785 Text
cc-exp 信用卡过期时间 Valid month string 2014-12 Month
cc-exp-month 信用卡过期时间－月份 Valid integer in the range 1..12 12 Numeric
cc-exp-year 信用卡过期时间－年份 Valid integer greater than zero 2014 Numeric
cc-csc 信用卡三位安全码 ASCII digits 419 Text
cc-type 信用卡发卡组织 单行任意文字 Visa Text
transaction-currency 交易货币 ISO 4217 currency code [ISO4217] GBP Text
transaction-amount 交易总额 (e.g. 出价或投标时使用) Valid floating-point number 401.00 Numeric
language 首选语言 Valid BCP 47 language tag [BCP47] en Text
bday 出生日期年月日 Valid date string 1955-06-08 Date
bday-day 出生日期－日期 Valid integer in the range 1..31 8 Numeric
bday-month 出生日期－月份 Valid integer in the range 1..12 6 Numeric
bday-year 出生日期－年份 Valid integer greater than zero 1955 Numeric
sex 性别 (e.g. 男, 女) 单行任意文字 Male Text
url 网址 Valid URL http://www.w3.org/ URL
photo 照片、图标、或其他图片 Valid URL http://www.w3.org/2015/03/w3cx-logo.png URL
tel 电话号码，包含国家码 ASCII digits and U+0020 SPACE characters, prefixed by a U+002B PLUS SIGN character (+) +1 617 253 5702 Tel
tel-country-code 国际区号 ASCII digits prefixed by a U+002B PLUS SIGN character (+) +1 Text
tel-national 不包含国际区号的电话号码 ASCII digits and U+0020 SPACE characters 617 253 5702 Text
tel-area-code 区号 ASCII digits 617 Text
tel-local 不包含国际区号、区号的电话号码 ASCII digits 2535702 Text
tel-local-prefix 本地电话号码前缀 ASCII digits 253 Text
tel-local-suffix 本地电话号码后缀 ASCII digits 5702 Text
tel-extension 分机 ASCII digits 1000 Text
email E-mail 地址 Valid e-mail address [email protected] E-mail
impp IM软件的伪协议链接 (e.g. "aim:goim?screenname=NAME" or "xmpp:[email protected]") Valid URL irc://example.org/timbl,isuser URL

示例：

若要禁用自动填表，autocomplete 取值 off。

<input type="text" name="pin" autocomplete="off">

参考资料：

Label and name inputs properly