File Under: HTML5

A Quick Guide to Using HTML5 Forms

Web forms are everywhere—contact forms, comment forms, sign up forms—these days you’d be hard pressed to find a website without a form. Sadly, HTML wasn’t originally developed with forms in mind and working with forms on the web is more difficult than it should be. Even something as basic as adding a date-picker to a search form requires JavaScript. But HTML5 forms will change that.

In HTML5 forms get a shot in the arm with dozens of new tricks, including, yes, a built-in date-picker. As with much of HTML5, the new form elements are designed to make developers’ lives easier by off-loading tasks like rendering a date-picker to the web browser.

If you haven’t had a look at the new HTML5 form elements, Robert Nyman, a Technical Evangelist for Mozilla, has a very thorough post examining all the new input types, attributes and elements for HTML5 forms. Even better, Nyman has plenty of examples, demos and sample code to show how each element works. As you can see from the screenshot above (taken in Opera) the default datepicker is pretty ugly, but fear not Nyman covers how to style the new elements as well.

Of course, as with all things HTML5-related, the new form tags are not supported in every browser. In fact, when it comes to HTML5 forms, Opera is the only browser that’s anywhere near full support. The developers over at Wufoo have a page devoted to tracking HTML5 form support in browsers, which is well worth checking out before you decide to dive in with both feet.

Like much of HTML5, support for the new form elements is uneven and it might be a bit early to rely solely on HTML5 form tools in production sites, but it’s never too soon to learn the basics.

See Also: