Ask DN: Placeholders or Labels?

over 8 years ago from , Front-end developer and designer

I'm currently designing and developing several future projects that have forms. I see most people using labels, however; I see people using placeholders as "labels", too. I want to know your guys' thoughts on using placeholder and labels; specifically using placeholders as "labels".

This is an example of placeholders being used as "labels". I really like it, and I think it looks nice.

In my personal opinion, placeholders look much nicer, and make the form look less compact; however, labels are more practical for two reasons:

• They are supported, to my knowledge, on all browsers. (Including Internet Explorer). This really sucks. As this article states, placeholders AREN'T supported by Internet Explorer prior to version 10.

• If a user is typing in a field with a placeholder as its "label", and for some horrifying reason forgets what he was supposed to be typing, the placeholder disappears. Labels will be there no matter what. This really isn't that big of a deal, just start over!

Just wanted to know your guys' thoughts on this subject. A lot of people in the development communities (like Stackoverflow) think that placeholders should never be a replacement to a label. Hmm... I just noticed this Designer News form using placeholders!


  • Darth BaneDarth Bane, over 8 years ago

    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.

    14 points
    • Evan DinsmoreEvan Dinsmore, over 8 years ago

      I wouldn't say it's objectively wrong. On mobile particularly, depending on the form, the space considerations and the extra complexity from having labels can sometimes make things even more confusing. And sometimes it's something simple enough (username/password) that it's unnecessary. Not always, but sometimes.

      0 points
      • Darth BaneDarth Bane, over 8 years ago

        Although it's simple for you, it might not be simple for the lowest possible denominator. Is it simple enough for my grandmother to know that the two fields are username/password? What if her old and long-since updated device doesn't support placeholders? Can she see the placeholders well enough, seeing as they're usually in lower contrast than a label?

        Using placeholders as labels is incorrect usage, both from a semantic perspective and from a usability standpoint. I'm not really buying the mobile argument, as mobile users have no problems scrolling.

        0 points
    • Julian LloydJulian Lloyd, over 8 years ago

      "…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…"

      Nailed it.

      When it comes to forms, my utilitarian values take precedence. I personally agree, placeholders are to demonstrate proper format and sample data entry; labels are… labels.

      The primary function of forms is to capture user-entered data… making this experience reliable and clear is paramount. Here are some sample form styles from a recent project’s component library that I really like.

      Form Sample

      Also, form states are important… optional/required, focused, success/error, etc. The more barebones you try to keep your forms, the less elements you have communicating the current state.

      Form Error State

      0 points
  • Alvaro Hernandez-TrapoteAlvaro Hernandez-Trapote, over 8 years ago

    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/

    7 points
    • Nick MNick M, over 8 years ago

      This is pretty much the de facto answer. I like the look of fields without labels, but the bottom line is that users struggle with the usability of them, especially on mobile.

      0 points
  • Stephanie WalterStephanie Walter, over 8 years ago

    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/ :)

    3 points
  • Diederik EenschootenDiederik Eenschooten, over 8 years ago

    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.

    2 points
  • Adrian HowardAdrian Howard, over 8 years ago

    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:

    1 point
  • Cosmin NegoitaCosmin Negoita, over 8 years ago (edited over 8 years ago )

    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.

    1 point
  • Danny KingDanny King, over 8 years ago

    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.

    0 points
  • Nathan NNathan N, over 8 years ago (edited over 8 years ago )

    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.

    0 points
  • Sarah AtkinsonSarah Atkinson, over 8 years ago

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


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

    0 points
  • Chau NguyenChau Nguyen, over 8 years ago

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


    0 points
  • David SimpsonDavid Simpson, over 8 years ago

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


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

    0 points
  • James FryerJames Fryer, over 8 years ago

    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.

    0 points
  • Benjamin Zanatta, over 8 years ago

    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.

    0 points
  • Michael NeffMichael Neff, over 8 years ago

    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.

    0 points
    • Matthew Kosloski, over 8 years ago

      I have one form with two fields. It just submits two pieces of data to the database. Do you think placeholders will be alright?

      0 points
  • Carolann Merchant, over 8 years ago

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


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

    0 points
    • Spencer BombermanSpencer Bomberman, over 8 years ago

      An issue here (per the NN Group's recommendations) is that the placeholders disappear once text is entered into the field.

      0 points
      • Carolann Merchant, over 8 years ago

        I don't disagree. But I wonder if the act of seeing the text translate, rather than it just disappearing and reappearing somewhere else overcomes the worry.

        0 points