Web Form Labels inside vs. outside

[samg914]

I am wondering - what are the pros/cons of a web form with the labels outside vs. inside the field? I think forms look much cleaner and save space on the page when the label name is located within the field, but most sites I see put it on the outside. Is there a reason most sites don't do this?

Thanks,

Sam

[Stevie D]

I am wondering - what are the pros/cons of a web form with the labels outside vs. inside the field? I think forms look much cleaner and save space on the page when the label name is located within the field, but most sites I see put it on the outside. Is there a reason most sites don't do this?

Ease of use is the obvious one, and accessibility is another. If you're relying on Javascript to clear the field name once a user starts typing into a field then that's going to be messy for anyone without JS running and they're going to have to delete the text manually, which is a nuisance and a lot of the time people will forget to do it. So you'll end up with names in your database like "NaJohn Smithme". And even after you've filled a field in, you might want to check what the label was – you can't do that if it disappears as soon as you start typing.

[ralph.m]

Another minor downside could be that once you've clicked into the field, you no longer have a label to remind you what that field is for.

I doubt that many users are impressed by how nice something looks—despite how much web designers and site owners agonize over this. Clarity and usability are far more important. Make it as easy as possible for people to get what they want. I see no reason not to have clear labels on each form input.

[xhtmlcoder]

Labels in normative markup languages only appear outside, e.g. outside of the INPUT of type "text" for logical reasons as was discussed. Any text that may appear within an input box is typically a temporary 'placeholder', which has a different functionally to a label. The placeholder is no substitute and only a 'hint', a fall-back mechanism or reminder.

For example a LABEL might say EMAIL: whereas the placeholder could have something on the lines of: "example @ domain .com" as we can see they have different functionality.

[lutrov]

I agree with what's already been said. From my experience, labels inside textboxes are only something designers actually like the idea of. Real users usually find them irritating, especially when there's more than one field in a form.