使用自动填充表单控件(自动完成属性），加快表单填充速度

Making form filling faster, using autofilling form controls(the autocomplete attribute)

本文关键字：表单 填充 属性 速度 控件      更新时间：2023-09-26

我正在开发一个html表单，用户可以在其中存储他们的账单和发货表单。在阅读了本文链接后，我试图使用这些属性，但它在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字段。请给我一个建议，我哪里做错了。提前谢谢。

表单中有几个拼写错误。

在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>

相关文章：