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.
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.
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.
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.
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.
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.
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.
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.