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.
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!
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.
There are two options that are considered best:
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).
E.g.:
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.
