Cross-Browser HTML5 Placeholder Text

Posted by on Mar 29, 2011 in Blog | 16 comments

One of the nice enhancement in HTML5 web form is being able to add placeholder text to input fields. Placeholder attribute allows you to display text in a form input when it is empty and when it is not focused (it clears the field on focus). This is a nifty feature, but it is not [...]

View full post on Web Designer Wall – Design Trends and Tutorials

Vancouver graphic design, Vancouver web design, Vancouver seo, Vancouver internet marketing, Vancouver social media, web design Vancouver

Incoming search terms:

16 Comments

  1. Jake | March 29, 2011

    That’s all very well, but why not just use the jQuery code and not bother with the HTML5? This would mean you don’t have to add modernizr to your page load.

  2. meodai | March 29, 2011

    The JS could be better. In general, avoid to select twice the same DOM elements. Store stuff in variables if nesseserly. And you should use ‘===’ instead of ‘==’ and i wonder why you need a second .blur() after the .blur()…

  3. Michel Kuik | March 29, 2011

    Thanks for the helpfull article.
    I believe it’s quite common to remove the ‘Chrome’ borders of input boxes with outline:none (on the :focus) state. What’s the difference between this method and input[type="search"]::-webkit-search-decoration?

  4. ethan | March 29, 2011

    what about password input?

  5. john | March 29, 2011

    I fail to see how this is better than value.

  6. Nick La | March 29, 2011

    I agree with Doug Neiner here, I think label is still required in web form. Label and placeholder serve two different purposes. Placeholder is not equal to label.

    The entire point of my demo is just to show placeholder (not web standard form). Hence I didn’t even put a submit button in the form.

  7. Joe | March 29, 2011

    You might be interested in “Formalize CSS”
    http://formalize.me/

    It also removes the placeholder text, if you submit the formular, so there is no wrong data submitted.

  8. Doug Neiner | March 29, 2011

    Jonathan, but they serve completely different needs. Even though the HTML5 spec isn’t finalized, the goal of a placeholder is quite different than a label. A label also provides screen-readers with essential information about the field. I am not sure how they do with placeholders. Even though web standards have been widely adopted, mis-using an attribute or element is just as bad as it ever was.

  9. René | March 29, 2011

    Well Jonathan, I think that’s different with every person.
    Personally I really really hate it when my label is gone on focus. Because I tab all my forms, I don’t see what type of input is needed in the next inputfield.
    So I have to make 2 extra tabs, to see what inputfield I have when there is no seperate label.
    But hey, that’s me of course

  10. Jonathan | March 29, 2011

    I think it’s fine to use placeholders as a replacement of labels, it’s cleaner and more condensed. It’s not apart of yesterdays semantic web, but i think tomorrow it should be.

  11. Dave Sparks | March 29, 2011

    That’s a debate I’ve had with a few people, too many treat it like a label where as a placeholder should simply show the format of an input and not be it’s label.

  12. Doug Neiner | March 29, 2011

    Though my comment here doesn’t change the *technical* aspect of the post (providing a fallback for placeholder), I think there is a large problem with the use case of the placeholder.

    There is a difference between the HTML5 placeholder, and what I call an in-field label (What you are actually showing in this post). The placeholder is supposed to show *how* the user should input data. An in-field label serves the same purpose as a real label, only it appears in (or over) the field.

    Here are some examples of the difference:

    Label: Email
    Placeholder: you@yourname.com

    Label: Phone number
    Placeholder: 413-123-4567

    Just because the HTML5 placeholder looks like in-field labels we see around, it doesn’t serve the same purpose. If you plan to use the placeholder attribute, you should probably also provide a label.

  13. John Catterfeld | March 29, 2011

    This is a useful resource for seeing what attributes are supported by the modern browsers when styling the placeholder.

    http://blog.ajcw.com/2011/02/styling-the-html5-placeholder/

    It’s not possible to style the placeholder at all in IE9, Opera 10 (and below) or Firefox 3.6, and the rest also have mixed support.

  14. René | March 29, 2011

    I read your post Dave, but I think it’s fine to use it. Only thing I could think of is if you don’t have a seperate label, an older browser, and no Javascript enabled. You don’t see any hints about the field. But hey, who doesn’t have Javascript these days.
    But I think it’s just great to use this new feature.

  15. René | March 29, 2011

    That’s a great feature. Last week I made something like that, but than for Mootools cause I like it better:

    http://codeviewer.org/view/code:18cf

    But it’s a powerfull css feature

  16. Dave Sparks | March 29, 2011

    I posted something similar a while ago on my own blog
    http://www.kamikazemusic.com/quick-tips/jquery-html5-placeholder-fix/

    There were concerns raised in the comments about the accessibility of injecting text into the val attribute, personally I think used sensibly and as long as the text is injected with JavaScript then it should be fine, maybe some readers here have a different view?