Laying out a form can be highly interesting. Specially with CSS formula applied to it, these forms can create a difference to the design of the website. For each of the form element in a left-to-right reading system, it becomes logical to position the corresponding label in one of the three ways:

• In a separate left column, left aligned
• In a separate left column, right-aligned
• Directly above the form element

Labels that are positioned directly above a form element have shown to be processed most swiftly by the users. The compact grouping between label and element decreases eye movement thereby allowing the user to observe both of it simultaneously. Labels that are positioned in a column to the left of the elements look far more organized and neat. However, the way in which the texts in those labels are aligned also affects the usability of the form.

Following screenshot will show how it looks when labels are positioned directly above a form element:

A far stronger grouping can be possible between label and element by right-aligning the text. The ragged left edge of the labels can make the form look disturbed and decrease the ability of users to scan the labels by themselves. But in a left-aligned column, the labels become instantly easier to scan, but the grouping with associated form elements become weaker. But users have to spend some more time correlating the labels with elements, resulting in slower form completion method.

The right aligned column layout allows swifter association between label and element, so it becomes highly appropriate for forms that will be visited repeatedly by the users. However, both the layouts have the benefits of occupying minimum amount of vertical space.