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.

This question already has an answer here:

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

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?

share|improve this question

marked as duplicate by kontur, Benny Skogberg, Matt Obee, dhmholley, Marjan Venema Feb 12 '13 at 18:24

This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.

    
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

2 Answers 2

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.

share|improve this answer

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

share|improve this answer

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