ASP.NET 4.5 by default supports HTML5. To see this in action, let’s create a new empty web site with the name “HTML5SupportPartI” using Visual Studio 2012 as shown below –
For this demonstration I am using Windows – 8 and Visual Studio 2012.
![newemptysite newemptysite](http://lh5.ggpht.com/-xnWUS5_GYLE/UMAwwZdDxKI/AAAAAAAAAcA/zdZaXajRQz0/newemptysite2.png?imgmax=800)
Add a new item to our blank web site which is “Web Form”. I am using the default name of the page which is “Default.aspx”. Once you have added the “Default.aspx” page, observe the “DOCTYPE” in our page. It looks like below –
![doctype doctype](http://lh6.ggpht.com/--ZivgjFySTs/UMAwxo7n8RI/AAAAAAAAAcI/yO51yf3NwrY/doctype3.png?imgmax=800)
This “DOCTYPE” represents the new HTML5 DOCTYPE support in ASP.NET 4.5. You can compare the same with ASP.NET 4.0 which supports HTML 4.0 –
![olddoctype olddoctype](http://lh4.ggpht.com/-cwX-tkG7HJA/UMAwysJx18I/AAAAAAAAAcQ/UfURRt-Aj9o/olddoctype3.png?imgmax=800)
However, if you look at the target schema in Visual Studio, it is “DOCTYPE: XHTML5” which you can change to HTML 5 as shown below –
![schematarget schematarget](http://lh3.ggpht.com/-TDNqbklFda0/UMAwz4_3l7I/AAAAAAAAAcU/LLsYF1oCHms/schematarget2.png?imgmax=800)
You can change the “DOCTYPE” to HTML 4 as well. However as soon as you do that, you will loose HTML 5 specific tags intellisense in Visual Studio . The Visual Studio intellisense is smart enough to read the “DOCTYPE” and display the intellisense accordingly.
Now let’s take a look at how we can add a Meta Character Set support in our Page which comes with default character sets. You can make a choice of your own character set as shown below –
![metacharset metacharset](http://lh4.ggpht.com/-iIepHHy9Nc4/UMAw2yE0MMI/AAAAAAAAAcg/UzdJR0zDb1E/metacharset3.png?imgmax=800)
Let’s take a look at few more options which comes by default with Visual Studio and ASP.NET 4.5. Let’s take a look at code snippet for HTML 5.
Let’s go to “body” tag and type some options as shown below –
1. Type audio and press “TAB” key. You will observe code completion for audio as shown below
![audio audio](http://lh6.ggpht.com/-2BS-EKIUFuo/UMAw4J-NfmI/AAAAAAAAAck/YGWuLVwVrw8/audio3.png?imgmax=800)
2. Type video and press “TAB” key which completes the code for video as shown below
![video video](http://lh6.ggpht.com/-58o0ddlhLJk/UMAw5L6daXI/AAAAAAAAAcw/tIwVa4oqxhE/video6.png?imgmax=800)
Likewise, you can test different code snippets introduced in ASP.NET 4.5 for HTML5.
Now let’s test few Form tags of HTML5. For this, we will design a form called “CustomerRegistration.aspx”. After adding a new form, let’s design the form as shown below -
First add a header to our page –
<header>Customer Registration Form</header>
Now let’s divide our registration form in sections. The first section is “Personal Information”. Let’s add the code to get the Personal information –
![perosnalinfo perosnalinfo](http://lh4.ggpht.com/-ElpxMhsJxgo/UMAw6qIdrAI/AAAAAAAAAc4/XMNxWuU27XA/perosnalinfo3.png?imgmax=800)
Add customer’s Company information as shown below –
![companyinfo companyinfo](http://lh4.ggpht.com/-aGcS_qagh98/UMAw8ES3aWI/AAAAAAAAAdA/LKrcXLo1IlI/companyinfo%25255B2%25255D.png?imgmax=800)
There are some new features introduced in HTML Form elements.
1) Autofocus – When we run the form, if you want to add an autofocus on the first field, we can use autofocus attribute in our input type as shown below –
![autofocus autofocus](http://lh3.ggpht.com/-W7MMAgP3nnw/UMAw93LjbgI/AAAAAAAAAdI/9_ecuFh83qo/autofocus4.png?imgmax=800)
2) Required – When you make a field as a required field, you must provide the value to the field or else the form will not get submitted to the server. You can use required field as shown below –
![required required](http://lh3.ggpht.com/-3sy_YLNxrrY/UMAw-wJXZWI/AAAAAAAAAdQ/DBy8TDUFfXk/required3.png?imgmax=800)
3) Placeholder – Placeholders are like watermarks which you can provide by using JavaScript. In HTML5, it is available out of box. You can use it as shown below –
![placeholder placeholder](http://lh3.ggpht.com/-KlBPlVdp4qY/UMAxAtsswjI/AAAAAAAAAdY/7L7Wr3eXjGs/placeholder3.png?imgmax=800)
If you run your page and click on submit button without filling up the form, you will see a similar output –
![finaloutput1 finaloutput1](http://lh6.ggpht.com/-Z7v0FJB8V1g/UMAxB4wy9ZI/AAAAAAAAAdg/XERroAWVogY/finaloutput12.png?imgmax=800)
Our required fields are getting highlighted with red border and a tiny box saying “This is a required field”. You can also see that the first field “First Name” does not have watermark. It is because, it has an autofocus property. Also observe the watermarks on other fields.
In older HTML versions, we have limited Form elements. But in HTML5, we have now 13 new input types which we can use in our web pages as per our requirements –
![image image](http://lh4.ggpht.com/-GTB356GfUrs/UMAxDigN6oI/AAAAAAAAAdo/q4ON2hI8zbc/image3.png?imgmax=800)
Let’s look at the new Video tag which has been introduced in HTML5. Add a web page with the name “discovery.aspx”.
Once you add the page, write the following code in “discovery.aspx” –
![htmlvideo htmlvideo](http://lh3.ggpht.com/-G6ai_T0LlVo/UMAxEizo34I/AAAAAAAAAds/tL8DxOmVO-A/htmlvideo5.png?imgmax=800)
You can set any video path as per your requirement. Let’s run your web page and observe the output. It should look similar to the following –
![videooutput videooutput](http://lh6.ggpht.com/-KKTbIR1LRWw/UMAxGOy9XkI/AAAAAAAAAd4/sDi5ZqYAV9c/videooutput2.png?imgmax=800)
Now let’s take a look at the new “Canvas” tag introduced by HTML5. The “Canvas” tag can be used for
- Drawing shapes (like line, circle, rectangle and many more)
- Adding images
- Drawing paths
- Text
- Color combinations and much more
Add a new page with the name “canvasexamples.aspx” and add the following code in the page –
1) Draw a line –
![drawline drawline](http://lh5.ggpht.com/-grrHeZduOPo/UMAxHhDORLI/AAAAAAAAAeA/w_ZR3DBA018/drawline3.png?imgmax=800)
2) Draw an Arc –
![arcscript arcscript](http://lh6.ggpht.com/-WYJlzQsZajg/UMAxJobH6dI/AAAAAAAAAeI/g7JUz2SLrsc/arcscript4.png?imgmax=800)
Likewise, you can add different types of drawings in your canvas.
Summary –
In this article, we have seen how HTML 5 has been supported by ASP.NET. we have also seen few new tags and features introduced by HTML 5.
Download the source code (GitHub)
Tweet
2 comments:
Awesome, New features of asp.net such are auto focus, required, placeholder, adding images, color combinations & much more and drawing paths. We can implement those features to create .net applications.
Post a Comment