{"id":223,"date":"2017-01-27T00:20:30","date_gmt":"2017-01-27T05:20:30","guid":{"rendered":"http:\/\/bostonianadam.com\/?p=223"},"modified":"2022-04-10T15:19:22","modified_gmt":"2022-04-10T20:19:22","slug":"cool-html5-tips-for-form-inputs","status":"publish","type":"post","link":"https:\/\/bostonianadam.com\/2017\/01\/cool-html5-tips-for-form-inputs\/","title":{"rendered":"Cool HTML5 tips for form inputs"},"content":{"rendered":"\n<p>I wanted to share these cool quick tips that <strong>HTML5<\/strong> provides to basic HTML web forms that will save you time and work in the end. Remember though, these tips only work in web browsers that support HTML5.<\/p>\n\n\n\n<p><strong>Placeholder attribute<\/strong><br>You can now easily have &#8220;placeholder&#8221; text display inside a text field, whereas before you had to use Javascript to add text inside a text field before the user enters their own text.<\/p>\n\n\n\n<p>Code<br><iframe style=\"border: none; width: 100%; height: 100px;\" src=\"\/\/pastebin.com\/embed_iframe\/96KJ0nc3\"><\/iframe><br><strong>Input Type: Date<\/strong><br>You can have a date field where users can select a date from a visual calendar that appears and you don&#8217;t have to code the calendar.<\/p>\n\n\n\n<p>Code<br><iframe style=\"border: none; width: 100%; height: 100px;\" src=\"\/\/pastebin.com\/embed_iframe\/JCYfZ1w3\"><\/iframe><br><strong>Input Type: Time<\/strong><br>You can have a time field where users can select a time.<\/p>\n\n\n\n<p>Code<br><iframe style=\"border: none; width: 100%; height: 100px;\" src=\"\/\/pastebin.com\/embed_iframe\/hkgsWtcM\"><\/iframe><br>To see more HTML input types that are supported with web browsers that support HTML5, check out <a href=\"http:\/\/www.w3schools.com\/html\/html_form_input_types.asp\" target=\"_blank\" rel=\"noopener noreferrer\">w3schools.com<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>I wanted to share these cool quick tips that HTML5 provides to basic HTML web forms that will save you time and work in the end. Remember though, these tips only work in web browsers that support HTML5. Placeholder attributeYou can now easily have &#8220;placeholder&#8221; text display inside a text field, whereas before you had [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[64],"tags":[13,25,26,67],"aioseo_notices":[],"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/bostonianadam.com\/wp-json\/wp\/v2\/posts\/223"}],"collection":[{"href":"https:\/\/bostonianadam.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/bostonianadam.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/bostonianadam.com\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/bostonianadam.com\/wp-json\/wp\/v2\/comments?post=223"}],"version-history":[{"count":1,"href":"https:\/\/bostonianadam.com\/wp-json\/wp\/v2\/posts\/223\/revisions"}],"predecessor-version":[{"id":2403,"href":"https:\/\/bostonianadam.com\/wp-json\/wp\/v2\/posts\/223\/revisions\/2403"}],"wp:attachment":[{"href":"https:\/\/bostonianadam.com\/wp-json\/wp\/v2\/media?parent=223"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/bostonianadam.com\/wp-json\/wp\/v2\/categories?post=223"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/bostonianadam.com\/wp-json\/wp\/v2\/tags?post=223"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}