Sometimes it is desirable that fields on a form be remembered by the browser. Even, sometimes, using the common names for form fields is encouraged (e.g: using ‘email’, ‘name’, ‘nick’, ….) so when the user opens the web page, most of the form fields would be already filled.

On the other hand, there are other kind of forms where the idea is that they would be filled once and once again, so it is not desirable that the browser remembers the last text introduced.

Lucky us, there is an attribute called “autocomplete” that could be initialized to “on” or “off” depending on when we want to enable or disable the autocomplete on a field, or even the whole form.

As the things are usually better understood with an example, following there is an example about how to disable the autocomplete in all fields of a form:

<form action="#" <b>autocomplete="off"</b>>
   <input type="text" name="email" value="...email..." />
   <textarea  name="description">...description...</textarea>
   <input type="submit" />
</form>

Look at the result:

Finally, another example where only the e-mail field has the autocomplete enabled

<form action="#" <b>autocomplete="off"</b>>
   <input type="text" name="email" value="...email..." <b>autocomplete="on"</b> />
   <textarea  name="description">...description...</textarea>
   <input type="submit" />
</form>

And the resulting form:

If you want to see the difference, just fill the first form and press the submit button, you will see, after the page is reloaded, that the email contains the original text ‘…email…’ no matter what you have typed. Then fill the second form, and press submit. You will see that this time the form will remember what you have just typed. You could refresh the page by using F5 or Ctrl + R and the form will still contain the value you introduced (Trick: under Firefox, press Ctrl + Shift + R to reload as if it was the first time)

There are also alternatives to the use of autocomplete, if you are interested take a look at the link.

Trackback URL