HTML 5 Input Types on WebForms Controls

December 10, 2011 • from Maui, Hawaii • 5 comments

On this page:

Did you know that you can use HTML5 input types with ASP.NET WebForms controls? I wasn't sure until I tried it today:

<asp:TextBox runat="server" ID="Username" Width="250px"  type="email" />

which properly produces this HTML5 compliant HTML output:

<input type="email" style="width:250px;" id="Username" name="Username">

That this works shouldn't come as a big surprise since ASP.NET always has supported 'extra' attributes on Web Controls to render into the HTML. However, the input type seems like a pretty core feature in input controls and the control does have a TextMode property that already partially addresses this task. Nevertheless, explicitly specifying the type attribute allows you to override the type and so provide custom HTML 5 input types.

In short - nice! HTML5 input types are supported in WebForms without any framework changes or updates.

[updated from comments]
Apparently, in order for this to work you need an update for for the .NET 4 runtimes which was shipped with Visual Studio 2010 SP1. However on live servers you might have to install the Hotfix described in the previous link. I say might, because this code worked on my live server and I didn't explicitly install the hotfix - it appears that some of the .NET 4 updates through Windows Update must have addressed this. To be sure you should test a page that holds controls with HTML5 types to ensure the server will handle this - if not install the hotfix.

The Voices of Reason

Kevin Lawrence
December 12, 2011

# re: HTML 5 Input Types on WebForms Controls

At first I thought this was quite obvious, but given that you are actually overriding the type from 'text' to 'email' is interesting, and certainly not something I've ever tried or expected to work.

I wonder if it's the same for some of the other controls. I wonder if these sort of feature is even in there intentionally!

Nice find either way :-)

Rick Strahl
December 12, 2011

# re: HTML 5 Input Types on WebForms Controls

@Kevin - I think it's fairly standard behavior. You can add any tags that don't exist and ASP.NET will add them to the control rendered. I know some attributes that have matching properties like styles, class also work (and those are actually cumulative where ASP.NET merges style and style attributes set through properties and class).

Kevin Lawrence
December 14, 2011

# re: HTML 5 Input Types on WebForms Controls

So I wonder if it would accept wildly different input-types, such as button or radio...

Rick Strahl
December 14, 2011

# re: HTML 5 Input Types on WebForms Controls

@Kevin - It does. You'll just get a plain textbox in that case.Might screw up styling since it won't be a know input[type=] value but other than that it should still work.

Richard
December 15, 2011

# re: HTML 5 Input Types on WebForms Controls

You'll probably want to install the HTML5 updates for .NET 4 if you're going to use these:
http://blogs.msdn.com/b/scothu/archive/2011/08/10/html-5-updates-for-net-4.aspx

Rick Strahl's Weblog