Search
Sponsor
Winners

Win Prizes

Social Presence
Twitter Twitter LinkedIn YouTube Google

Like us on Facebook
Advertisements
Top Articles Author
Mon, 20-Oct-2014 Authors
All Time Authors
Sourav.Kayal
39750
Sheonarayan
38050
Niladri.Biswas
33350

Latest members | More ...


(Statistics delayed by 5 minutes)
Ads
 Article

HTML5 Demo registration form

Ogipansrk
Posted by under HTML 5 category on for Beginner level | Points: 250 | Views : 15569 red flag
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!


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.
Found interesting? Add this to:


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)