(photo: Western Web Designer)
 

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.

HTML 5 - forms

By Western Communications - 03/26/2010 at 11:53 AM

Iphonekeyboard 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 am excited for the posibilities of html 5

I think this is a really exciting time to be a web developer - I'm only just starting to use all the new features but I'm really impressed with the capabilities.

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.

Verify your Comment

Previewing your Comment

This is only a preview. Your comment has not yet been posted.

Working...
Your comment could not be posted. Error type:
Your comment has been posted. Post another comment

The letters and numbers you entered did not match the image. Please try again.

As a final step before posting your comment, enter the letters and numbers you see in the image below. This prevents automated programs from posting comments.

Having trouble reading this image? View an alternate.

Working...

Post a comment

Contact

Mathew Hoy
Senior Web Designer
Department of Communications and Public Affairs
e: mhoy6@uwo.ca
x: 88820

Get the Western web template

Download the Western template

Get the Social media icon pack

Download icon pack

Web related links

Western Flickr gallery


See Western's Flickr group submissions