如何预填用户输入表单？

Posted 2023-02-24

【中文标题】如何预填用户输入表单？

【英文标题】：How to prefill the user input form?

【发布时间】：2018-10-04 07:00:41

【问题描述】：

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

<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="[e-mail]" required autocomplete="email">


<label for="frmPhoneNumA">Phone</label>
<input type="tel" name="phone" id="frmPhoneNumA" placeholder="[phone]" required autocomplete="tel">

Here 是小提琴。目前，用户必须关注这些元素，然后显示建议。加载表单后，有什么方法可以预填充这些数据？我们想预填充自动完成中的第一个建议，而不是一些硬编码的值。

另外，我看到 facebook、twitter 等网站仅使用自动完成功能而不是预填充数据 - 是否有任何具体原因不预填充这些内容？

【参考方案1】：

自动完成属性指定表单是否应该开启或关闭自动完成功能。

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

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

【讨论】：

您可以在 w3schools 上找到工作示例。这是链接w3schools.com/tags/…

我仍然需要关注输入字段并手动选择以前填充的值。我想在没有用户操作的情况下预填充这些

你的意思是刷新页面，所有之前的值都已经填充了吗？

【参考方案2】：

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

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

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

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

)

【讨论】：

我想从自动完成中预填充 - 这不是我想先存储然后填充的东西

您不能自动补充。你需要 javascript。