{"id":15077,"date":"2012-10-01T18:01:55","date_gmt":"2012-10-01T10:01:55","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=15077"},"modified":"2025-04-04T01:12:47","modified_gmt":"2025-04-03T17:12:47","slug":"html5-loginpage","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/html5-loginpage\/","title":{"rendered":"HTML5 Tutorial: Login Page with HTML5 Forms"},"content":{"rendered":"<p><a href=\"https:\/\/www.hongkiat.com\/blog\/tag\/series-html5-css3-tuts\/\/\">HTML5<\/a> brings many features and improvements to <strong>web forms<\/strong>, <strong>there are new attributes and input types that were introduced<\/strong> mainly to make the lives of web developers easier and provide better experience to web users.<\/p>\n<p>So, in this post we are going to create a login page using <strong><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.w3.org\/TR\/html5\/forms.html\">HTML5 forms<\/a><\/strong> to see how the new added features work.<\/p>\n<ul class=\"download download-2c\">\n<li><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/hongkiat.github.io\/html5-loginpage\/\">Demo<\/a> <\/li>\n<li><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/github.com\/hongkiat\/html5-loginpage\/\">Download Source<\/a> <\/li>\n<\/ul>\n<h2>HTML5 Input<\/h2>\n<p>Let\u2019s take a look at the following markup.<\/p>\n<pre>&lt;section class=\"loginform cf\"&gt;\r\n  &lt;form name=\"login\" action=\"index_submit\" method=\"get\" accept-charset=\"utf-8\"&gt;\r\n    &lt;ul&gt;\r\n      &lt;li&gt;\r\n        &lt;label for=\"usermail\"&gt;Email&lt;\/label&gt;\r\n        &lt;input type=\"email\" name=\"usermail\" placeholder=\"yourname@email.com\" required&gt;\r\n      &lt;\/li&gt;\r\n      &lt;li&gt;\r\n        &lt;label for=\"password\"&gt;Password&lt;\/label&gt;\r\n        &lt;input type=\"password\" name=\"password\" placeholder=\"password\" required&gt;\r\n      &lt;\/li&gt;\r\n      &lt;li&gt;\r\n        &lt;input type=\"submit\" value=\"Login\"&gt;\r\n      &lt;\/li&gt;\r\n    &lt;\/ul&gt;\r\n  &lt;\/form&gt;\r\n&lt;\/section&gt;\r\n<\/pre>\n<p>If you have been working with HTML forms before, this will look familiar. But, you\u2019ll also notice differences there. The inputs have <code>placeholder<\/code> and <code>required<\/code> attributes, which are new attributes in HTML5.<\/p>\n<h2>Placeholder<\/h2>\n<p>The <code>placeholder<\/code> attribute allows us to give initial text in the input that will disappear when it is in a <code>focus<\/code> state or being filled in. Previously, we used to do it with JavaScript, but now it becomes a lot easier with this new attribute.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/html5-loginpage\/placeholder.jpg\" width=\"500\" height=\"300\"><\/figure>\n<h2>Required Attribute<\/h2>\n<p>The <code>required<\/code> attribute will set the field to be mandatory and thus should not be left blank before the form is submitted, so when the user hasn\u2019t filled in the field, the following error will appear.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/html5-loginpage\/required.jpg\" width=\"500\" height=\"101\"><\/figure>\n<p>New selector is also introduced in <a href=\"https:\/\/www.hongkiat.com\/blog\/tag\/css\/\">CSS3<\/a>, <code>:required<\/code> to target fields with <code>required<\/code> attribute. Here is an example;<\/p>\n<pre>\r\n input:required {\r\n border: 1px solid red;\r\n }\r\n <\/pre>\n<h2>Email Input Type<\/h2>\n<p>The first input type is <code>email<\/code> which is actually <strong>a new field type<\/strong> added in HTML5 as well. The <code>email<\/code> type will give basic email address validation in the field. When the user doesn\u2019t fill the field with an email address, the browser will show the following notification;<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/html5-loginpage\/email-address.jpg\" width=\"500\" height=\"101\"><\/figure>\n<p>Using email input types can also give better experience for mobile users, like iPhone and Android users, where it will show the <em><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.bennadel.com\/blog\/1721-default-to-the-numeric-email-and-url-keyboards-on-the-iphone.htm\">email-optimized on-screen keyboard<\/a><\/em> with a dedicated <strong>\u201c@\u201d<\/strong> button to help type email address faster.<\/p>\n<h2>The Downsides<\/h2>\n<p>The new form features offered in HTML5 are powerful and easy to implement, but they are still lack in some areas. For instance;<\/p>\n<p><strong>The <code>placeholder<\/code> attribute<\/strong>, is only supported in modern browsers \u2013 <strong>Firefox 3.7+, Safari 4+, Chrome 4+ and Opera 11+<\/strong>. So, should you need it to work in unsupported browsers, you can use <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/github.com\/ginader\/HTML5-placeholder-polyfill\">this polyfills<\/a> in conjunction with <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/modernizr.com\">Modernizr<\/a>.<\/p>\n<p><strong>The same thing goes with the <code>required<\/code> attribute<\/strong>. The error notification cannot be personalized, the error will remain <strong>\u201cPlease fill out this field\u201d<\/strong> rather than <strong>\u201cPlease fill out your First Name\u201d<\/strong>, this attribute support is also limited to the latest browsers.<\/p>\n<p>So, using <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.w3schools.com\/js\/js_validation.asp\">JavaScript to validate the required field<\/a> is (so far) a better option.<\/p>\n<pre>function validateForm() {\r\n  var x = document.forms[\"login\"][\"username\"].value;\r\n  if (x == null || x == \"\") {\r\n    alert(\"Please fill out the username\");\r\n    return false;\r\n  }\r\n}\r\n<\/pre>\n<h2>Styling the Forms<\/h2>\n<p>Alright, now let\u2019s decorate our login form with CSS. First we will give the background a <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.toptal.com\/designers\/subtlepatterns\/purty-wood\/\">wood pattern<\/a> in the <code>html<\/code> tag.<\/p>\n<pre>html {\r\n  background: url('wood_pattern.png');\r\n  font-size: 10pt;\r\n}\r\n<\/pre>\n<p>Then, we need to remove the default padding and margin in <code>ul<\/code> tag that wraps the entire <code>inputs<\/code> and floats the <code>li<\/code> to the left, so the inputs will be displayed horizontally, side by side.<\/p>\n<pre>\r\n.loginform ul {\r\n  padding: 0;\r\n  margin: 0;\r\n}\r\n\r\n.loginform li {\r\n  display: inline;\r\n  float: left;\r\n}\r\n<\/pre>\n<p>Since we float the <code>li<\/code>, the parents will collapse, so we need to clear things around the parent with the <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/nicolasgallagher.com\/micro-clearfix-hack\/\">clearfix hack<\/a>.<\/p>\n<pre>label {\r\n  display: block;\r\n  color: #999;\r\n}\r\n\r\n.cf:before,\r\n.cf:after {\r\n  content: \"\";\r\n  display: table;\r\n}\r\n\r\n.cf:after {\r\n  clear: both;\r\n}\r\n\r\n.cf {\r\n  *zoom: 1;\r\n}\r\n\r\n:focus {\r\n  outline: 0;\r\n}\r\n<\/pre>\n<p><a href=\"https:\/\/www.hongkiat.com\/blog\/a-look-into-css3-negation-not-selector\/\">In CSS3 we have the negation selector<\/a>. So, we will use it to target <strong>inputs<\/strong> other than the <code>submit<\/code> type, which in this case <strong>will target the email and password input<\/strong>;<\/p>\n<pre>.loginform input:not([type=submit]) {\r\n  padding: 5px;\r\n  margin-right: 10px;\r\n  border: 1px solid rgba(0, 0, 0, 0.3);\r\n  border-radius: 3px;\r\n  box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, 0.1), 0px 1px 0px 0px rgba(250, 250, 250, 0.5);\r\n}\r\n<\/pre>\n<p>Lastly, we will give a little style decoration for the <strong>Submit<\/strong> button, as follows.<\/p>\n<pre>.loginform input[type=submit] {\r\n  border: 1px solid rgba(0, 0, 0, 0.3);\r\n  background: #64c8ef;\r\n  \/* Old browsers *\/\r\n  background: -moz-linear-gradient(top, #64c8ef 0%, #00a2e2 100%);\r\n  \/* FF3.6+ *\/\r\n  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #64c8ef), color-stop(100%, #00a2e2));\r\n  \/* Chrome,Safari4+ *\/\r\n  background: -webkit-linear-gradient(top, #64c8ef 0%, #00a2e2 100%);\r\n  \/* Chrome10+,Safari5.1+ *\/\r\n  background: -o-linear-gradient(top, #64c8ef 0%, #00a2e2 100%);\r\n  \/* Opera 11.10+ *\/\r\n  background: -ms-linear-gradient(top, #64c8ef 0%, #00a2e2 100%);\r\n  \/* IE10+ *\/\r\n  background: linear-gradient(to bottom, #64c8ef 0%, #00a2e2 100%);\r\n  \/* W3C *\/\r\n  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#64c8ef', endColorstr='#00a2e2', GradientType=0);\r\n  \/* IE6-9 *\/\r\n  color: #fff;\r\n  padding: 5px 15px;\r\n  margin-right: 0;\r\n  margin-top: 15px;\r\n  border-radius: 3px;\r\n  text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.3);\r\n}\r\n<\/pre>\n<p>That\u2019s it, now you can try the login form from the following links.<\/p>\n<ul class=\"download download-2c\">\n<li><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/hongkiat.github.io\/html5-loginpage\/\">Demo<\/a> <\/li>\n<li><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/github.com\/hongkiat\/html5-loginpage\/\">Download Source<\/a> <\/li>\n<\/ul>\n<h2>Final Words<\/h2>\n<p>In this tutorial we looked into a few new features in HTML5 forms:<code>placeholder<\/code>, <code>required<\/code> and <code>email<\/code> input types to create a simple login page. We have also come through the downsides of the attributes, so we can decide a better approach to be applied.<\/p>\n<p>In the next post we will look into another new HTML5 form features, so stay tuned.<\/p>","protected":false},"excerpt":{"rendered":"<p>HTML5 brings many features and improvements to web forms, there are new attributes and input types that were introduced mainly to make the lives of web developers easier and provide better experience to web users. So, in this post we are going to create a login page using HTML5 forms to see how the new&hellip;<\/p>\n","protected":false},"author":113,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[3392,352],"tags":[1312,506,2016],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v22.8 (Yoast SEO v27.6) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>HTML5 Tutorial: Login Page with HTML5 Forms - Hongkiat<\/title>\n<meta name=\"description\" content=\"HTML5 brings many features and improvements to web forms, there are new attributes and input types that were introduced mainly to make the lives of web\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.hongkiat.com\/blog\/html5-loginpage\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"HTML5 Tutorial: Login Page with HTML5 Forms\" \/>\n<meta property=\"og:description\" content=\"HTML5 brings many features and improvements to web forms, there are new attributes and input types that were introduced mainly to make the lives of web\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/html5-loginpage\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2012-10-01T10:01:55+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-04-03T17:12:47+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/html5-loginpage\/placeholder.jpg\" \/>\n<meta name=\"author\" content=\"Thoriq Firdaus\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@tfirdaus\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Thoriq Firdaus\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/html5-loginpage\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/html5-loginpage\\\/\"},\"author\":{\"name\":\"Thoriq Firdaus\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e7948c7a175d211496331e4b6ce55807\"},\"headline\":\"HTML5 Tutorial: Login Page with HTML5 Forms\",\"datePublished\":\"2012-10-01T10:01:55+00:00\",\"dateModified\":\"2025-04-03T17:12:47+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/html5-loginpage\\\/\"},\"wordCount\":604,\"commentCount\":21,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/html5-loginpage\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/html5-loginpage\\\/placeholder.jpg\",\"keywords\":[\"Forms\",\"HTML\",\"HTML5 \\\/ CSS3 Tutorials\"],\"articleSection\":[\"Coding\",\"Web Design\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/html5-loginpage\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/html5-loginpage\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/html5-loginpage\\\/\",\"name\":\"HTML5 Tutorial: Login Page with HTML5 Forms - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/html5-loginpage\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/html5-loginpage\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/html5-loginpage\\\/placeholder.jpg\",\"datePublished\":\"2012-10-01T10:01:55+00:00\",\"dateModified\":\"2025-04-03T17:12:47+00:00\",\"description\":\"HTML5 brings many features and improvements to web forms, there are new attributes and input types that were introduced mainly to make the lives of web\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/html5-loginpage\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/html5-loginpage\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/html5-loginpage\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/html5-loginpage\\\/placeholder.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/html5-loginpage\\\/placeholder.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/html5-loginpage\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"HTML5 Tutorial: Login Page with HTML5 Forms\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e7948c7a175d211496331e4b6ce55807\",\"name\":\"Thoriq Firdaus\",\"description\":\"Thoriq is a writer for Hongkiat.com with a passion for web design and development. He is the author of Responsive Web Design by Examples, where he covered his best approaches in developing responsive websites quickly with a framework.\",\"sameAs\":[\"https:\\\/\\\/thoriq.com\",\"https:\\\/\\\/x.com\\\/tfirdaus\"],\"jobTitle\":\"Web Developer\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/thoriq\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"HTML5 Tutorial: Login Page with HTML5 Forms - Hongkiat","description":"HTML5 brings many features and improvements to web forms, there are new attributes and input types that were introduced mainly to make the lives of web","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:\/\/www.hongkiat.com\/blog\/html5-loginpage\/","og_locale":"en_US","og_type":"article","og_title":"HTML5 Tutorial: Login Page with HTML5 Forms","og_description":"HTML5 brings many features and improvements to web forms, there are new attributes and input types that were introduced mainly to make the lives of web","og_url":"https:\/\/www.hongkiat.com\/blog\/html5-loginpage\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2012-10-01T10:01:55+00:00","article_modified_time":"2025-04-03T17:12:47+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/html5-loginpage\/placeholder.jpg","type":"","width":"","height":""}],"author":"Thoriq Firdaus","twitter_card":"summary_large_image","twitter_creator":"@tfirdaus","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Thoriq Firdaus","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/html5-loginpage\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/html5-loginpage\/"},"author":{"name":"Thoriq Firdaus","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e7948c7a175d211496331e4b6ce55807"},"headline":"HTML5 Tutorial: Login Page with HTML5 Forms","datePublished":"2012-10-01T10:01:55+00:00","dateModified":"2025-04-03T17:12:47+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/html5-loginpage\/"},"wordCount":604,"commentCount":21,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/html5-loginpage\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/html5-loginpage\/placeholder.jpg","keywords":["Forms","HTML","HTML5 \/ CSS3 Tutorials"],"articleSection":["Coding","Web Design"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/html5-loginpage\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/html5-loginpage\/","url":"https:\/\/www.hongkiat.com\/blog\/html5-loginpage\/","name":"HTML5 Tutorial: Login Page with HTML5 Forms - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/html5-loginpage\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/html5-loginpage\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/html5-loginpage\/placeholder.jpg","datePublished":"2012-10-01T10:01:55+00:00","dateModified":"2025-04-03T17:12:47+00:00","description":"HTML5 brings many features and improvements to web forms, there are new attributes and input types that were introduced mainly to make the lives of web","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/html5-loginpage\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/html5-loginpage\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/html5-loginpage\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/html5-loginpage\/placeholder.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/html5-loginpage\/placeholder.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/html5-loginpage\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"HTML5 Tutorial: Login Page with HTML5 Forms"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e7948c7a175d211496331e4b6ce55807","name":"Thoriq Firdaus","description":"Thoriq is a writer for Hongkiat.com with a passion for web design and development. He is the author of Responsive Web Design by Examples, where he covered his best approaches in developing responsive websites quickly with a framework.","sameAs":["https:\/\/thoriq.com","https:\/\/x.com\/tfirdaus"],"jobTitle":"Web Developer","url":"https:\/\/www.hongkiat.com\/blog\/author\/thoriq\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-3Vb","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/15077","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/113"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=15077"}],"version-history":[{"count":5,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/15077\/revisions"}],"predecessor-version":[{"id":73545,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/15077\/revisions\/73545"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=15077"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=15077"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=15077"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=15077"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}