HTML5 Demo registration form

Ogipansrk
Posted by in HTML 5 category on for Beginner level | Points: 250 | Views : 22844 red flag

This article gives you a practical implementation on how to use HTML5 to create a simple registration form.

Introduction


HTML5 DEMO
--------------

Objective


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>   


Conclusion


This article gives you basic idea how to use HTML5 in asp.net application.
I have tested this code in opera, not sure whether other browser support these attributes.

Happy Coding!


Page copy protected against web site content infringement by Copyscape

About the Author

Ogipansrk
Full Name: ogipansrk hc
Member Level: Starter
Member Status: Member
Member Since: 12/4/2011 12:45:27 AM
Country: India

http://www.dotnetfunda.com

Login to vote for this post.

Comments or Responses

Posted by: Arefin on: 1/12/2012 | Points: 25
okay good article. But how you will get HTML5 in target combobox. I didn't see HTML5 in target combo. Is it necessary to install VS2010 service pack 1?
Posted by: Ogipansrk on: 1/13/2012 | Points: 25
You need to install VS2010 sp1.
Posted by: Patel28rajendra on: 3/14/2012 | Points: 25
Hi

very helpful article for learning Html 5

Thanks

Rajendra Patel

Login to post response

Comment using Facebook(Author doesn't get notification)