Sometimes it feels like the whole web is made of forms. Other than simple links, forms are the most common way to get information from the user. One of the recurring issues I have is deciding what to do with the form labels. That’s the phrase that tells users what you expect to go into an input field.

How do you align your labels?

Yahoo’s Luke Wroblewski (you can call him LukeW) is the preeminent form expert. He has performed usability studies and come up with some good information about form label alignment.

Sadly, Luke won’t tell us which is best, because it depends on the situation. Here’s a summary of the pros and cons.

Once you decide which to use, Sitepoint has a nice tutorial.

What comes after your label?

A colon after a label is fairly common (though strangely absent from LukeW’s examples above). This may be a remnant of command line days. Though common, many are adamantly against the practice.

Christian Watson read up on the studies and reports that it doesn’t matter. So stop bickering, and just do what feels right, brother.

What else about labels?

There’s probably so much more we could talk about labels. Like how you should be using the for attribute, for example. What other issues do you run into when you label your forms?

[Label mockup courtesy of Luke Wroblewski]

See also:

• Tutorial: Add HTML Forms to Your Site
• Give Your Forms Unbreakble Style With Formy
• Free and Easy Web Forms with Form Assembly