Changing the way you fill in forms on the web
Forms are ubiquitous on the web, and over the years web designers have been ingenious in making life easier, creating colour pickers, range sliders and AJAX autocompleters. HTML5 has added a range of inputs which make form filling even easier.
Currently we have text inputs, password inputs, file selectors, radio buttons, checkboxes and submit/reset buttons. The new input types, widely supported by Opera and, to a certain extent, Safari, are: date (lots of them!), email, color, number, range, search, tel and url, and some new elements in output, datalist and keygen.
You can see, in Opera, that the new input types react differently, calling a date picker and color picker, and having a user-friendly slider and number selector. Datalist gives you a list of potential choices (like a dropdown list) but also allows you to type your own choice (no more slecting ‘Other’ and then typing in your own option!).
Opera 10
Opera 10, showing date picker
Opera 10, showing the colour picker
Opera 10, showing the <datalist> tag
Keygen is not widely enough supported to be worthwhile but help keep your form data secure by keeping a secure key on the server and in your browser and cross checking in subsequent form submissions. Output is a holder for the result of a form.
Why are these useful? Firstly, it makes form validation easier. Many browsers will have automatic checking of form fields, so an email address, a URL or a phone number can never have garbage data entered. Dates don’t get confused (mm/dd/yy or dd/mm/yy) and you don’t have to mess about with Javascript to create a colour picker or calendar.
The other benefit is in user entry. In devices without built-in keyboards, the space available for the keyboard is at a premium. If you know that the input has to be a number, only showing a numeric keypad is an advantage. The iPhone (using Safari) has different keyboards for URLs (with a .com button) and email addresses (with an @ sign)
What happens if a browser doesn’t support it? In all these things, there are fallbacks. Browsers that don’t recognise the tag, it uses a default text input, even in IE6!
The new input types give web developers a new way to enhance forms, making it easier for users to use your site and, hopefully, lead to more conversions!