Forms are used for all sorts of things on the web, from simple email contact forms, all the way through to huge loan applications or complex surveys. The art of creating a good form is something that all web developers should learn, and I do think that there is no "perfect" set of rules, but there are several guidelines and interesting pieces of information that can help out.

Checkboxes vs. Radio Buttons.

I beleive that checkboxes are often confusing to some users, and that if you are asking a yes/no question, two radio buttons with text may be more descriptive and immediately explain themselves. It presents itself to users as a "switch", clearly marked on and off. Gmail is a great example of this:

Checkboxes make much more sense when you have several items that need to be marked on or off at the same time:


Select / Dropdown menus.

Often these can be (more) difficult to code into dynamic applications, but from a usability point of view, the less your users have to think the better. If you want the user to select a number between 1 and 10, offer them a select box pre-filled with the numbers 1 through to 10, it will eliminate any mis-entering of data and be immediately clear what they have to do. Once again, an example from Gmail, which shows a select box of page numbers, rather than making the user enter it manually:

Submit buttons and regular buttons.

An interesting article published by rennouned usablitiy expert LukeW shows some interesting heat map tests, that reveil users actually found it easier to use a form if all buttons were in the same style. He also makes a very important point that with forms aligned vertically, aligning the submit button inline with the form fields helped keep in line with peoples "gaze path". Buttons are traditionally bevelled (much like buttons in real life), so if you do feel the need to style your buttons - I think it is important to retain the "button-look". There are arguments that you should always retain the standard system input button style, but I think this rule is not a hard and fast one. I have created my own buttons on this site to make them more "inviting" and added some "movement" in their design to demonstrate their action.


Form Groundwork:

There are a few cool elements that people often forget or simply have never been taught in most form design articles. Wrapping your forms with these elements makes it far more semantic, and you'll really come to appreciate how much easier forms are to work with and position using CSS once in place. You should make used of the elements: fieldset, legend and label to properly mark out your forms.

<fieldset>
  <legend>Form Title</legend>

  <label for="textField">Text:</label>
  <input type="text" id="textField" />
</fieldset>

Aligning Fields.

This is something I notice Gmail doesn't do, but it's been proven that moving the text nearer to the input field (labels aligned right) means less eye movement between text/elements. Interestingly, aligning the text to the top of the form is actually even more efficiant yet again.