User Experience Stack Exchange is a question and answer site for user experience researchers and experts. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

Possible Duplicate:
On forms, is inline placeholder text better than a label outside each field?

I am making a simple registration form for my website. I'm in doubt about how to label inputs: should I use text (i.e. Username: next to the input box), the placeholder attribute (like the "search" word inside the search bar), or both?

For a graphical example of what I mean, see this jsFiddle. enter image description here

HTML5 note: I'm assuming the user has a browser with support for HTML5. The fallback content will only use labels.

share|improve this question

marked as duplicate by Benny Skogberg, JonW Dec 16 '12 at 20:26

This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.

Are you asking which solution is most usable, or best to implement? – Jimmy Breck-McKye Dec 16 '12 at 15:40
Does this question cover what you're asking about, or is your question covering something different?… – JonW Dec 16 '12 at 16:41
up vote 2 down vote accepted

The issue is more than accessibility. It is mostly about design choices and clarity for your customers. There are situations where space constraints and very simple forms make a simple placeholder a neater option, but in most situations it is better to have a label (although where the label is is another question).

There are accessibility questions to consider, but there are ways of making each option accessible to screen readers.

For a deeper explanation of this (although a bit old now) read Web Form Design.

share|improve this answer

For accessibility and usability, every text input field should have a textual label, associated with it using label markup. Using p markup is irrelevant to this.

Using placeholder is not necessary, and it is pointless (even disturbing) if it only repeats the label.

There is no browser that supports (all of the) HTML5 (drafts).

share|improve this answer
I agree. Keep in mind that placeholders may be 100% appropriate as the only label on mobile devices. – Henry Dec 16 '12 at 18:28
Placeholder is not pointless. There are situations like search bars where it makes more sense to hide the label, and use the placeholder as the key reference for a user. The label remains in the code to be used by screenreaders but hidden from sight, freeing up space. Facebook does exactly this "Search for people, places and things..." – slawrence10 Dec 16 '12 at 21:06

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