HTML5 Forms with ASP.NET MVC and MvcContrib.FluentHtml

Earlier this week, I wrapped up the third installment of my “Building Apps for HTML5” Series for MSDN Magazine (check out part 1 and part 2, if you haven’t already), and there was an out of scope item that I didn’t have the space to cover, but thought would be a good blog post.

The article was about HTML5 Web Forms, essentially the new input types (email, tel, number, date, etc.), new attributes (autofocus, placeholder, etc.) and new form validation goodies (required, pattern, formnovalidate, etc.). It was a fun article to write, and it’s slated to drop in early November.

One of the questions that often comes up from .NET developers when I talk about HTML5 Web Forms is how these features integrate with ASP.NET Web Forms or MVC. In the article, I speak briefly about updates like VS 2010 SP1 and the mouthfully-named “Reliability Update 1 for .NET Framework 4,” and Scott Hunter has a nice, succinct blog post that covers both, and which you can check out here.

What I wasn’t able to cover in the article, though, was some specifics around using these new input types and attributes with ASP.NET MVC, specifically how one would use these with Strongly-typed HTML helpers in MVC. That’s the purpose of this post.

But first, since the article isn’t out yet as I’m writing this, a quick primer on HTML5 Web Forms for those not familiar.

What’s HTML5 Web Forms?

HTML5 Web Forms (one of the earliest pieces of what we now call “HTML5”) lives in the official W3C HTML5 Specification, which you can read yourself at http://www.w3.org/TR/html5/forms.html. A significant portion of the specification is dedicated to new types and content attributes for the input element, which can be found here: http://www.w3.org/TR/html5/the-input-element.html. For a more digestible resource on HTML5 Forms, I recommend the excellent Forms chapter (“A Form of Madness”) from Mark Pilgrim’s HTML5: Up and Running.

The specification introduces 13 new input types (<input type=”?” />) for use in our forms. Here’s the list:

  • search
  • email
  • tel
  • url
  • datetime
  • date
  • month
     

  • week
  • time
  • datetime-local
  • number
  • range
  • color
     

Each of these new types comes with some interesting behaviors and features. Each also has varying levels of support in the major browsers, but since I cover that in depth in my article (and others have online), I’m not going to rehash it here. For the purposes of this post, let’s assume that I’ve decided to use these new features, am using feature detection (either rolling my own or via Modernizr) and have chosen a polyfilling library or two to fill the gaps in functionality back to older browsers. Of course, I probably should point out that there’s no reason NOT to use any of these new types today. If an older browser encounters a type it doesn’t recognize, it will just change the type attribute to “text,” which is what you’re already using. But newer browsers get all of the built-in validation and presentation provided by the browser.

Using HTML5 Web Forms

All you need to do to get started with HTML5 Forms is use any of the new input types or attributes on a form. Let’s take a look at the markup (snipped a bit) for a sample form (coincidentally, the same form from my article)

Note: If you cannot view the embedded Gist above for any reason, click here to view the embedded code.

Here’s the resulting form:

Page 1 of 4 | Next page