Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

When using the placeholder attribute in HTML5 has there been any research into how the content of the placeholder affects the usability of the form?

I'm thinking specifically about using the placeholder attribute to replace the label attribute compared to using the placeholder attribute to replace the label attribute but provide example form content, like so...

<input placeholder="University">

<input placeholder="Harvard, Brown, Yale etc">

I'm also curious as to whether there is any research between using a label and a placeholder in a set-up that provides a descriptive label alongside example form content, compared to either just using a label or just using a placeholder attribute...

<label>University</label>
<input placeholder="Harvard, Brown, Yale etc">

<label>University</label>
<input>

<input placeholder="University">

EDIT: I forgot to define the use case that I'm currently using which is using labels and placeholder attributes but the labels are hidden, so still being accessible by screen readers, just not visible on the screen.

share|improve this question
    
Labels aren't only important for screen reader users. Sighted users using speech recognition software use them too. As far as I know, it's not possible for a user of speech recognition software user to select a field using its placeholder content, unless it coincides with the label content. HTML5 specification says the placeholder attribute should not be used as a replacement for a label. When redisplaying erroneous forms for correction, you need the user-entered data, and the labels. –  Lee Kowalkowski Mar 25 '13 at 10:29

2 Answers 2

The consensus is that it is not ok to use placeholders to replace labels.

http://www.456bereastreet.com/archive/201204/the_html5_placeholder_attribute_is_not_a_substitute_for_the_label_element/

http://www.shiftedbits.net/rambling/why-html-placeholders-dont-replace-html-labels/

http://dev.w3.org/html5/spec/common-input-element-attributes.html#attr-input-placeholder

The main reason is quite simple: As soon as you start typing the label disappears and all feedback is gone. When used in a search field this is generally not a problem. But for larger forms this will be an issue for some users. Also if the server pre fills some of the fields.

Edit: While replacing labels is generally regarded as a bad idea, this solution seems like a good compromis: http://css-plus.com/examples/2011/09/userfriendly-input-placeholder/

share|improve this answer
1  
Additionally the Placeholder being used as a label is not the same as a label when it comes to screen readers. So the label basically doesn't exist for screen readers, where it's treated special –  Ben Brocka Oct 31 '12 at 14:07
    
The labels can exist but be hidden so still available for screen readers. Something I didn't make clear in my initial question. I've amended. –  Dan Christian Oct 31 '12 at 15:56
    
So you want a way to show labels which you already have, but don't want to show? –  Gareth Oct 31 '12 at 16:00
    
I have labels (for screen readers) but they're currently hidden to reduce UI and I've used placeholder text instead. I'm curious as to the best approach though. A lot of the research I've read is pre HTML5 spec etc –  Dan Christian Nov 1 '12 at 9:38

My experience in user testing is that replacing labels with placeholders can often hurt for two reasons:

1) When users are going through form then often enter the form-field and then start thinking about what they have top put it in. But when they have focus on the field the placeholder has gone. So they have to pop in/out of the field to understand what they should be entering.

2) When reviewing the form for mistakes (either before submission, or after an error) they cannot tell what the fields should be since there are no labels - since the placeholders are covered by the actual form input.

For single purpose forms in common locations - maybe (e.g. search boxes, maybe login boxes). But as a generic thing to replace labels - bad idea in my experience.

There's a nice uxmatters piece by Caroline Jarrett (go buy her book on forms - it's very good) Don’t Put Hints Inside Text Boxes in Web Forms that covers much of the same ground.

share|improve this answer
1  
With regards to your first point, that's browser specific no? Webkit/Firefox browsers only clear placeholder on input not focus. Opera, however clears placeholder on focus. A valid point though. –  Dan Christian Oct 31 '12 at 11:38
    
The Caroline Jarrett article is interesting. It doesn't seem to answer the question of whether having a generic label and a generic placeholder (as oppose to hints) is good/bad. Maybe it's a redundant question though as the placeholder is providing no more value then the label. –  Dan Christian Oct 31 '12 at 11:47

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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