The future of online forms with HTML 5

by Adam 1. July 2010 02:32

I am sure that we have all completed an online form at some point in our lives?  I am also sure that some of these forms have been the cause of much frustration and confusion, both for users and developers.  It is easy to see why when you consider that the basic form elements found in the HTML 3.2 specification, which was finalized way back in 1997, are still used in much the same way today, with later specifications producing only minor changes.  More recently, developers have embraced the use of javascript to enhance their forms and keep up with the demands of an evolving online world.  Whilst there is nothing wrong with this approach, it can lead to usability and accessibility problems, and in my opinion, breeds too much inconsistency.

HTML5 is currently being developed as the next major revision of HTML, and it will bring with it over a dozen new input types that can be used in our forms, hopefully making my job easier, and improving the experience of the user.

I have picked out a few elements which I think will have the biggest impact:

Date and Time Picker

HTML5 finally defines a way to include a native date picker control without having to script it yourself. In fact, it defines six: date, month, week, time, date + time, and date + time - timezone.

Email and web address input

This new addition will mainly benefit users of touch-screen devices such as the iPhone.  By specifying that an input box is expecting an email address or web address, the virtual keyboard can be optimized by removing the space bar and replacing it with three more useful keys: a period, a forward slash, and a “.com” button.


The ‘required’ attribute does not need much explanation.  It is simply used to indicate mandatory fields within a form. However, instead of using an entire javascript library to validate your fields, we will just need a single word in HTML 5.


You may have seen examples of this already – when a webpage has a range of numbers to choose from, the user can drag a graphical ‘slider’ instead of entering a number in to a text box.  A very useful solution in some situations, but again, up until now, this is achieved via javascript libraries.  Not for much longer though.  HTML 5 has the answer!

So, when can we expect to see these changes?  Well, if you are a developer, you can use them in your code right now!  Unfortunately, you will not be able to see the results until browser support improves, but as all of these features degrade gracefully in every browser, your forms will still work…even in IE6!