Placeholder looks nicer, sure. But I'd go as far as saying it's objectively wrong to use placeholders as labels. The hint is in the naming of these two elements: placeholder is just, well, a placeholder. It's meant to be a temporary guide until the real input is entered. Example: 'your.name@email.com' for email inputs, 'John Doe' for full names.

Forms very rarely exist to be cool. They're meant to collect data, and that means they have to be clear about what the user is submitting.

Use labels. Save the cool stuff for other things.

Nielsen Norman Group says "Placeholder text within a form field makes it difficult for people to remember what information belongs in a field, and to check for and fix errors. It also poses additional burdens for users with visual and cognitive impairments" http://www.nngroup.com/articles/form-design-placeholders/

I agree the the HTML5 placeholder should not be used as a label, mostly because it's not the purpose in the specifications and some screenreader don't read it. Also the IE is an issue. You can read this http://www.pardot.com/faqs/best-practices/placeholders-and-labels/ From a designer perspective they generate cognitive load : you don't see what you where supposed to put in the field.

That beeing said, they are some nice technics (some where linked here) to avoid both issues. You could "recreate" the placeholder effect in JS (and using a label you move and remove in the field) I tested this one using NVDA it works pretty well http://blog.circleci.com/adaptive-placeholders/ :)

You could use a placeholder, and when input is activated, make it a label. There are several website using that, and it gives a very nice touch to a quit boring form.

I'd personally avoid using placeholders. These are the kind of problems that I've seen when they're used:

• Keyboard users regularly tab to the next field at the point they finish the previous one, so the keyboard focus is in the next field and the placeholder has gone before they view the text they're supposed to enter.

• The same kind of issues apply to those browsing with voice-based browsers, etc.

• Many people review the forms for correctness before hitting submit. Without the labels you cannot easily tell whether you've put the right thing in the right box.

• Writing good error text is harder since you need to duplicate the guidance that would normally be included with the label

• Not to mentioned that I've regularly seen folk mistake placeholder text for fields that have been filled with auto-complete text. There's a tension between making placeholder text easily legible, and making it obvious that it's not "normal" text.

and probably some others that I've forgotten ;-) From my experiences in testing placeholder solutions they seem to cause a lot more harm than good.

Some other references that may help provide some backups:

• Don’t Put Hints Inside Text Boxes in Web Forms
• Placeholders in Form Fields Are Harmful

You can place the label inside the form field as well. So it will always be there and also make the form more compact, but that required a longer input field, but it's nice. And when I say label inside the form, I mean inline with the input, not above it.

Edit: Also, this debate depends on the length of the form. If you only have a couple of fields like 4-5, placeholders won't damage the form in my opinion.

Maybe you don't have to choose. Think about how your users specifically might use this. The following method worked for my team: http://blog.circleci.com/adaptive-placeholders/

So far, we've only received positive feedback from our users. Most don't bother commenting but when they do it's often, "Oh, that's a nice touch". To us that's a win.

It really depends on the use case ; the only way you can know for sure which approach is better is by A/B testing it on the forms you're building.

IMHO inline form labels are okay just not great for the reasons you have already mentioned. There are some neat things you can do however; with onfocus and onblur to create an effect like floating labels using js.

Example of a js form with placeholder text.

What my work has been doing recently. Is use placeholders, but have those shift out of the way of the input field.

http://www.pharmacywebdesign.com/contact/

see example there. We use the place holder until you type something. Then you get a label.

This solution allows you to have placeholder text AND labels ;)

http://bradfrostweb.com/blog/post/float-label-pattern/

@matthew If you are also thinking about UX, check out this article:

http://www.nngroup.com/articles/form-design-placeholders/

I love the look of newer forms, but this data is pretty strong, and very recent.

Love these animated faux-placeholder labels. Great for reminding you what each input is for if you have to come back to a form later on.

Several answers already and I don't see the "accessibility" word !

Don't forget that a placeholder is not a replacement for a label because a screen reader won't read it to the user.

So you can use a label and makes it look like a placeholder.

If the form will ever be edited again, or if it will be edited by multiple people you've really got to use a field label.

A placeholder can be attractive when the form is empty but what happens when the form is filled, there are multiple, similar data types, and it's been two months since the user looked at the form? Or the second user views the form to collaborate on data input? They need field labels; it just good UX.

Here's an example of a method we've been playing around with at thoughtbot:

http://keeprubyweird.com/cfp

It doesn't really solve the IE issue, but it's a nice way to use placeholder and keep it around.