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!

Enjoyed the article?

Then don't miss our next one! Subscribe to our RSS feed or share it with your friends.

Share on FacebookTweet thisDeliciousStumbleUpon RedditSubscribe

Comments (17 Comments)

1. Upo
   February 16, 2011

   I would not use "please" word in validation/tool-tip message. It may be culture dependent (I am Russian by the way) but, until you build real AI you shall not force the computer speak like a human.

2. cssglobe
   February 16, 2011

   interesting point there Upo...

3. Cihangir
   February 16, 2011

   Nice post but I think there is something wrong with the location of submit button. User experience tests indicate that it works best when it's placed under password field on the left where you put forgot my password link.

4. Benjamin Parisot
   February 16, 2011

   Hi there, 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 !

5. Fisayo
   February 16, 2011

   Thanks for this wonderful post about Login.

6. cssglobe
   February 16, 2011

   @Benjamin: one of the possible uses of the login page is logging into an intranet app or something similar... I know that various project management applications have login pages similar to this one. 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.

7. Dan Eastwell
   February 16, 2011

   Couple of points: 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.

8. Benjamin Parisot
   February 16, 2011

   @cssglobe: Maybe it depends on the website you put this one in. It feels like a waste of space (like wasting a piece of paper) if there is only this login thing on the page. I agree that if it is as a popup the content of this article is relevant ! @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 !

9. Tom
   February 16, 2011

   I agree with the comments on the button. I always like to see that clear path to completion from form fields to action button, and it feels really disjointed. But easily solved by swapping a couple things. 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!

10. Benjamin Parisot
    February 16, 2011

    I took the time to create one that (is not perfect) reflect the way I think it should be: http://goo.gl/C7JyC

11. web design cardiff
    February 16, 2011

    This is a wonderful blog.Thank you for sharning this information with every one

12. awake
    February 17, 2011

    nice article... you should add this module to easy framework (are you still updating this framework?)

13. Deep
    February 18, 2011

    THis article just jumps the "sucking line" marginally. It is missing out basic principles as LTR, submit button positioning, too much gap between labels and the field (gosh my eyes are tired following) . Its far from being perfect Login page but again perfect is subjective.

14. Ralph
    February 22, 2011

    This article help me to improve a useful login-webside.

15. Jason Grant
    March 1, 2011

    I'm not sure about the layout of this piece. Login button more 'naturally' sits on the right hand side. 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.

16. kurye
    March 3, 2011

    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 !

17. haydyn
    March 7, 2011

    labels should either be on top or in the inputs, that's a newbie usability mistake.

Sorry, the comment form is closed at this time.