HTML5 Input Types support in ASP.NET WebForm

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.

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:

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:

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:

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

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:

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.