![]()
Article posted by
Ogipansrk on 1/12/2012 | Views: 3186 | Category:
HTML 5 | Level: Beginner |
Points: 250 
If you found
plagiarised (copied) or inappropriate content,
please
let us know the original source along with your correct email id (to communicate) for further action.
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!
If you like this article, subscribe to our 
RSS Feed. You can also subscribe via email to our Interview Questions, Codes and Forums section.