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

Question

我知道有很多JavaScript解决方案，但有一种HTML5方法可以自动完成文本输入吗？ datalist元素几乎就是我所追求的，除了它允许您输入自定义值而不是限制您到列表中的内容。

Answer 1

您应该尝试datalist元素。它在W3C HTML5 Recommendation中明确定义，可能是现在和将来的最佳选择。

使用列表将datalist元素连接到input元素   输入元素的属性。

每个选项元素是datalist元素的后代，即   未禁用，其值为非空的字符串   string，代表一个建议。每个建议都有一个value和一个   label

基于Google Chrome和基于chromium的浏览器支持v21.x（截至2014年12月，当前版本为39，检查other browsers here的兼容性状态） Firefox 和< strong> Opera 也支持很长时间。现代（！）IE版本部分支持 datalist。

演示： Eiji Kitamura的一个伟大的working datalist implementation。

Polyfill ：另请查看RelevantDropdown。这是一个依赖于jQuery和Modernizr的HTML5 datalist polyfill。

尝试运行此示例：

<input type="search" list="languages" placeholder="Pick a programming language..">

<datalist id="languages">
  <option value="PHP" />
  <option value="C++" />
  <option value="Java" />
  <option value="Ruby" />
  <option value="Python" />
  <option value="Go" />
  <option value="Perl" />
  <option value="Erlang" />
</datalist>

W3参考：https://www.w3.org/TR/html5/forms.html#the-datalist-element

Answer 2

HTML5具有autocomplete属性，可在字段中指定为on或off。

以下是一个例子：

<form action="/form.php" autocomplete="on">
  First name:<input type="text" name="first_name"><br>
  Last name: <input type="text" name="last_name"><br>
  E-mail: <input type="email" name="email" autocomplete="off">
  <input type="submit">
</form>

它的工作方式是，您在以后每个字段的keyup访问此页面时，会建议您第一次提交的值。

决定使用此功能时出现键问题是浏览器兼容性问题。您最好的选择是检查多个浏览器以确保其有效。 caniuse.com使得支持看起来非常糟糕，但我认为使用它来帮助那些拥有现代浏览器的人不会有任何伤害。

来自W3Schools的关于autocomplete的其他事实，在这种情况下并不讨厌，因为它涵盖了基础知识：

启用自动填充功能后，浏览器会自动填写值基于用户之前输入的值。
有可能为表单自动完成“on”，为特定输入自动完成“off” 字段，反之亦然。
autocomplete属性适用于和以下类型：文本，搜索，网址，电话，电子邮件，密码，日期选择器，范围和颜色。

Answer 3

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

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

以下答案来自我原来的答案：https://stackoverflow.com/a/41965106/1696153

现在，您只需要触发自动填充即可正确命名input代码。

Google编写了pretty nice guide用于开发对移动设备友好的网络应用程序。他们有一节介绍如何在表单上命名输入以轻松使用自动填充。虽然它是为移动设备编写的，但这适用于桌面和移动设备！

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

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

对<label>个字段使用<input>
在您的autocomplete代码中添加<input>属性，然后使用此guide填写。
为所有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>！也可以找到此信息here。

以下是如何为输入命名：

名称
- 使用 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（用于注册和密码更改表单）

资源

Current WHATWG HTML Standard for autocomplete.
"Create Amazing Forms" from Google。似乎几乎每天都会更新。很好的阅读。
"Help Users Checkout Faster with Autofill" from Google。

Answer 4

使用HTML5，可以在没有任何Javascript的情况下使用谷歌建议样式自动完成输入！

请参阅此文章：An HTML5-style "Google Suggest"

然而，它尚未得到足够的支持。本文中的示例目前仅适用于Opera。

目前，最好只使用经过充分测试的库以及广泛的浏览器支持，例如JQuery UI，它具有Autocomplete小部件。

Answer 5

我按照MSDN指南强制执行datalist输入，只允许匹配datalist中选项的文本。它利用HTML Contstraint Validation API：

http://msdn.microsoft.com/en-us/magazine/dn133614.aspx

自动填充文本输入

5 个答案:

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

如何命名`<input>`代码

资源

自动填充文本输入

5 个答案:

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

如何命名<input>代码

资源

如何命名`<input>`代码