This page makes use of style sheets to control page presentation, in compliance with the World Wide Web consortium's standards. If you are seeing this message, the style sheets are not available either because of an error or because you are using a browser that is not standards-compliant
(possibly Netscape 4). The information on this Web site will be accessible
to you, but for a list of Web browsers that comply with the World Wide
Web Consortium standards, please visit our Web standards page.

About

This is your chance to stay up to date and comment on happenings, discoveries, and experiments by Western's web team.

Acceptable use policy

We welcome all constructive comments to the weblogs hosted by the University. Individuals who post content on Western's weblogs are subject to the terms of Western's Acceptable Use Agreement. Content which constitutes clear cases of abuse of the medium will be removed from the weblogs.

Western Web Designer -

HTML 5 - forms

One of the things I'm most excited about in HTML 5 is how it handles forms.

The new spec features built-in functionality that is exciting for web developers because it makes doing things much easier.

A few of the exciting new additions are some of the new input types:

type=email - Lots of forms have input fields for email addresses, but almost all say <input type="text"> with a label that says what kind of form field it is. now they can say <input type="email">. Other browsers just show a standard text field. The iPhone does something remarkable - when you tap into the text box, it actually changes the keyboard layout that appears to the "email" one, including the @ symbol and smaller than usual space bar (because who has spaces in their email addresses, right?).

type=url - The iphone changes the keyboard for web addresses too <input type="url">, removing the space bar altogether and adding "/", ".", and ".com" buttons for easy entry (see image above). As with anything, holding the ".com" button for a second or two will bring up a submenu that shows ".net", ".org", etc.

type=range - This is one of my favourites. Using <input type="range"> asks the browser to draw a slider that users can use to select from a range of numbers (maybe for voting or rating a video). You can set the length of the range (ie: 0-10), the default value selected, and more. Currently it only works in Safari, Google Chrome, and the latest version of Opera.

type=search - This one is just a subtle change: it provides a search box with rounded corners in Safari on Mac OS X. Additionally, Safari and Google Chrome will also put a small "X" at the end of the search field so that you can clear it and start again if you like. In Safari, this has been done to match the native look and feel of iTunes and OS X. Unlike OS X/Safari, the Windows version does not apply rounded corners to the search box.

The bummer about HTML 5 right now is that it's not fully supported by all browsers (a good chart detailing support can be found on Wikipedia). The good news is that the input types I've mentioned above will revert back to input type="text" so you're free to use them now so that your work is future-ready!

For more on the HTML 5 spec, have a look at the W3C Working Draft. Friendly warning: if code doesn't excite you, you could find it a bit dry.

Are you looking forward to HTML 5? Do you use it in your projects yet? Why or why not?

Comments

It's got a ton of sweet new features for sure, I'm looking forward to it!

Although also not looking forward to re-learning half of the web design stuff I've been doing for the past 8 years, lol.

I found the article extremely interesting and helpful. I will surely apply the email type in my iphone mobile sites from now on. Web Design is growing fast and I am excited about all the new features HTML 5 offer.