: Form label position for best usability I'm creating a form that will ask a visitor for their firstname, middle initial, and lastname. I want the those text fields to be all inline, but where

@Shanna517

This is a bit of a tangent - but please don't use firstname/lastname/initial. Not everyone's name falls into that neat grouping.

Quoting myself over on StackOverflow:


Many Asian cultures put the family name first, because the family is considered more important than the individual.

Noting that there are a fair number of people who use a name that isn't the one bestowed by their parents, I've used the following scheme with some success:

Full Name (as normally written for addressing mail); Family Name; Known As (the name commonly used in conversation).

E.g.:

Full Name: William Gates III; Family Name: Gates; Known As: Bill

Full Name: Soong Li; Family Name: Soong; Known As: Lisa


See stackoverflow.com/questions/259634/splitting-a-persons-name-into-forename-and-surname/259694#259694 for more.

Vote Up Vote Down

@Dunderdale272

Have a look at this study by UXmatters. It is fairly in depth, includes data on eye-tracking, and concludes that labels on top is overall the best solution.

There is a similar article by Luke Wroblewski, also fairly detailed. Both articles are worth reading!

Vote Up Vote Down

@Pierce454

Answer: None of the above. Use placeholder text inside the field itself. The placeholder attribute is a built-in part of HTML-5.

Otherwise, I'd say put it above the fields, left-aligned.

Vote Up Vote Down

@Bryan171

Normally, for your situation, at the top or to the left is best. Just be sure the label comes before the input field for accessibility.

Still there are many different ways to layout a page and be accessible.

Form labels can really appear just about anywhere you want them as long as it makes since. This recourse is worth a look, patterntap.com/tap/collection/forms

Vote Up Vote Down

@Pope3001725

There are two options that are considered best:


labels to the left of the field, flushed right so they are close to the input.
labels above the field itself


another important thing to note for usability to make sure you are using the for attribute of the label, so that clicking the label focuses on the field it labels.

Vote Up Vote Down

@RJPawlick198

The most important thing is to be consistent with the rest of your site. In general most websites do the labels to the left of the text fields. In this cause it would be a long description so make sure you have room and it flows well.

If to the left doesn't look right or there isn't room to do it, then I would do above. As that is very clear.

The only method I would avoid is putting the labels under the text fields. when the labels are under the fields it is more confusing.

Vote Up Vote Down