HTML5 and CSS 3 in ASP.NET 4.5 – Part 1

Tweet

In the first part of ‘HTML5 and CSS 3 in ASP.NET 4.5’ article, we will see how HTML5 is supported in ASP.NET 4.5. We will also explore some new features of HTML5 with ASP.NET 4.5.
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.



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 –

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  –



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 –



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 –



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



2. Type video and press “TAB” key which completes the code for video as shown below



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 –



Add customer’s Company information as shown below –



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 –



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 –



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 –



If you run your page and click on submit button without filling up the form, you will see a similar output –



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 –



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” –



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 –



Now let’s take a look at the new “Canvas” tag introduced by HTML5. The “Canvas” tag can be used for

1. Drawing shapes (like line, circle, rectangle and many more)
2. Adding images
3. Drawing paths
4. Text
5. Color combinations and much more

Canvas is a rectangular area which is used for drawing purpose. Let’s start creating some drawings on canvas –

Add a new page with the name “canvasexamples.aspx” and add the following code in the page –

1) Draw a line –



2) Draw an Arc –



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