Contact   •   Products   •   Search

Rick Strahl's Web Log

Wind, waves, code and everything in between...
ASP.NET • C# • HTML5 • JavaScript • AngularJs

HTML 5 Input Types on WebForms Controls


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.
Make Donation
Posted in ASP.NET  


Feedback for this Post

 
# re: HTML 5 Input Types on WebForms Controls
by Kevin Lawrence December 12, 2011 @ 2:11am
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 :-)
# re: HTML 5 Input Types on WebForms Controls
by Rick Strahl December 12, 2011 @ 1:13pm
@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).
# re: HTML 5 Input Types on WebForms Controls
by Kevin Lawrence December 14, 2011 @ 1:48am
So I wonder if it would accept wildly different input-types, such as button or radio...
# re: HTML 5 Input Types on WebForms Controls
by Rick Strahl December 14, 2011 @ 2:10am
@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.
# re: HTML 5 Input Types on WebForms Controls
by Richard December 15, 2011 @ 11:12am
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
 


West Wind  © Rick Strahl, West Wind Technologies, 2005 - 2014