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.

2

2 Answers 2

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.

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

2
  • 1
    I agree. Keep in mind that placeholders may be 100% appropriate as the only label on mobile devices.
    – Henry
    Dec 16, 2012 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..." Dec 16, 2012 at 21:06

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