如何预填写用户输入表格？

Question

我有一个非常基本的表格，询问用户的姓名，手机和电子邮件。我已使用以下代码在这些字段中启用了自动完成设置：

<label for="frmNameA">Name</label>
<input 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">


<label for="frmPhoneNumA">Phone</label>
<input type="tel" name="phone" id="frmPhoneNumA" placeholder="+1-650-450-1212" required autocomplete="tel">

Here是小提琴。当前，用户必须专注于这些元素，然后显示建议。表单加载后，是否可以通过任何方式预填充此数据？我们要预填充自动填充而不是一些硬编码值中的第一个建议。

此外，我看到诸如facebook，twitter等的网站仅使用自动完成功能而不预填充数据-是否有任何特定的原因不预填充数据？

Answer 1

autocomplete属性指定表单应启用还是禁用自动完成功能。

启用自动完成功能后，浏览器会根据用户之前输入的值自动完成值。

<form action="/action_page.php" method="get" autocomplete="on">
  First name:<input type="text" name="fname"><br>
  E-mail: <input type="email" name="email"><br>
  <input type="submit">
</form>

Answer 2

您可以在完成时将用户值存储到localStorage中，然后在页面加载时加载该值。

这样，无需硬编码数据，也无需存储服务器端。

// Store 
localStorage.setItem("userconfig",mail.value)

// Fill data
onload = (function(){
  mail.value =   localStorage.getItem("userconfig")

})