This page summarises the main guidelines for good form design.
See Attachments and Web Links at end of page for further reading.

Main Guidelines for Form Design

General

• Keep forms as short as possible
  • For long forms show a progress indicator
• For large transaction forms reduce all extraneous detail on the page (e.g. site navigation is entirely irrelevant when you're in the middle of a linear process)
• Highlight either required or optional fields.
• Accept entries in all common formats.
• Provide sample entries, pull-downs, and formatting hints to ensure clean data.
• Explicitely state limits to characters, number of entries etc.
  • best to have a Remaining Characters box that counts down to zero whilst people are typing
• If users can't choose it, don't show it.
• Validate entries as soon as possible.
• Eliminate the Reset button and disable the Submit button after it's clicked.
  • In the rare instance that a Clear or Reset button is needed, confirm the action
• Assist form dropouts by saving information.

Layout
(The label-related guidelines below are based on an eyetracking study published in UXmatters by Matteo Penzo)

• Label position
  • Placing a label above an input field works better in most cases, because users aren't forced to look separately at the label and the input field. Be careful to visually separate the label for the next input field from the previous input field.
• Alignment of labels
  • In most cases, when placing labels to the left of input fields, using left-aligned labels imposes a heavy cognitive workload on users. Placing labels above input fields is preferable, but if you choose to place them to the left of input fields, at least make them right aligned.
• Bold labels
  • Reading bold labels is a little bit more difficult for users, so it's preferable to use plain text labels. However, when using bold labels, you might want to style the input fields not to have heavy borders.
• Drop-down list boxes
  • Use them with care, because they're so eye-catching. Either use them for important data or, when using them for less important data, place them well below more important input fields.
• Label placement for drop-down list boxes
  • To ensure users are immediately aware of what you're asking for, instead of using a separate label, make the default value for a drop-down list box the label. This will work for very long lists of items, because a user already has the purpose of the input field in mind before the default value disappears.
• try to avoid background colours and rules if possible (useful only when used to point out related groupings of information; otherwise they only constitute cognitive processing overhead)
• buttons should always be left-aligned with input fields
• primary action button should stand out visually through colour and bold type

HTML Elements

Drop downs or Radio Buttons?

Donna Maurer has listed some useful considerations:

• When users are unfamiliar with the items in a list, radio buttons can assist them by communicating the domain at a glance
• On forms that will be used frequently, radio buttons are far easier and faster because they don't have to be opened and are easier to take in a glance
• When designing for the web screen real estate isn't an issue because of "the magic gadget called a scroll bar."
• Since frequent users become familiar with placement of items on a screen, the spatial placement of radio buttons can help them fill them in quickly
• Experienced users might prefer drop-down list that allow them type the first letter to get to the target item

A note on radio buttons that are associated with list boxes from which the user has to select one or more item(s): we often have this type of combined element in forms (see e.g. 2.1.2 Dynamic Content form). It is a very common oversight to miss the radio button and go straight for selecting an item from the list. We should therefore in these cases always automatically select the associated radio button when the user selects an item in the list.

Links to further Reading

LukeW on form design (mainly visual design)

http://www.lukew.com/resources/articles/web_forms.html

... and here Luke's theories on label placement in forms are subjected to usability testing by Matteo Penzo
http://www.uxmatters.com/MT/archives/000107.php

GUUUI on Designing Intersection Flows

The one below is specifically on designing intersection flows (where users have to choose between alternative ways to proceed) in forms. It is worth reading not only because it confirms again very clearly things that are generally known but often forgotten or neglected:

In forms, people will go directly for entry fields. They will, in most cases, NOT read the instructions. They will often even overlook big fat headers.

Therefore, for intersections the only option is to design the dialogue as clearly as possible and, when in doubt, get rid of all non-mission-critical options.

http://www.guuui.com/issues/02_05.php?PHPSESSID=ff9a5fa6f4f83a6569457713b5f910e7

Forms that work - Caroline Jarrett

Caroline specialises in forms usability and her papers can be found here:
http://www.formsthatwork.com/

10 steps to lovely form layout and AJAX error handling

http://particletree.com/features/10-tips-to-a-better-form/

Sensible Forms - A usability checklist by A List Apart

http://www.alistapart.com/articles/sensibleforms

Form Theory - from the guys of Wufoo

Wufoo is an online tool that helps anyone build and host online forms. 'Form Theory' is a category on the Wufoo blog.
http://wufoo.com/blog/category/form-theory/