Mark Pilgrim published his chapter on the new HTML5 form input types:
Everybody knows about web forms, right? Make a <form>, a few <input type=”text”> elements, maybe an <input type=”password”>, finish it off with an <input type=”submit”> button, and you’re done.
You don’t know the half of it. HTML5 defines over a dozen new input types that you can use in your forms. And when I say “use,” I mean you can use them right now — without any shims, hacks, or workarounds. Now don’t get too excited; I don’t mean to say that all of these exciting new features are actually supported in every browser. Oh goodness no, I don’t mean that at all. In modern browsers, yes, your forms will kick all kinds of ass. But in legacy browsers, your forms will still work, albeit with less ass kicking. Which is to say, all of these features degrade gracefully in every browser. Even IE 6.
We used the basic ones on the AWiderNet redesign. Quick review: I like them (by basic I mean email, url, etc) as they parallel the things I’ve been doing all along. Beyond the possible user agent enhancements, I’m happy to be able to target CSS using attribute selectors instead of meaningless* classes.
I’m really excited for support for the “fancier” new types. There’s a lot of code overhead out there in the wild for things like sliders and date pickers. Having native controls for very common elements is a big deal.
*Meaningless in that User Agents can’t infer anything from class="email"
. Clearly humans editing the code can guess what class="email"
is all about…