Autocompletion doesn't autocomplete

Question

Here is a page with:

<form action="action.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> 

Let's enter the 2 fields, and submit. Then when reloading the page, the fields are not autocompleted , why?

Should I use local-storage? cookies? to be sure that a user that comes back a few days after will still have its fields autocompleted?

(I'm using Firefox with default options about autocompletion, ie not disabled).

Answer 1

Firstly you need to realise that an attribute on the element without any coding on your part is entirely browser implemented.

Browsers implement these things differently.

You should check the spec . There you will notice that, actually,

By default, the autocomplete attribute of form elements is in the on state.

The only solution to the problem you are having is to say that, if you want a more reliable and consistent, user experience; don't rely on browser implementation.

The short answer: Use Javascript

There are hundreds of plugins that will do this for you. I will point you to one that has been popular on github recently but will need you to actually need to tell this plugin what you expect it to do: https://leaverou.github.io/awesomplete/

Updated Answer:

I see that you just want to prefill the field. This can be accomplished with something like this (untested):

var form = document.forms["name_of_your_form"];
form.onsubmit = function(){
  localStorage.setItem("fname", form.elements["fname"].value);
  localStorage.setItem("email", form.elements["email"].value);
}
window.onload = function() {
  form.elements["fname"].value = localStorage.getItem("fname");
  form.elements["email"].value = localStorage.getItem("email");
}