HTML5 and Even Fancier Forms

It’s a brand-new world for those of us working in the web industry. Browser vendors are ahead of the game, and are implementing HTML5 support before it becomes a W3C standard. Many web developers are already taking advantage of this by coding websites in HTML5. There’s the much ballyhooed video element, which allows you to serve streaming videos without Flash; there’s semantic document markup with elements like article andsection. But what about HTML5 forms? What’s happening there?

At first glance, you may be disappointed with what HTML5 currently brings to web forms; each browser is implementing the new elements slightly differently, and the most impressive features are yet to be fully ready for prime time. However, if you dig a little deeper, there is untapped potential that you can use right away—and boy, doesn’t the future look bright for forms!

Let’s take a closer look at HTML5 forms, and uncover today’s practical applications while peering into tomorrow’s bounty. There’s something for everybody, with improved usability for mobile browsers, sweet CSS, and easier ways to drive everyday form functionality like placeholder text.

Introducing New Input Types

The current draft of the HTML5 specification brings with it 13 new input field types. Yes, thirteen brand-new, shiny ways of defining the good old input element, so make some room beside text inputs for the following:

• email for email addresses, perfect to use immediately

• tel for telephone numbers (some browsers may strip whitespace), fine for immediate use

• url for web addresses, good to use now

• color for hexadecimal color values; here’s hoping we see OS-native color pickers in the future!

• number for whole numbers; some browsers provide up/down arrows next to the input field. You can also limit the number to a given range with the min and max attributes.

• range for a numeric input with a slider widget; like the number input type, you can use min and max attributes to define the range. You can also use the step attribute to control the increments in which the slider moves. This is ready for use, as browsers that don’t support it will simply display a text field—but be careful how you use this one. Regardless of how cool they may look, sliders are only good for certain tasks (such as price ranges); in most cases, a regular number field will be easier for your users.

• search for search keywords, so naturally just the tool for site searches. Be wary of the current Mac OS rendering: it looks just like the built-in Spotlight search, but there’s no overriding the styles if you need to display it differently. Take a look at the Apple website for an example of it in action.

• date, month, week, time, datetime, and datetime-local for date-related inputs. Several exciting new fields—now we just have to wait for all the browsers to implement it.