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 should I place the labels? On the left, top, or under the fields.

I'm looking for the best approach from a usability standpoint.

  • 1
    Is this not more appropriate for uxexchange.com? (uxexchange.com)
    – Bobby Jack
    Commented Aug 3, 2010 at 11:06
  • Wow, I didn't know uxechange.com existed, thanks. Judging from the number of up votes on this question, it's definitely on the minds of Pro Webmasters. Commented Aug 3, 2010 at 12:13
  • Yes - it's a bit of an 'issue'. I believe uxexchange was set up using the 'old SO' model. Sites using the new model, such as webmasters, seem to be getting a lot more attention. So something that's more relevant to uxexchange ends up being more successful on webmasters. I'm not sure what the solution is - migrate uxexchange?
    – Bobby Jack
    Commented Aug 3, 2010 at 12:53

6 Answers 6


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!

  • +1 I was going to post those exact same resources. Really, any answer to this question should include studies. Commented Aug 2, 2010 at 18:21
  • This is what I was looking for, some comparisons of left versus top. I'm sure a lot of it is subjective, but non-the-less, there should be some layouts that are slightly better all things being equal. Thanks. Commented Aug 2, 2010 at 19:16
  • What's also interesting about the UXmatters article was they found bold labels were distracting to the visitors and ... "Bold labels were more difficult for users to read and perceive—probably because there was more visual confusion between the bold text and the heavy adjacent borders of the input fields." Good to know. Commented Aug 3, 2010 at 12:08
  • not to be a negative nelly, but uxmatters.com doesn't have a "top articles" section or even use google webmaster tools so i can find their most read articles, which isn't very user experiency! Commented Jan 19, 2011 at 19:16

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.

  • 3
    In any case, don't forget the for attribute. Commented Aug 2, 2010 at 19:10

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.


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, http://patterntap.com/tap/collection/forms


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.


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).


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

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

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

  • I see the value in your recommendation, but the key question will be "who is your target audience?" If 99% of my audience will be Americans then I would go with Firstname/MI/Lastname. I think many Americans would not immediately understand what a family name would be. Like @RandomBen said, you need to be consistent and most US sites use Firstname / MI / Lastname. Commented Aug 3, 2010 at 12:18

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.