Wednesday, March 26, 2008

Form Follows Function and Achieving Thereof

Meaningful nomenclature used in forms design ...

"Forms can be dreadfully tricky to style and structure properly. Several articles that are out there focus on best practises for building forms using HTML en CSS. This article focusses in a non technical fashion on the use of meaningful nomenclature and how form semantics relate to elements that current markup standards have to offer. It may help you recognise structural patterns and to compose forms properly.

* Form Building Blocks

All input elements on a form must be tagged with labels. Labels describe what type of information the form may contain.

All input elements on a form should also be logically grouped in field sets. A field set is a group of form elements that are related towards each other. For instance a yes/no answer with radio buttons or an address input fields group.

The subject of the field set may be marked by means of a legend. A legend describes a group of form elements that are contained within a field set.

In retrospect it could be said that there is the following list of most important building blocks for forms:

* Input elements (Free-form input fields, text areas, radio buttons, etc.)
* Labels
* Legends
* Fieldsets

This article will illuminate which element has to be used when.

There are basically two types of forms in the world. Simple layout forms, and Complex layout forms.

Simple forms are the old fashioned type of forms that are popular for smaller patterns, such as a login dialogue.

Complex forms have a bit more layout to them. This often means that the form is divided into two imaginary columns. There's each time a question on one side and one or more answers, or input fields for the answers, on the other side.

* Complex Forms

The Concise Pattern

The following example displays a complex layout for where there's each time a short question on the left and room for an answer on the right. These questions are related towards each other and therefore grouped in a field set and tagged with a legend that says 'Personal Information'."    (Continued via    [Usability Resources]

Concise Pattern - Usability, User Interface Design

Concise Pattern


Post a Comment

<< Home

<< Home