{"id":83,"date":"2012-05-23T20:46:25","date_gmt":"2012-05-23T18:46:25","guid":{"rendered":"http:\/\/codingexplained.com\/?p=83"},"modified":"2017-06-11T19:30:41","modified_gmt":"2017-06-11T17:30:41","slug":"placeholder-attribute","status":"publish","type":"post","link":"https:\/\/codingexplained.com\/coding\/front-end\/html5\/placeholder-attribute","title":{"rendered":"HTML5 Placeholder Attribute"},"content":{"rendered":"<p>The HTML5 placeholder attribute has quickly gained much popularity across the Internet. While developers used to be rather creative with their JavaScript skills to accomplish a supposedly trivial task, HTML5 has come to the rescue. What used to be rather complex to get to work across all of the major browsers is now part of the markup in the newest specification of HTML.<\/p>\n<p>The HTML5 specification <a href=\"http:\/\/www.w3.org\/TR\/html5\/common-input-element-attributes.html#the-placeholder-attribute\" title=\"HTML5 placeholder attribute specification\" target=\"_blank\">describes the attribute<\/a> as follows:<\/p>\n<blockquote><p><em>&#8220;The placeholder attribute represents a short hint (a word or short phrase) intended to aid the user with data entry. A hint could be a sample value or a brief description of the expected format. [&#8230;] The placeholder attribute should not be used as an alternative to a label.&#8221;<\/em><\/p><\/blockquote>\n<p>Thus, it is clear that the way the attribute is currently being used is for the most part not how it was intended to be used. Rather, a label should still be present to describe <em>what<\/em> information expected, and the placeholder attribute should specify <em>how<\/em>, i.e. the data format. For example, a label could have a value of &#8220;<em>Job type:<\/em>,&#8221; whereas it would be sensible for the placeholder attribute to have a value similar to &#8220;<em>E.g. web developer, designer or consultant.<\/em>&#8220;<\/p>\n<p>Here is an example of how to use the HTML5 placeholder attribute:<\/p>\n<pre><code class=\"html\">&lt;form action=&quot;&quot; method=&quot;post&quot;&gt;\r\n  &lt;input type=&quot;text&quot; name=&quot;txtFirstName&quot; placeholder=&quot;First name&quot; \/&gt;\r\n  &lt;input type=&quot;text&quot; name=&quot;txtLastName&quot; placeholder=&quot;Last name&quot; \/&gt;\r\n  &lt;input type=&quot;submit&quot; name=&quot;btnSubmit&quot; value=&quot;Submit&quot; \/&gt;\r\n&lt;\/form&gt;<\/code><\/pre>\n<p>Now, provided that your browser supports the attribute, you should be able to see the placeholder attribute in action below.<\/p>\n<pre><code class=\"html\">\r\n<form action=\"\" method=\"post\">\r\n<input type=\"text\" class=\"form-control\" name=\"txtFirstName\" placeholder=\"First name\" style=\"margin-bottom: 5px;\" \/>\r\n<input type=\"text\" class=\"form-control\" name=\"txtLastName\" placeholder=\"Last name\" style=\"margin-bottom: 5px;\" \/>\r\n<input type=\"button\" name=\"btnSubmit\" class=\"btn btn-primary\" value=\"Submit\" \/>\r\n<\/form><\/code><\/pre>\n<h3>Browser support<\/h3>\n<p>As convenient as this attribute is, it is unfortunately not without problems &#8211; yet. As of this writing, all of the major browsers support this attribute, except for Microsoft&#8217;s Internet Explorer. Support will be added to Internet Explorer 10, but web developers must find alternative solutions for visitors with earlier versions until these are gradually phased out. Note that using the attribute with unsupported browsers is still perfectly fine; it will simply not be rendered.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>This article discusses how to use the ever so popular HTML5 placeholder attribute both in regards to markup syntax, but also regarding best practices. A brief discussion of the attribute&#8217;s problems also follows.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"jetpack_post_was_ever_published":false,"jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","enabled":false}}},"categories":[31],"tags":[32,36,33],"series":[],"jetpack_publicize_connections":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v20.4 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>HTML5 Placeholder Attribute<\/title>\n<meta name=\"description\" content=\"The HTML5 placeholder attribute has quickly gained much popularity across the Internet. See how to use it and which problems yet remain.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/codingexplained.com\/coding\/front-end\/html5\/placeholder-attribute\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"HTML5 Placeholder Attribute\" \/>\n<meta property=\"og:description\" content=\"The HTML5 placeholder attribute has quickly gained much popularity across the Internet. See how to use it and which problems yet remain.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/codingexplained.com\/coding\/front-end\/html5\/placeholder-attribute\" \/>\n<meta property=\"og:site_name\" content=\"Coding Explained\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/codingexplained\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/codingexplained\" \/>\n<meta property=\"article:published_time\" content=\"2012-05-23T18:46:25+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2017-06-11T17:30:41+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/codingexplained.com\/wp-content\/uploads\/2015\/11\/codingexplained-fb-promote.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"444\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Bo Andersen\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@codingexplained\" \/>\n<meta name=\"twitter:site\" content=\"@codingexplained\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Bo Andersen\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/codingexplained.com\/coding\/front-end\/html5\/placeholder-attribute\",\"url\":\"https:\/\/codingexplained.com\/coding\/front-end\/html5\/placeholder-attribute\",\"name\":\"HTML5 Placeholder Attribute\",\"isPartOf\":{\"@id\":\"https:\/\/codingexplained.com\/#website\"},\"datePublished\":\"2012-05-23T18:46:25+00:00\",\"dateModified\":\"2017-06-11T17:30:41+00:00\",\"author\":{\"@id\":\"https:\/\/codingexplained.com\/#\/schema\/person\/e19c92ec991f571605f047cefeaa950d\"},\"description\":\"The HTML5 placeholder attribute has quickly gained much popularity across the Internet. See how to use it and which problems yet remain.\",\"breadcrumb\":{\"@id\":\"https:\/\/codingexplained.com\/coding\/front-end\/html5\/placeholder-attribute#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/codingexplained.com\/coding\/front-end\/html5\/placeholder-attribute\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/codingexplained.com\/coding\/front-end\/html5\/placeholder-attribute#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/codingexplained.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"HTML5 Placeholder Attribute\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/codingexplained.com\/#website\",\"url\":\"https:\/\/codingexplained.com\/\",\"name\":\"Coding Explained\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/codingexplained.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/codingexplained.com\/#\/schema\/person\/e19c92ec991f571605f047cefeaa950d\",\"name\":\"Bo Andersen\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codingexplained.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/28f5826f9d5d544b0c5e1ec321dfdfb8?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/28f5826f9d5d544b0c5e1ec321dfdfb8?s=96&d=mm&r=g\",\"caption\":\"Bo Andersen\"},\"description\":\"I am a back-end web developer with a passion for open source technologies. I have been a PHP developer for many years, and also have experience with Java and Spring Framework. I currently work full time as a lead developer. Apart from that, I also spend time on making online courses, so be sure to check those out!\",\"sameAs\":[\"https:\/\/codingexplained.com\",\"https:\/\/www.facebook.com\/codingexplained\",\"https:\/\/www.linkedin.com\/in\/ba0708\",\"https:\/\/twitter.com\/codingexplained\",\"https:\/\/www.youtube.com\/c\/codingexplained\"],\"url\":\"https:\/\/codingexplained.com\/author\/andy\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"HTML5 Placeholder Attribute","description":"The HTML5 placeholder attribute has quickly gained much popularity across the Internet. See how to use it and which problems yet remain.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/codingexplained.com\/coding\/front-end\/html5\/placeholder-attribute","og_locale":"en_US","og_type":"article","og_title":"HTML5 Placeholder Attribute","og_description":"The HTML5 placeholder attribute has quickly gained much popularity across the Internet. See how to use it and which problems yet remain.","og_url":"https:\/\/codingexplained.com\/coding\/front-end\/html5\/placeholder-attribute","og_site_name":"Coding Explained","article_publisher":"https:\/\/www.facebook.com\/codingexplained","article_author":"https:\/\/www.facebook.com\/codingexplained","article_published_time":"2012-05-23T18:46:25+00:00","article_modified_time":"2017-06-11T17:30:41+00:00","og_image":[{"width":1200,"height":444,"url":"https:\/\/codingexplained.com\/wp-content\/uploads\/2015\/11\/codingexplained-fb-promote.png","type":"image\/png"}],"author":"Bo Andersen","twitter_card":"summary_large_image","twitter_creator":"@codingexplained","twitter_site":"@codingexplained","twitter_misc":{"Written by":"Bo Andersen","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/codingexplained.com\/coding\/front-end\/html5\/placeholder-attribute","url":"https:\/\/codingexplained.com\/coding\/front-end\/html5\/placeholder-attribute","name":"HTML5 Placeholder Attribute","isPartOf":{"@id":"https:\/\/codingexplained.com\/#website"},"datePublished":"2012-05-23T18:46:25+00:00","dateModified":"2017-06-11T17:30:41+00:00","author":{"@id":"https:\/\/codingexplained.com\/#\/schema\/person\/e19c92ec991f571605f047cefeaa950d"},"description":"The HTML5 placeholder attribute has quickly gained much popularity across the Internet. See how to use it and which problems yet remain.","breadcrumb":{"@id":"https:\/\/codingexplained.com\/coding\/front-end\/html5\/placeholder-attribute#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/codingexplained.com\/coding\/front-end\/html5\/placeholder-attribute"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/codingexplained.com\/coding\/front-end\/html5\/placeholder-attribute#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/codingexplained.com\/"},{"@type":"ListItem","position":2,"name":"HTML5 Placeholder Attribute"}]},{"@type":"WebSite","@id":"https:\/\/codingexplained.com\/#website","url":"https:\/\/codingexplained.com\/","name":"Coding Explained","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/codingexplained.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/codingexplained.com\/#\/schema\/person\/e19c92ec991f571605f047cefeaa950d","name":"Bo Andersen","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codingexplained.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/28f5826f9d5d544b0c5e1ec321dfdfb8?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/28f5826f9d5d544b0c5e1ec321dfdfb8?s=96&d=mm&r=g","caption":"Bo Andersen"},"description":"I am a back-end web developer with a passion for open source technologies. I have been a PHP developer for many years, and also have experience with Java and Spring Framework. I currently work full time as a lead developer. Apart from that, I also spend time on making online courses, so be sure to check those out!","sameAs":["https:\/\/codingexplained.com","https:\/\/www.facebook.com\/codingexplained","https:\/\/www.linkedin.com\/in\/ba0708","https:\/\/twitter.com\/codingexplained","https:\/\/www.youtube.com\/c\/codingexplained"],"url":"https:\/\/codingexplained.com\/author\/andy"}]}},"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p3mJkW-1l","_links":{"self":[{"href":"https:\/\/codingexplained.com\/wp-json\/wp\/v2\/posts\/83"}],"collection":[{"href":"https:\/\/codingexplained.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/codingexplained.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/codingexplained.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/codingexplained.com\/wp-json\/wp\/v2\/comments?post=83"}],"version-history":[{"count":19,"href":"https:\/\/codingexplained.com\/wp-json\/wp\/v2\/posts\/83\/revisions"}],"predecessor-version":[{"id":2924,"href":"https:\/\/codingexplained.com\/wp-json\/wp\/v2\/posts\/83\/revisions\/2924"}],"wp:attachment":[{"href":"https:\/\/codingexplained.com\/wp-json\/wp\/v2\/media?parent=83"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codingexplained.com\/wp-json\/wp\/v2\/categories?post=83"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codingexplained.com\/wp-json\/wp\/v2\/tags?post=83"},{"taxonomy":"series","embeddable":true,"href":"https:\/\/codingexplained.com\/wp-json\/wp\/v2\/series?post=83"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}