How to Design User-Friendly Forms in HTML5
Designing useful forms in HTML is a different undertaking from designing easy-to-use forms. Your form may gather the data that you need, but if your form is difficult for visitors to use, they may abandon it before they’re done.
As you use the markup elements and other elements that drive page layout, keep the following guidelines in mind:
Provide textual clues for all your forms. Be clear about the information you want and the format you need.
For example, tell users details such as whether
Dates must be entered as mm/dd/yy (versus mm/dd/yyyy).
The number of characters a field can take is limited.
You can limit character by using the maxlength attribute.
Use field width and character limits to provide visual clues. For example, if users should enter a credit card number as xxxx-xxxx-xxxx-xxxx, consider creating four text fields — one for each part of the number.
Group similar fields. A logical grouping of fields makes filling out a form easier. It’s confusing if you ask for the visitor’s first name, then birthday, and then last name.
Break long forms into easy-to-manage sections. Forms in short chunks are less intimidating and more likely to be completed.
Major online retailers (such as Amazon.com) use this method to get the detail they need for orders without making the process too painful.
Mark required fields clearly. If some parts of your form can’t be left blank when users submit the form, mark those fields clearly.
You can identify required fields by
Making them bold
Using a different color
Placing an asterisk beside them
Write helpful, friendly error messages. Make sure your form validation feedback makes sense to site visitors (check them with a group of testers just to make sure). Nothing turns visitors away like a cryptic, unhelpful message. (Type 42 error may mean something to a programmer, but not to anybody else.)
Tell users what kind of information they need for the form. If users need any information in their hands before they fill out your form, a form gateway page can detail everything users should have before they start filling out the form.
The series of forms that RateGenius uses to gather information for car loans and loan refinancing are excellent examples of long forms that collect a variety of different kinds of data by using all the available form markup elements.