How to use HTML5 on your website today

Don't wait for the Flash-iPhone war to end: InfoWorld's hands-on guide tells you how to get your websites ready for HTML5 now

1 2 3 4 5 Page 4
Page 4 of 5

What HTML5 features you'll use, someday
This category consists of elements and features that Web designers and developers have wanted for many years. Unfortunately, it may be a few more years before there's enough real-world support to be able to use them.

Brilliant forms. I referred earlier to smarter forms, which makes these new form fields downright virtuosos -- when they're widely supported.

A horizontal slider control allowing a user to move the slider to pick a number:

input type="range" min="0" max="100" step="2" value="50">

A color picker:

input type="color">

A date field (other valid values for type are month, week, time, datetime, and datetime-local):

<input type="date">

If you need something that doesn't match any of these fields, you'll be able to create your own with RegExp (regular expression) patterns. Here's one for credit cards:

<input type="text" pattern="[0-9]{13,16}">

And finally, a way to tell browsers that a given field must have an entered value:

<input type="text" required>

None of these tags yet have the cross-browser and cross-platform support they'll need to be usable, but when that time comes, you'll be looking forward to them.

Print-like layouts. Another CSS3 feature, which when fully implemented will add years to the lives of designers, is multiple column layouts. It's currently implemented only as test cases in Firefox and Safari.

-moz-column-count: 3;
-moz-column-gap: 20px;
-webkit-column-count: 3;
-webkit-column-gap: 20px;

Location detection. With the growing interest in location-based services such as Gowalla and Foursquare, it's useful for a browser to know where its user is. For obvious reasons, this was first implemented in mobile browsers, but Firefox 3.5 and Safari 5 have begun to provide support for geolocation. (Chrome's geolocation support is currently via Gears, which is in the process of being phased out in favor of HTML5.)

1 2 3 4 5 Page 4
Page 4 of 5
InfoWorld Technology of the Year Awards 2023. Now open for entries!