使用自动填充表单控件（自动完成属性）使表单填写更快

Posted 2023-02-24

【中文标题】使用自动填充表单控件（自动完成属性）使表单填写更快

【英文标题】：Making form filling faster, using autofilling form controls(the autocomplete attribute)

【发布时间】：2016-01-08 08:23:45

【问题描述】：

我正在开发一个 html 表单，用户可以在其中存储他们的账单和运输表单。在阅读了这篇文章link 之后，我正在尝试使用这些属性，但它在 chrome v-47 中不起作用。我只使用提供的属性，例如运输表格：

<input autocomplete="given-name"  autofocus  id="ship_first_name" type="text"  name="ship_first_name" value="" data-attr-ascii = "true" required/>
<input autocomplete="shipping tel"  id="ship_telephone_no"  type="text" name="ship_telephone_no" value="" data-attr-ascii = "true" required/>
<input autocomplete="shiiping address-line2" id="ship_address_line2" type="text"  name="ship_address_line2" value="'" data-attr-ascii="true"/>
<input autocomplete="family-name" id="ship_last_name" type="text"  name="ship_last_name" value="" data-attr-ascii = "true" required/>
<input autocomplete="shiiping address-line1" id="ship_address_line1" type="text"  name="ship_address_line1" value=" data-attr-ascii="true" required/>
<input autocomplete="shipping postal-code" id="ship_zip_code" type="text" name="ship_zip_code" value="data-attr-ascii = "true" required/>

同样，我也用于计费，但是当我检查这些属性时它不起作用。它不会提供从浏览器自动填充选项中选择值的选项。我的自动填充选项已启用。即使输入了相同的名称，它也不会填充其余的 html 字段。有人请建议，我在哪里做错了。提前致谢。

【问题讨论】：

你在其中几个中拼错了shipping。

【参考方案1】：

您的表单中有几个拼写错误。

在address-line1 和address-line2 之前，您将shipping 拼写为shiiping。

在ship_address_line1 和ship_zip_code 中，value= 之后只有一个双引号，因此表单的其余部分被错误地解析。

Chrome 显然需要输入在 <form> 中才能执行自动填充。

<form>
  <input autocomplete="given-name" autofocus id="ship_first_name" type="text" name="ship_first_name" value="" data-attr-ascii="true" required/>
  <input autocomplete="shipping tel" id="ship_telephone_no" type="text" name="ship_telephone_no" value="" data-attr-ascii="true" required/>
  <input autocomplete="shipping address-line2" id="ship_address_line2" type="text" name="ship_address_line2" value="'" data-attr-ascii="true" />
  <input autocomplete="family-name" id="ship_last_name" type="text" name="ship_last_name" value="" data-attr-ascii="true" required/>
  <input autocomplete="shipping address-line1" id="ship_address_line1" type="text" name="ship_address_line1" value="" data-attr-ascii="true" required/>
  <input autocomplete="shipping postal-code" id="ship_zip_code" type="text" name="ship_zip_code" value="" data-attr-ascii="true" required/>
</form>

【讨论】：

是的，我所有的输入都包含在表单标签中。

我在 Chrome 47 中自动填充此表单。