Forms are important web devices: they make us money on ecommerce sites, enable user feedback, submit search queries and provide the ability to enter information into web databases. Although form usability is one of the easier tasks, it is also one of the most neglected.
Provided below are 7 simple techniques to help you design usable forms.
#1: Provide default form values
Default values keep your user from entering in fairly obvious information. If your site caters to users in the United States, and you have a form that requests the user's contact information, default the 'Country' value to 'United States'. If you run an ecommerce site and store the names, addresses, phone numbers, etc of all your users, default those particular values within your forms to the respective value in your database if the user is logged in.
#2: Set the user's cursor to the first form field
One of the nicer things that you can do for your users is place the user's cursor, automatically, in the form's first field. This prevents your user from having to take their mouse and click within the first field.
Javascript's ONLOAD function provides the ability to place your user's cursor within the respective form field. Consider the following code snippet:
The ONLOAD function is placed within the BODY tag of the HTML document. Change 'firstfield' to the name of the first field within your form.
#3: Only ask for necessary information
The last thing users want to do is sit at your site filling in form information that really doesn't relate to what they're doing. If you're designing a user account creation form, for example, the user's place of birth probably doesn't matter, nor is it relavent what the user's favorite color is. Of course, include the fields that you need to know, but only those. Resist the urge to profile your users. Even if you don't require unnecessary fields, they still clutter up your feedback form. Keep these fields to a minimum.
#4: Validate, but do not over validate, your forms
Form validation is a must; it prevents those mischievous users from submitting completely blank forms. It is perfectly acceptable to require names, email address, phone numbers and the like, but it is quite easy to fall into the trap of over validation.
For example, if users submit their phone numbers like this: 111.111.1111 instead of like this: (111) 111,1111, who cares? Don't throw a form error because the user doesn't format their numbers according to your various preferences. Instead, either accept different formats for field values or write code to reformat those fields on the fly (automatically) before submitting.
Similarly, credit card numbers are big business online. Have you ever experienced an online business that requires credit card numbers to be provided using the xxxx-xxxx-xxxx-xxxx format, instead of xxxxxxxxxxxxxxxx? Those forms are poorly designed and exhibit below par usability. Let users format their data as they like, within reason. Of course, your credit card validation needs to ensure that 16 digits exist (not including dashes), but do not validate the mere use of dashes.
#5: Size your textboxes according to expected value
If you are asking for an 8-digit password, do not display a textbox that spans 30 characters. Logically, users interpret the size of your textboxes to indicate the expected size of the value. Use a textbox size that relates directly to the size of the value, and use the maxlength attribute if values cannot exceed a specific character threshold.
#6: Resist the use of the Reset button
Users get very little use out of the Reset button. Thus, they provide very little utility and actually work to harm some hasty users. Imagine taking 15 minutes to fill out a feedback form, then accidently hit the Reset button instead of the Submit button. Instantly, the last 15 minutes of your life has been needlessly wasted. More likely than not, the user will not take the time to supply the information again, and if they do, they do so under duress and are more prone to silly mistakes. To avoid annoying your users, do not include a reset button.
#7: Use labels to enhance form element "clickability"
The label tag makes it possible to click the label text of a form element instead of the form element itself. For example, consider the following:
Instead of clicking on the radio button, try clicking on the text next to it. The radio button next to the respective text becomes active. Here's the code:
You are not logged in. 
Like new stuff? Here are the newest articles, at your service.
We've teamed up with mighty Amazon.com to bring you the best in technical literature. Check them out. Learn. Experience.