CODEWITHSUNDEEP
htmlgoogle-chromeautofill
Sahil Sharma
Sahil Sharma

Reputation: 4217

How to prefill the user input form?

I have a very basic form where I ask user's name, mobile, email. I have enabled autocomplete provision in these fields using the following code:

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


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

Here is the fiddle. Currently, the user has to focus on these elements and then it displays the suggestions. Is there any way by which we can prefill this data once the form is loaded? We want to prefill the 1st suggestion that comes in the autocomplete and not some hard coded value.

Also, I saw websites like facebook, twitter etc. using only autocomplete and not prefilling the data - is there any specific reason to not prefill the things?

Upvotes: 0

Views: 5309

Answers (2)

NVRM
NVRM

Reputation: 13067

You can store user values into the localStorage at completion, then load this values on page load.

This way, no need to hardcode datas, neither store server side. 

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

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

})

enter image description here

Upvotes: 0

Usman Ali
Usman Ali

Reputation: 58

The autocomplete attribute specifies whether a form should have autocomplete on or off.

When autocomplete is on, the browser automatically complete values based on values that the user has entered before.

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

Upvotes: 1

Related Questions