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

clip_image001[4]

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

clip_image002[4]

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

clip_image003[4]

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.

clip_image004[4]

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.

clip_image005[4]

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.

clip_image006[4]

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.

Published Monday, November 28, 2011 7:44 AM by sreejukg

Comments

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

Monday, November 28, 2011 2:01 AM by Chakravarthy

Hi,

It is good to know that the textbox is now more than just text box. But the surprising fact is that none of these work in IE!!!!????

How come?

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

Monday, November 28, 2011 6:20 PM by intaxity

Because IE doesn't yet support these new input types. Try these using the IE10 Preview.

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

Tuesday, November 29, 2011 1:20 PM by Mike

Thanks for providing such a great information here. <a href="customresearchpaper.net/">custom research papers</a>  there

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

Tuesday, November 29, 2011 4:18 PM by RichardD

The new input types are available for .NET 4.0 if you install the right updates:

blogs.msdn.com/.../html-5-updates-for-net-4.aspx

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

Thursday, December 1, 2011 4:18 AM by Angela

Let's hope for HTML 5, let's stick with beta and let the web browsers make friends

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

Thursday, May 17, 2012 6:52 PM by afnEyNEWyUCxxYPVTOO

FSvKz2 Very informative article post.Really looking forward to read more. Great.