Forms are an integral part of any website. They are a must-used constituent of every web designer’s scheme of things. Forms have their own strong followers and detractors. But they largely control the usability of a site. The design of your forms will decide whether your visitors remain at the site or simply fade away. Here are some well-known techniques to turn your not so impressive forms to the most appealing ones.

Most of the designers fail to remember the use of certain tools which are already available to them by the platform which they are working on. A label usually provides information to a control. When a label gets focused, the corresponding control also receives focus. It is quite handy in case a visitor clicks on a label name and the control associated with it receives attention.

<label for=”email”>Email: </label>
<input type=”text” id=”email”>

or

<label>Email: <input type=”text” id=”email”></label>

There are certain other attributes which need to be defined. The ‘fieldset’ attribute enables web designer to group all related controls and labels on the basis of their theme. It helps in easy-understanding of their purpose and makes tabbing navigation easy. The ‘legend’ element provides a caption to the fieldset. It enhances accessibility if the fieldset is unable to display. The ‘tabindex’ attribute indicates the location of the existing element in the tabbing order for the present document. The ‘accesskey’ attribute allocates an access key to an element. It is generally chosen from the document character set. If you use ‘password’ in your input field, then whatever character you enter in that field gets converted into asterisk.

With the help of CSS and little bit JavaScript, you can improve your lackluster forms into something eye-catching. You can apply styles to various form buttons, hide optional fields and create a form with proper lay-out and style without the need for using tables.

Users while providing information in a form, make use of the tab button for moving from one control to the other. The ‘autotab’ feature facilitates the task of navigation between various controls by automatically focusing its attention to the next control after the previous control’s maximum length is achieved. To activate the autotab feature, you must have three things in your markup. They include: tabindex, className of autotab and maxlength.

<input type=”text” name=”areacode” class=”autoTab” tabindex=”1″ maxlength=”3″ />

Each field has its own limits and necessities. A user must be aware of this information before putting data there. For example, a password must be at least 6 characters long and include three capital letters. You need to provide all related information about a particular control in a fields label tag. You must have a className, an accesskey and an explanatory title provided there. This leads to quick and easy reorganization and use of JavaScript to add functionality to the form.

Most of the time, users provide wrong information as against the guidelines of the control. So it is imperative to display error messages speedily and competently. Always try to display all errors at once and not one by one.

Tags: Form Improvement Techniques