Background:

HTML5 is the talk of the town. Everyone is talking about HTML5 everywhere. One of the cool features of HTML5 is the introduction of new input types for forms. These new input types allow better input control and validation.

ASP.NET 4.5 which was released in Aug 2012 did have enhancements with respect to the input types support. The input types i.e. TextBox in ASP.NET WebForms now support all of the new HTML5 input types. We will take a look at the input types from WebForms perspective in this blog post.

image

HTML5 Input Types:

HTML5 has introduced several new input types for forms. These types improve the form input and provide better input control and validation.  Following table depicts input types, their description and browser support:

Input Type Description Supported Browser
color fields that should contain a color Chrome, Opera
date fields that should contain date Chrome, Safari, Opera
datettime fields that should contain date time (with time zone) Safari, Opera
datetime-local fields that should contain date time (with time zone) Safari, Opera
email fields that should contain email address FF, Chrome, Opera
month fields that should contain month and year Chrome, Safari, Opera
number fields that should contain number Chrome, Safari, Opera
range fields that should contain value from a range of numbers Chrome, Safari, Opera
search used for search fields (a search field behaves like a regular text field) Chrome, Safari
tel fields that should telephone number NONE
time fields that should contain time Chrome, Safari, Opera
url fields that should contain URL address FF, Chrome, Opera
week fields that should contain week and year Chrome, Safari, Opera

Creating ASP.NET WebForm Project:

Fire up a Visual Studio 2012 and create a new ASP.NET WebForm project. Select File > New Project and in the New Project dialog select “ASP.NET Web Forms Application” template. Below is a screenshot of the new project dialog:

image

Give it a name and click Ok. Visual Studio will go ahead and create the project.

Add TextBox to a WebForm:

Open the Default.aspx that gets generated by default. Remove all the content from the content place holder named “BodyContent”. Just add a TextBox – either drag and drop from the toolbox or type it out. If you are in the designer mode, select the TextBox or if you are in source code mode place the cursor in the TextBox tag. Next press F4 to open the properties window. In the Properties window, select TextMode and click on the value field. It will now show up a drop down list with all the supported text modes. Till now, TextMode supported 3 values namely – SingleLine, MultiLine and Password. With ASP.NET 4.5 this property now supports all the newly defined HTML5 input types. Here is a screen shot of the same:

image

Examining the output:

As we all know, a TextBox gets rendered as a HTML <input> type when the pages gets to the client. For the sake of testing, I had set the TextoBox TextMode to “color”. Here is the TextBox control definition:

<asp:TextBox ID=”txtName” runat=”server” TextMode=”Color” Width=”300px”></asp:TextBox>

Here is the generayed HTML for the above TextBox:

<input name=”ctl00$MainContent$txtName” type=”color” id=”MainContent_txtName” style=”width:300px;” />

Here is a screenshot of how this looks in different browsers:

Chrome Output Opera Output
image image

As you can see different browsers have implemented in different way but what matters is the value that the field will contain. I clicked on the submit button and put a break point in the button click event handler. When I looked at the text box value, it contained the hex code of the color that we select as part of the color picker. Here is a screen shot which depicts the scenario:

image

So play around with other input types also and see how browser implement them. Not far are the days when all browser will support these input types and user experience for input and validation can be standardized.

Summary:

HTML5 is becoming so mainstream that ASP.NET WebForm is also trying to catch up in the race. I see that it’s a good move to support the html5 input types. People who are developing in WebForms technology can move their application towards HTML5 compliance slowly and be ready for the the full embrace when it happens.

  • Pingback: HTML5 Placeholder support for ASP.NET WebForm TextBox | .NET Rumbles()

  • Alagu Sundar

    Great article. Useful informations. Thanks for Posting.
    http://www.cavinitsolutions.com/

  • Eric T.

    Anyone know how to hide the submit button onclick when you are using both the HTML5 “required” field and ASP.NET’s validation for .NET 4.5? When I try some conventional methods, the button prematurely disappears because the HTML5 “required” process built into the browser will fire before the .NET validation.