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!