There are several different ways in which you can lay out a form. The method you choose depends upon how long the form is, its purpose, how often it will be used by each person who has to fill it out, and, of course, the general aesthetics of the web page.
It's generally considered most efficient to have one form element per line, with the lines stacked sequentially one on top of the other, as most Western-language web pages are designed to scroll vertically rather than horizontally. This allows users to follow the path to completion easily and focus their attention on entering one piece of data at a time.
For each form element in a left-to-right reading system, it's logical to position the corresponding label in one of three ways:
* directly above the form element
* in a separate left column, left-aligned
* in a separate left column, right-aligned
Each of these approaches has its own advantages and its own look, so consider these options when you're deciding how to lay out a form for a particular page.
Labels that are positioned directly above a form element have been shown to be processed most quickly by users. The compact grouping between label and element reduces eye movement by allowing the user to observe both simultaneously -- here's an excellent article published by UXmatters. However, this type of positioning is rather utilitarian, and isn't the most aesthetically pleasing layout. It also has the disadvantage of occupying the most vertical space of the three layouts, which will make a long form even longer. Generally, top-positioned labels work well for short forms that are familiar to the user -- see the comment form in Figure 3, which is from a previous incarnation of the Dress For Dialogue web site.
--------------------------------------------------------------------------------
corporate recognition awards Murphy for congress