HTML 5 has cool stuff: new input types!

June 3, 2010

Topics: Web Development, Web standards.

Even though many elements of HTML (HyperText Markup Language) 5 have only limited application at this time due to lacking browser support, there’s little reason not to make use of them. The design of the markup language is intended to minimize dependence on user agents, failing invisibly if the browser doesn’t offer that feature, which helps encourage early use of new elements.

Of course, the lack of support does have some consequences. We can’t just go out writing HTML 5 without having significant awareness of this lack of native support — we have to compensate.

Nonetheless, being able to incorporate great new elements like figure, progress, meter, nav to improve semantics or browser capabilities including content prefetching to provide a faster, more seamless experience for users is actually pretty exciting.

HTML5 Datetime input in Opera 10.53

HTML5 Datetime input in Opera 10.53

The coolest thing coming, in my opinion, is the numerous new attribute values for the input element. It seems like everybody’s always talking about the video element — but, not being somebody who’s all that excited by video, those conversations just make me say “Meh.”

But new input types…cold shivers.

Sadly, they’re also one of the less useful elements at the moment. Until support is available in browsers, they’ll simply fall back to a text field, unless supplemented by scripting to customize their behavior. But hey — easy upgrade, right?

From an accessibility perspective, this is fabulous news. Or rather, potentially fabulous news. These new input types — including date formats, time formats, numbers, ranges, and colors — are intended to provide user-friendly and accessibility-enabled interfaces for inputting these kinds of custom data. Ultimately, they’ll provide replacements (or fallbacks) to the innumerable JavaScripted widgets used to create date input or color selectors. Users, instead of encountering a different style of calendar every time they need to enter a date, could have a consistent user experience. Having the behavior built directly into the browser, and tied from there directly into any accessibility software in use offers a hugely more dependable experience for users of assistive technology.

Now, this all depends on several factors: vendor implementations need to meet user agent accessibility guidelines; interfaces between browsers need to be consistent; and, of course, the attribute values need to be implemented by enough browsers to make their use truly valuable!

, support is pretty limited. You can take a look at Roger Johansson’s HTML 5 input type test page and see whether your current browser supports any of them. If you’re using recent versions of Opera or Safari, the answer will be yes — otherwise, you won’t be seeing very much of interest for a while.

But you can implement these input types today.

All of these different input types fallback to a simple text input. If you’re using the HTML 5 doctype, there’s nothing stopping you from applying HTML 5 input types right now. Any browser that doesn’t support them will simply provide a field to enter plain text — so if you’re currently collecting email addresses in a text input (which seems pretty likely,) then you have no excuse not to change now. You may not see the benefits right away, but why wait? You’re not going to see any downsides, either.

Creating forms has long been a thorn in many a developer’s side. Dealing with how to best layout and collect date information, for example, is always a pain. Do you leave it as a simple text field, and have to deal with who-know-what kind of data received from the user? Do you use multiple select boxes, and force the user to walk through three or more fields just to enter the date? Do you use a JavaScript-based tool to provide a calendar, which may not have great accessibility, may behave strangely in some browsers, and may take a lot of development time to massage into providing the functionality you’re looking for?

Even when browser support for HTML 5 input types is fully available, it’s entirely possible that you’ll want to take the route to custom develop interfaces for various fields. However, unlike the past, you’ll only be needing to do this because something particularly unique is required for the project; for lower-budget projects, you can save a lot of labor and provide a solid interface just by using native features.

Have something to contribute?

« Read my Comment Policy

6 Comments on “HTML 5 has cool stuff: new input types!”

  1. Now we only have to wait until Explorer (hate it) catches up in their coding to undexrstand HTML (HyperText Markup Language) 5. Maybe by 2020 if we a lucky.

  2. Bridgend Web Design; September 8, 2010 at 5:22 am

    The new input types aren’t going to get the same publicity as the open video support because, to be blunt, we don’t rely on Flash for data input in web forms (apart from one nifty implementation of file uploads I saw, which supports client-side filesize validation, which can be a godsend when dealing with large file uploads).

    If Flash was more prevalent in that area, the iPhone/iPad debacle would have far more effect on data input in the public consciousness. As it is, we’re used to nifty datetime calendar pickers from our favourite javascript frameworks so this would seem less groundbreaking.

    People may keep using basic text input for dates even after the wholesale acceptance of HTML5, because form fields have traditionally been a nightmare to style cross-browser.

  3. I really need to get up to date on HTML (HyperText Markup Language) 5 i havent even really looked at it… and i had only heard about the ‘video’ feature as you said! I have a few sites i’ll definately be adding the new INPUTs on as they require dates and they get stuffed up all the time… hopefully this will help!

  4. thanks for sharing such feature with us. I think the HTML (HyperText Markup Language) 5 features like figure, progress, meter, nav, content prefetching etc are innovative and helpful.

  5. I agree I think that’s one of the coolest features!

  6. Microsoft is, sadly, going to slow adoption of HTML5 down. 50%+ of Internet users are still on XP and the new IE (Internet Explorer) that will – kind of – support HTML5 won’t be available for XP. Yes; that is lame. =/