In this article I will analyze what a perfect login page or login form should have. Also you are able, the Pure CSS3 login form for free download.
Login forms are very easy on the required elements. When it comes to forms, not is easier. But some of the items that your users (or potential members) could be useful are often neglected.
You take a look at what I think are necessary elements.
I think that each form a prominent title that should have explained briefly what is form. If you use login page, it is important to mention the name of your website here so that random visitors who know where you are as in my example.
Non-members may stumble on your login page one way or other visitors. Why think of you and offer you a direct link to the registration page. It will save some time and increase your chances of more new member sign up.
Although login forms usually contain two fields, it is important that you are nicely formatted so the tags are readable, and there is no one thing that I often notice on the various websites is lack of clickable labels. For attribute labels use "Connect to relevant field". It is such a small effort by encoding and it can be a big difference in terms to make, if usability.
This is also very important. Many users have can not remember often many accounts and passwords, and you used on your site. The best position for this link is close to the password field.
This should be the most prominent thing in the form of course. For best results (results I think best user experience) it should look like a button.
Very useful function that will appreciate your returning users. If your application supports it, contain this option and your members will be grateful.
One thing I think that is very important, is the check box and wrap the text in the same label. Checkboxes are small and therefor hard on click. If all the text in the label wrap, enlarge the clickable area and in this way, users make life easier for your.
Have you must allow full login pages, then users, think about logging in change and give a link back to your home page.
Although form JavaScript validation alone leave should not, I think that JavaScript based validation scripts are important. Offer instant filtering of valid data allowing to correct users to your information immediately and also ensure that the valid data on the server-side will be sent.
I have downloaded a demo site for you (free) prepared. The login page is a pure CSS3 styled form and contains a simple validation script, ideal for learning purposes. Hope you will enjoy it!