Lately, I have looking into my google analytics and google webmaster tools account for this site and I have seen that most of the hits VoidWeb is getting for is due to my post “Design HTML5 Form in Zend Framework with Zend_Form“. Since that post was very specific to Zend Framework, I thought let me post about making a simple HTML5 login form. So here we go;
To start with, I hope you guys are already aware of HTML5 and its basics. If not, I would recommend you to to go through it under the following links:
1. HTML5 Unleashed: Tips, Tricks and Techniques by W3Avenue
2. HTML5 Tutorial by W3Schools
3. Dive into HTML5
Now, if you are conversant with HTML5, then lets continue. We are going to use the HTML5 sample markup provided by W3Avenue here and will make a login form from that.
The next line which includes the javascript file is required because the HTML5 elements is not supported properly in IE < 9.
Then we have the closing head tag and then body tag where our html5 login page structure will come. In the body tag, we have defined the header tag, which is the page heading. It generally take the standard header of your site. After that, we have nav tag, wherein we define the navigation menu’s. Then finally, we are having the article tag, where our html5 login form will come. Apart for these, we have aside and footer tag which define the sidebar and footer of the page respectively. You can adjust these items with respect to your site layout.
We will also create it in the same meaningful way. Inside the article tag, we will first define the heading for our form in the article’s header tag.
We will define the form method, action and type attributes. We will create the input elements similar to which we create earlier. The first is username which would be a text field, second is password which is a password field. Last we have submit button and reset button.
You can see a new attribute with username and password field i.e. required. The purpose of this attribute is to make sure that the form will only be submitted when these fields are filled with some values. It is similar to the null or empty checks which we do on either client side using javascript or server side using php.
To start with, I hope you guys are already aware of HTML5 and its basics. If not, I would recommend you to to go through it under the following links:
1. HTML5 Unleashed: Tips, Tricks and Techniques by W3Avenue
2. HTML5 Tutorial by W3Schools
3. Dive into HTML5
Now, if you are conversant with HTML5, then lets continue. We are going to use the HTML5 sample markup provided by W3Avenue here and will make a login form from that.
Step 1: Creating Basic HTML5 Page
First, we will create the basic html page structure.<!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <title>HTML5 Semantic Markup Demo: Cross Browser</title> <link rel="stylesheet" href="html5reset.css" type="text/css" /> <link rel="stylesheet" href="html5semanticmarkup.css" type="text/css" /> <!--[if lt IE 9]> <script src="html5.js"></script> <![endif]--> </head> <body> <header> <hgroup> <h1>Page Header</h1> <h2>Page Sub Heading</h2> </hgroup> </header> <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">Projects</a></li> <li><a href="#">Portfolio</a></li> <li><a href="#">Profile</a></li> <li><a href="#">Contact</a></li> </ul> </nav> <article> <!-- Login Form will go here --> </article> <aside> <header> <h1>Siderbar Heading</h1> </header> <p>Ut sapien enim, porttitor id feugiat non, ultrices non odio. Donec sit amet augue metus, nec sollicitudin est. Donec iaculis porttitor viverra. Sed sed magna ac lectus pharetra iaculis at quis tellus. Nunc quis lorem sit amet nulla viverra mattis. Aenean suscipit libero accumsan sapien fermentum non aliquet lorem rutrum.</p> </aside> <footer> Page Footer </footer> </body> </html>
In the above code, we have first defined the HTML parent tags <!doctype html> which tells the page is HTML5. Then we have head tag, in which we have specified the charset as UTF-8, title tag which says about the title of the page. The next two lines where we have defined the css stylesheets which will actually take care of rendering our html5 form properly in different browsers. The first stylesheet will reset all the html elements and second stylesheet defines the style of the page.
The next line which includes the javascript file is required because the HTML5 elements is not supported properly in IE < 9.
Then we have the closing head tag and then body tag where our html5 login page structure will come. In the body tag, we have defined the header tag, which is the page heading. It generally take the standard header of your site. After that, we have nav tag, wherein we define the navigation menu’s. Then finally, we are having the article tag, where our html5 login form will come. Apart for these, we have aside and footer tag which define the sidebar and footer of the page respectively. You can adjust these items with respect to your site layout.
Step 2: Creating HTML5 Login Form
The actual stuff begins from here. As we all know that, HTML5 is focusing more on creating a semantic meaning from the page. Every page is considered as an article and you can divide your page into different sections and can give proper meaning to each of them.We will also create it in the same meaningful way. Inside the article tag, we will first define the heading for our form in the article’s header tag.
.... <article> <header> <h1>Simple HTML5 Login Form</h1> <time datetime="2010-05-05" pubdate>May 5th, 2010</time> </header>
Next, we will provide a simple message to the user looking to the page as a content of article inside the p tag. We have started the section after the message in which we will create our html5 login form.
We will define the form method, action and type attributes. We will create the input elements similar to which we create earlier. The first is username which would be a text field, second is password which is a password field. Last we have submit button and reset button.
You can see a new attribute with username and password field i.e. required. The purpose of this attribute is to make sure that the form will only be submitted when these fields are filled with some values. It is similar to the null or empty checks which we do on either client side using javascript or server side using php.
<p>Please provide the authentication credentials to continue:</p> <section> <form method="POST" action="#" enctype="application/x-www-form-urlencoded"> <p>Username: <input type="text" name="username" id="username" size="25" required/></p> <p>Password: <input type="password" name="passwd" id="passwd" size="25" required/></p> <p> <input type="submit" name="submit" id="submit" value="Submit"/> <input type="reset" name="reset" id="reset" value="Reset"/> </p> </form> </section> </article> ...
So that is all for creating a simple HTML5 login form. There is nothing new except the new tags or attributes but only the division of pages semantically using HTML5. If you wish to see the demo of the above content, please click below.
Click for HTML5 Login Form Demo
Click for W3C Experimental Validator for HTML5 Login Form
The full source code for the HTML5 login form is provided below.<!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <title>HTML5 Semantic Markup Demo: Cross Browser</title> <link rel="stylesheet" href="html5reset.css" type="text/css" /> <link rel="stylesheet" href="html5semanticmarkup.css" type="text/css" /> <!--[if lt IE 9]> <script src="html5.js"></script> <![endif]--> </head> <body> <header> <hgroup> <h1>Page Header</h1> <h2>Page Sub Heading</h2> </hgroup> </header> <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">Projects</a></li> <li><a href="#">Portfolio</a></li> <li><a href="#">Profile</a></li> <li><a href="#">Contact</a></li> </ul> </nav> <article> <header> <h1>Simple HTML5 Login Form</h1> <time datetime="2010-05-05" pubdate>May 5th, 2010</time> </header> <p>Please provide the authentication credentials to continue:</p> <section> <form method="POST" action="#" enctype="application/x-www-form-urlencoded"> <p>Username: <input type="text" name="username" id="username" size="25" required/></p> <p>Password: <input type="password" name="passwd" id="passwd" size="25" required/></p> <p> <input type="submit" name="submit" id="submit" value="Submit"/> <input type="reset" name="reset" id="reset" value="Reset"/> </p> </form> </section> </article> <aside> <header> <h1>Siderbar Heading</h1> </header> <p>Ut sapien enim, porttitor id feugiat non, ultrices non odio. Donec sit amet augue metus, nec sollicitudin est. Donec iaculis porttitor viverra. Sed sed magna ac lectus pharetra iaculis at quis tellus. Nunc quis lorem sit amet nulla viverra mattis. Aenean suscipit libero accumsan sapien fermentum non aliquet lorem rutrum.</p> </aside> <footer> Page Footer </footer> </body> </html>
Post
