New HTML 5 input types in ASP.Net 4.5 Developer Preview

Microsoft has released developer previews for Visual Studio 2011 and .Net framework 4.5. There are lots of new features available in the developer preview. One of the most interested things for web developers is the support introduced for new HTML 5 form controls.

The following are the list of new controls available in HTML 5

• email
• url
• number
• range
• Date pickers (date, month, week, time, datetime, datetime-local)
• search
• color

Describing the functionality for these controls is not in the scope of this article. If you want to know about these controls, refer the below URLs

http://msdn.microsoft.com/en-us/magazine/hh547102.aspx

http://www.w3schools.com/html5/html5_form_input_types.asp

ASP.Net 4.5 introduced more possible values to the Text Mode attribute to cater the above requirements. Let us evaluate these. I have created a project in Visual Studio 2011 developer preview, and created a page named “controls.aspx”. In the page I placed on Text box control from the toolbox

Now select the control and go to the properties pane, look at the TextMode attribute.

Now you can see more options are added here than prior versions of ASP.Net. I just selected Email as TextMode. I added one button to submit my page. The screen shot of the page in Visual Studio 2011 designer is as follows

See the corresponding markup

<form id="form1" runat="server">
    <div>
        Enter your email:
        <asp:TextBox ID="TextBox1" runat="server" TextMode="Email"></asp:TextBox
    </div>
    <asp:Button ID="Button1" runat="server" Text="Submit" />
</form>

Now let me run this page, IE 9 do not have the support for new form fields. I browsed the page using Firefox and the page appears as below.

From the source of the rendered page, I saw the below markup for my email textbox

<input name="TextBox1" type="email" id="TextBox1" />

Try to enter an invalid email and you will see the browser will ask you to enter a valid one by default.

When rendered in non-supported browsers, these fields are behaving just as normal text boxes. So make sure you are using validation controls with these fields.

See the browser support compatability matrix with these controls with various browser vendors.

ASP.Net 4.5 introduced the support for these new form controls. You can build interactive forms using the newly added controls, keeping in mind that you need to validate the data for non-supported browsers.