Click here to Skip to main content
14,538,578 members

HTML5 for & C# Developers

Rate this:
4.68 (18 votes)
Please Sign up or sign in to vote.
4.68 (18 votes)
11 Feb 2013CPOL
HTML5 Quick Tips for Developers


I learned some interesting things in HTML5 which an and c# developer should know and use those things in real time development , which saves time and provide efficient speed as well . for developer , HTML5 minimized the use of validations and ajax . even though HTML5 validations may be unreliable because of its browser compatibility , but still there are several jQuery plugins which provide partial support for the HTML5 validation attributes including : 

jQuery Validation —
html5Form —
h5Validate —


lets me describe here how developers can utilize HTML 5 in their projects :- 

HTML5 Form Validation -  

1. Require field validation : 


In we use require field validator to validate textbox , dropdown . Html5 attribute "required" allow us to provide the same validation. 

 Example - 
<span style="font-size: 14px;"><asp:textbox id="txtbx" runat="server" required="required" title="use me as validation message"/>   or <input type="text" required  />   </span>

we can write required="required" or required , both will work on compatible no need to write an extra line or we can say no need to use server side control require field validator , but still server side control ensure us for proper validation.  

2. Regular Expression validation  :  

In we use regular expression to validate a string .HTML5 provided us an attribute named "pattern" . 




Example - <asp:textbox id="txtbx" runat="server" pattern="^\d*$" title="only numbers"/> or                     <input type="text"pattern="^\d*$" title="only numbers"/>

\d is the regular expression for a number, * means that it accepts more than one of them. 

To validate E-mail we can directly use input type email( no regular expression    required :               <input type="email" name="usermail"> 

Image 1 

3. Range validator :  

Instead of using textbox and range validator for numeric range , we can use HTML5 input of type number with min and max attribute . 

<input max="5" min="1" name="quantity" type="number" />

above input type take will take maximum 5 as number. 

4. Custom validator :   


In we used to create our own custom validator , here HTML5 brings a constraint validation API to perform custom validation. You can perform any custom validation that you need only requirement is that you have to write a JavaScript function. 


    <form id="form1" runat="server">
        <input id="respect" type="text" required />
        <asp:Button ID="btnsave" runat="server" Text="validate" />
    <script type="text/javascript">
        var respect = document.getElementById("respect");
           respect.addEventListener("input", function () {
            var value = (respect.value);
            if (value === "girls") 
                // input is fine -- pass the error message
                respect.setCustomValidity("Respect girls");    


 In above example i have taken input type text ,and my custom validation will only accept string "girls" if string will be equal to "girls" then validation pass otherwise it will show validation message "respect girls". 

 HTML5 other attributes and input Type  - 

 i learned some attributes and type in HTML5, which are better replacement of ajax's some control.  

1. Watermark :  

In we used to apply watermark using ajax , now its very easy by just putting "placeholder" attribute in textbox control .  

Example - <asp:textbox id="txtbx" placeholder="Watermark text !" runat="server"></asp:textbox>


2. Calender :  

instead of using ajax calender we can use input type date .  

<input type="date" name="anything"><span style="font-size: 14px;"> </span> 

3. Progress bar :  

 HTML5 brings a new element i.e Progress . we can dynamically change the value to show the continuous progress. 

<progress value="76" max="100"></progress>  

HTML5 brings a new element i.e Progress . we can dynamically change the value to show the continuous progress. 

4. AutoComplete :  

one of new element in HTML5 is datalist .we can assign values in datalist and then can bind that datalist to a particular textbox for the autocomplete options . below is the example :- 

 <datalist id="ddlCities">
    <option value="Ghaziabad" />
    <option value="Delhi" />
    <option value="Lucknow" />
    <option value="Kanpur" />

 now to assign this to a particular textbox , you will have to use the list attribute for an input type textbox .we can create the list using javascript , and to make use of this an developer can use webservice and javascript to make autocomplete wit this element . 

<input type="text" id="textbox" list="ddlCities"/> or
<asp:TextBox ID="txt" runat="server" list="ddlCities"></asp:TextBox> 

 and result will be the - 

 Image 2


 As we saw , HTML5 brings new elements to help developer and these really helps when you are working with mvc . 






This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Sarvesh Kushwaha
Software Developer
India India
I do believe life is to help others ... So here i am .. in my spare time i learn new things of programming and try to help people with my knowledge .
I'm an energetic, self-motivated and hard-working Developer and Information Technology Professional with experience in projects, website design and development.

Visit My Technical Blog

Comments and Discussions

GeneralMy Vote is 5 Pin
Gil Shabthai15-Jun-15 15:37
MemberGil Shabthai15-Jun-15 15:37 
GeneralRe: My Vote is 5 Pin
Sarvesh Kushwaha27-Jun-15 23:03
MemberSarvesh Kushwaha27-Jun-15 23:03 
GeneralMy vote of 5 Pin
Antonio Ripa5-Jan-14 23:54
professionalAntonio Ripa5-Jan-14 23:54 
GeneralRe: My vote of 5 Pin
Sarvesh Kushwaha6-Jan-14 14:14
MemberSarvesh Kushwaha6-Jan-14 14:14 
QuestionThank You Pin
Rcht Jain29-Aug-13 19:53
MemberRcht Jain29-Aug-13 19:53 
GeneralRe: Thank You Pin
Sarvesh Kushwaha29-Aug-13 23:28
MemberSarvesh Kushwaha29-Aug-13 23:28 
QuestionMy vote Pin
isoint11-May-13 4:40
Memberisoint11-May-13 4:40 
AnswerRe: My vote Pin
Sarvesh Kushwaha14-May-13 18:30
MemberSarvesh Kushwaha14-May-13 18:30 
GeneralMy vote of 4 Pin
samiran bhuin7-May-13 1:38
Membersamiran bhuin7-May-13 1:38 
QuestionThanks.... Pin
Hidayat Meman20-Feb-13 0:26
MemberHidayat Meman20-Feb-13 0:26 
AnswerRe: Thanks.... Pin
Sarvesh Kushwaha20-Feb-13 7:44
MemberSarvesh Kushwaha20-Feb-13 7:44 
GeneralRe: Thanks.... Pin
Hidayat Meman20-Feb-13 17:27
MemberHidayat Meman20-Feb-13 17:27 
GeneralMy vote of 5 Pin
Hidayat Meman20-Feb-13 0:24
MemberHidayat Meman20-Feb-13 0:24 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Posted 11 Feb 2013

Tagged as


37 bookmarked