Home

Don't prepopulate login forms

Sun, 10/17/2010 - 12:27 — Bart

A lot of websites have login forms. Those usually have two fields: one for the username and one for the user to enter his password. Pretty simple, you might say, but that's exactly where things can go wrong.

Login forms are usually so simple they're not considered 'real' forms in terms of how they should look. A lot of websites hide their login forms in a corner or behind some sort of button. As a consequence element labels take up too much space–bigger forms means more effort to hide them in a corner. So, let's remove the labels then. Voila! We have a very small form. Just two input elements and a button. But wait, we can even remove the button, because forms can be submitted by hitting return, right? Too bad not everybody knows how to submit forms this way.

Now we're at a point where we removed the labels, we start wondering if we did the right thing. After all, how should our users know what to enter in which field? This can easily be solved by giving the username input a value of "username" and give a random value to the password field (it'll show up camouflaged anyway), right? If a user clicks on the field, we'll just remove the contents with JavaScript.

Not really.

  1. Not everybody has JavaScript support. Some browsers don't even have support for JavaScript, like screen readers or text browsers. In other cases the browser does support it, but it's disabled. In the past a lot of companies disabled JavaScript support on their computers by default, but today I guess it's mostly developers who have it turned off for testing other websites, or someone just disabled it by accident.
  2. Modern browsers can remember passwords and fill them in automatically. That is, if websites haven't already filled in input elements already with values like "username", because the usual element label didn't look good...

Let's summarise: don't prepopulate login forms. Ever. And if you start wondering if users will still get how to use your form, consider putting back the labels. After all, shit don't just have to look good, but it has to be usable as well.