I just finished ‘HTML5 for Web Designers’ – the first book in the A Book Apart series. While I have read a few articles on HTML5 I was surprised by some of the new features in Web Forms 2.0. I’m going to try and test out some of these new features in this post.
Keep in mind that this is HTML5, so if you can’t see some of the features it might be because your browser doesn’t support it.
Unfortunately it doesn’t seem to be high on the list for browser implementation – it’s supposed to be supported by Firefox and Opera, but it only seems to work in Opera.
The search input behaves exactly like a normal text input except that the browser can choose to display the search field to be more consistent with search fields in the operating system. For example, in Safari a search input looks similar to search boxes in OSX.
The email, url and tel types all behave exactly like normal text inputs and even look exactly the same on a regular browser. The difference comes in with mobile browsers – for example, Mobile Safari will display a slightly different keyboard for the different types to make it easier for the user to enter these types of data.
Date and Times
What I’m particularly happy with is that the specification makes provision for not only choose dates, but month and time as well. It’s usually quite an effort to allow the user to enter only a time or a month in a consistent fashion.
I tried the date input in both Chrome and Firefox but it doesn’t seem to be supported. According to a post on StackOverflow the current Chrome support is broken – the browser pretends to support it, but it doesn’t actually render a calendar. The only browser which did actually render a calendar for me is Opera.
Can we style it?
I’m still relatively pleased with what I have seen so far – I definitely think HTML5 is heading in the right direction. There are also some features which I didn’t mention (the required attribute and color picker input comes to mind) – mostly because these features still seem a bit experimental.