In this article I am going to analyze what a perfect login page or login form should have. Also you are able to download the pure CSS3 login form for free.
Login forms are very simple in terms of the required elements. When it comes to forms, it doesn't get simpler than that. But some of the elements that could be valuable to your users (or potential members) are often neglected.
Let's take a look at what I think are necessary elements.
Take a look at the login page or Download the demo
1. The title
I believe that each form should have a prominent title that briefly explains what the form is about. If you use login page, like in my example, it is important to mention the name of your website here, so the accidental visitors know where they are.
2. Non members
Non-member visitors may stumble upon your login page one way or another. Why not think of them and offer them a direct link to the registration page. It will save them some time and you increase your chance of more new member signing up.
3. Input fields and labels
Although login forms usually contain two input fields, it is important that they're styled nicely so the labels are readable, and there is no. One thing that I often notice on the various websites is the lack of clickable labels. You should use FOR attribute on labels "connect" them with appropriate input field. It is such a small effort when coding and it can make a huge difference in terms if usability.
4. Forgot password link
This is also very important link. Many users have numerous accounts and passwords and they often can't remember which one they used on your site. The best placement for this link is near the password field itself.
5. Submit button
This should, of course, be the most prominent thing in the form. For best results (by results I mean best user experience) it should always look like a button.
6. Remember me
Very useful feature that your returning users will appreciate. If your application supports it, include this option and your members will be thankful.
One thing that I believe that is very important is wrapping the checkbox and the text inside the same label. Checkboxes are small and therefor hard to click on. If you wrap entire text inside the label, you enlarge the clickable area and that way making the life easier for your users.
7. Back link
If you have full login pages, then you MUST allow users to change their mind about logging in and provide a link back to your home page.
Validation
Although the form shouldn't rely on JavaScript validation alone, I believe that JavaScript based validation scripts are important. They provide instant filtering of the valid data, allowing users to immediately correct their info and also making sure that the valid data is sent to the server-side.
Demo
I have prepared a demo page for you to download (for free). The login page is contains a pure CSS3 styled form and a simple validation script, ideal for learning purposes. Hope you'll enjoy it!
Upo 16 Feb, 2011
cssglobe 16 Feb, 2011
Cihangir 16 Feb, 2011
Benjamin Parisot 16 Feb, 2011
I think the question we should all ask ourselves is : Why do we need a login page ? According to me, Or you integrate it in the page (for example, it can be a tab. Or it is an overlaid information (like a popup) because this shouldn't feel like a "step" for the registered user and shouldn't bother the unregistered user.
Maybe it should be as integrated as the facebook or google quick connect.
Let me know what you think :)
Enjoy !
Fisayo 16 Feb, 2011
cssglobe 16 Feb, 2011
Just as you, I prefer "popup" or slide down login forms... but the content of this article (and the styling of the form) can be used in that case as well.
Dan Eastwell 16 Feb, 2011
I'd also put submit button on the right and 'go back' link on the left for LTR languages.
Secondly, if you're using an overlay, ensure the page you're on is https.
I'd also be wary of calling anything 'perfect'. I'd imagine @lukew would have a lot to say about that.
Benjamin Parisot 16 Feb, 2011
@Dan: Totally agree ! Login on the right (in semiology, right = future, next step) and the back on the left (to go back, like in books, make sense)
One more point, the "register" button outside feels a bit weird for me, I like the way amazon did it even if it is not obvious (you have to read to understand), but trying go fusion subscription and login, great great great !
Tom 16 Feb, 2011
I'm not sure why we want to force modal windows for login, but I know there are times when it needs to be done. But I personally only want to use a modal window when I don't have any other choice.
Looks nice though!
Benjamin Parisot 16 Feb, 2011
http://goo.gl/C7JyC
web design cardiff 16 Feb, 2011
awake 17 Feb, 2011
Deep 18 Feb, 2011
Ralph 22 Feb, 2011
Jason Grant 1 Mar, 2011
I had to 'hunt' for the 'Register here' link also.
The placement of error messages also feels odd and broken.
I think you can do even better.
kurye 3 Mar, 2011
haydyn 7 Mar, 2011