0

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.

Community
  • 1
Giulio Muscarello
  • 487
  • 2
  • 10
  • 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? http://ux.stackexchange.com/questions/9220/on-forms-is-inline-placeholder-text-better-than-a-label-outside-each-field – JonW Dec 16 '12 at 16:41

2 Answers2

4

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

Jukka K. Korpela
  • 1,259
  • 7
  • 6
  • 1
    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
2

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.

JohnGB
  • 68,376
  • 26
  • 180
  • 294