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

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

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

另外，我看到诸如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")

})