HTML5 Demo registration form

CREATING SIMPLE REGISTRATION FORM WITH HTML5.

This article gives you a practical implementation , on how to use HTML5. 

I have used VISUAL STUDIO 2010.You can use any other text editor software.

Step1: To enable HTML5 FOR VISUAL STUDIO 2010:

 GoTo Tools >>Options>>TextEditor>>Html>>Validation>>from target select HTML5.

Aim To Create an Employee Registration Form:

--------------------------------------------

For creating Registration Form , I Have used only the below types:

a) Label : Used for Displaying Text.

   For this I have added an attribute called "FOR".

   The "FOR" indicateds to which this lable is bound to.

b) Input : HTML5 supports different attributes suchas, Date,Autofocus,Required etc.

   We will discuss them as we go through this article.

Lets us discuss about the attributes which we use in this demo.

AutoFocus: If you are a Asp.net developer , you have faced situation ,when

    page loads , should focus on the textbox. For this we write code.

     But in HTML5 , we just include an attribute like below:

 

 Example: <input type="text" autofocus="true"/>

PlaceHolder:  It places a watermark in textbox.

         Supppose you want hint enduser how the information should be entered.Then this attribute should be      used.

    Example: <input type="text" PlaceHolder="Enter FirstName"/>

Date :  If you want to use datecontroller,then simple include this attribute.

       

Example: <input type="date" id="txtDate" />

Required Field : You want some fields as mandatory fields, for this purpose, include "Required" attribute.

Validation: HTML5 supports validation when we include "Required" attribute.

  Example:   <input type="email" id="txtEmail" required  />

        When user  enter email , before submitting it will check wehther it is Entered in Proper Format.

Using the code

<table>

        <tr>

            <td><label for="txtFirstName">First Name:</label></td>

            <td> <input type="text" id="txtFirstName" placeholder="First Name"   required/></td>

        </tr>

       <tr>

            <td> <label for="txtLastName">Last Name:</label></td>

            <td><input type="text" id="txtLastName" placeholder="Last Name" /></td>

        </tr>




          <tr>

            <td><label for="txtAge">Age:</label></td>

            <td><input type="number" id="txtAge" /></td>

        </tr>




          <tr>

            <td><label for="txtEmail" >Email:</label></td>

            <td> <input type="email" id="txtEmail" placeholder="opispark@microsoft.com" required  /></td>

        </tr>

          <tr>

            <td><label for="txtDate">Date:</label></td>

            <td><input type="date" id="txtDate" /></td>

        </tr>

          <tr>

            <td></td>

            <td><input id="Submit1" type="submit" value="submit" runat="server"  /></td>

        </tr>

        

    </table>   

I have tested this code in opera, not sure whether other browser support these attributes