如何預填寫用戶輸入表格？

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

})