{"id":273044,"date":"2018-06-22T12:27:04","date_gmt":"2018-06-22T19:27:04","guid":{"rendered":"http:\/\/css-tricks.com\/?p=273044"},"modified":"2018-06-22T12:27:04","modified_gmt":"2018-06-22T19:27:04","slug":"dont-use-the-placeholder-attribute","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/dont-use-the-placeholder-attribute\/","title":{"rendered":"Don\u2019t Use The Placeholder Attribute"},"content":{"rendered":"

Eric Bailey takes a hardline position on <input placeholder><\/code>. <\/p>\n

You might be thinking, as I did: yeah, yeah I know the pitfalls. I’m capable of using placeholder responsibly.<\/em> But when you look at all the negatives together:<\/p>\n

\n
    \n
  • Can\u2019t be automatically translated;<\/li>\n
  • Is oftentimes used in place of a label, locking out assistive technology;<\/li>\n
  • Can hide important information when content is entered;<\/li>\n
  • Can be too light-colored to be legible;<\/li>\n
  • Has limited styling options;<\/li>\n
  • May look like pre-filled information and be skipped over.<\/li>\n<\/ul>\n<\/blockquote>\n

    …and the fact that there are advantages to just moving whatever helper text you would want in there anyway outside the input to real markup…I’m fairly well convinced.<\/p>\n","protected":false},"excerpt":{"rendered":"

    Eric Bailey takes a hardline position on <input placeholder>. You might be thinking, as I did: yeah, yeah I know the pitfalls. I’m capable of using placeholder responsibly. But when you look at all the negatives together: Can\u2019t be automatically translated; Is oftentimes used in place of a label, locking out assistive technology; Can hide […]<\/p>\n","protected":false},"author":3,"featured_media":273046,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"Don\u2019t Use The Placeholder Attribute","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":[]},"categories":[17],"tags":[1450,966],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/06\/placeholder.jpg?fit=1200%2C600&ssl=1","jetpack-related-posts":[{"id":20755,"url":"https:\/\/css-tricks.com\/hang-on-placeholders\/","url_meta":{"origin":273044,"position":0},"title":"Hang On Placeholders","date":"March 25, 2013","format":false,"excerpt":"The way that placeholder text works on inputs and textareas is either that 1) the placeholder text disappears immediately when the empty input is focused or 2) the placeholder text stays until actual text is entered. Perhaps a middle ground could also make sense.","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":277050,"url":"https:\/\/css-tricks.com\/css-only-floated-labels-with-placeholder-shown-pseudo-class\/","url_meta":{"origin":273044,"position":1},"title":"CSS Only Floated Labels with :placeholder-shown pseudo class","date":"October 4, 2018","format":false,"excerpt":"The floated label technique has been around for a good long while and the general idea is this: we have an text input with the placeholder attribute acting as a label. When a user types into that input, the label moves from inside the input to outside of it. Like\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/09\/floated-labels-with-placeholder-shown-demo.gif?fit=786%2C419&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":262633,"url":"https:\/\/css-tricks.com\/svg-as-a-placeholder\/","url_meta":{"origin":273044,"position":2},"title":"SVG as a Placeholder","date":"November 16, 2017","format":false,"excerpt":"It wasn't long ago when Mikael Ainalem's Pen demonstrated how you might use SVG outlines in HTML then lazyload the image (later turned into a webpack loader by Emil Tholin). It's kind of like a skeleton screen, in that it gives the user a hint of what's coming. Or the\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2017\/11\/loading-svg.png?fit=1200%2C388&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":249080,"url":"https:\/\/css-tricks.com\/alternatives-placeholder-text\/","url_meta":{"origin":273044,"position":3},"title":"Alternatives to Placeholder Text","date":"December 16, 2016","format":false,"excerpt":"Andrew Coyle on when to use : Don't use them as a label Don't use them as a secondary label Don't use them as example input Don't use them as helper text Which amounts to pretty much: \"Don't use them\". Notice there are no examples of good use cases, and\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":298036,"url":"https:\/\/css-tricks.com\/show-search-button-when-search-field-is-non-empty\/","url_meta":{"origin":273044,"position":4},"title":"Show Search Button when Search Field is Non-Empty","date":"November 5, 2019","format":false,"excerpt":"I think the :placeholder-shown selector is tremendously cool. It allows you to select the placeholder of an input () when that placeholder is present. Meaning, the input does not yet have any value. You might think input[value] could do that, or help match on the actual value, but it can't.\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/10\/placeholder-shown-button.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":242123,"url":"https:\/\/css-tricks.com\/form-validation-ux-html-css\/","url_meta":{"origin":273044,"position":5},"title":"Form Validation UX in HTML and CSS","date":"June 13, 2016","format":false,"excerpt":"You can do an impressive amount of form validation with just HTML attributes. You can make the user experience pretty clean and clear with CSS selectors. But it does require some CSS trickery to get everything just right! (You can) make the label look like a placeholder First: always use\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"featured_media_src_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/06\/placeholder.jpg?fit=1024%2C512&ssl=1","_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/273044"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=273044"}],"version-history":[{"count":4,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/273044\/revisions"}],"predecessor-version":[{"id":273049,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/273044\/revisions\/273049"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/273046"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=273044"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=273044"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=273044"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}