Is it "unsafe" to rely only on placeholders (input fields)?

Question

I've noticed that in many sites, the text within input fields are always either label tags and span tags. Twitter's example:

enter image description here

(in this case, the labels seem to be inside the input field).

I never see input fields without labels and with only the placeholder attribute.

Is it "unsafe" to rely only on placeholders?

Note that out of view of your cropped image, twitter has given a title to the fields which is the same as the placeholder text, so in this case all browsers should also show that as a tooltip at least during, or after edit, and usually before. — Roger Attrill, Feb 12 '13 at 13:33
@RogerAttrill I'm not sure touch devices' browsers will show the tooltip. — DA01, Feb 12 '13 at 16:08
@DA01 Well in this case of twitter, touch devices don't use placeholders. — Roger Attrill, Feb 12 '13 at 16:41
There was a recent useful article on UXMatters.com about this very issue (including how Twitter use inline labels) — JonW, Feb 12 '13 at 16:55
@RogerAttrill I guess I'm getting confused now. the title attribute is what the browser turns into a tooltip. Touch devices can use the placeholder attribute (iOS supports it, for instance). — DA01, Feb 12 '13 at 17:26
@DA01 Sorry for confusion. Trying to be specific: twitter sign up on mobile devices doesn't rely on placeholders and does not use the placeholder in the same way - it puts in an example name (Larry Bird) and shows a standard Label to the left (including my iPad). On non-mobile devices, there is no label, but the title attribute gets used as a tooltip by the browser. I should note that I don't advocate reliance solely on placeholders. I was just making a point that perhaps twitter signup is a bad example for the OP in that it does not itself rely solely on placeholders (on mobile or otherwise) — Roger Attrill, Feb 12 '13 at 18:03
Oh! Gotcha. I think the further confusion can come from the fact that 'placeholder' has been a generic UX term for quite a while now but now we also have a very specific 'placeholder' attribute in HTML. — DA01, Feb 12 '13 at 19:49

score 2 · Answer 1 · answered Feb 12 '13 at 14:42

Totally unsafe, as if a user makes an error, fills in incorrect data, he or she may have problem re-checking the whole form. In this case it is very simple. But even for login forms it is important. For example - in some systems (e.g. Pocket or Wunderlist on my iPhone) I keep filling in my email address as login and then being informed that the credentials are wrong. After a minute of fighting with the password, I start realizing that maybe the login is incorrect. But wait, the email address is ok! Takes me a while and needs deleting the whole email address for the label to reappear, telling me that I should use a login rather than email address.

score 2 · Accepted Answer · answered Feb 12 '13 at 16:08

For accessibility purposes, all form fields need a label to identify them. So that's part of the reason you see label tags used for this. The other reason is that placeholder attributes aren't necessarily widely supported yet (though we're close to it). All that said, a placeholder attribute and a label tag really serve two different purposes and it's important to understand that. A label identifies the field. A placeholder is more along the lines of 'help text'.

Is it "unsafe" to rely only on placeholders (input fields)?

2 Answers2