Does the content of the HTML5 placeholder attribute affect usability?

Question

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.

Answer 1

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/

Answer 2

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.

Answer 3

No, using placeholder STYLING as labels does not affect usability as long as you apply the proper workarounds to address the fact that the label disappears when you focus on the field.

My favorite method is using float labels. They occupy a portion of the input when you focus on it or have a filled value so you still have a reference for what the label was.

There are different methods for adding float labels, actually one of them uses the actual "label" element and just makes it LOOK like a placeholder. Here is the link to that tutorial: https://css-tricks.com/float-labels-css/

Answer 4

TomDoes explained it well, you should NOT replace label tag with a placeholder attribute. However a small detail was missed that a label tag also serves an alternate purpose.

The label tag allows you to click on the label, and it will be treated like clicking on the associated input element (this is especcially useful for radio buttons and checkboxes). Such click action can be achieved by:

Placing the input into the label

<label>My label:
    <input name="myFieldName" id="myField" type="text"/>
</label>

Using 'for' attribute

<label for="myField">My label:</label
<input name="myFieldName" id="myField" type="text"/>

See example on HTML <label> for Attribute