I am a aggregator of useful blog articles, tutorials and how-to guides to help you learn new skills and stay current. You can also easily browse the many articles which include news and headlines from around the web. I started to keep you up to date with what’s happening in the global UI design community. I make simple for you to browse and share your favourite articles with your friends and colleagues.
Showing posts with label HTML5. Show all posts
Showing posts with label HTML5. Show all posts
Tuesday, November 9, 2010
HTML5 input types
It is a rare day at work when I don’t do anything related to forms. Be it creating forms from scratch, modifying existing forms, handling user interaction with them, whatever. I work with forms a lot. So that’s why one of the things in HTML5 I’m looking forward to the most is the overhaul of the elements and attributes used to create forms.
Among other form-related things, HTML5 adds a whole bunch of new values for the input element’s type attribute:


An interesting note is that on the iPhone/iPod Touch, the main difference between input types like text, number, url, tel, and email is how the on-screen keyboard changes to display the characters you are most likely to enter.
Among other form-related things, HTML5 adds a whole bunch of new values for the input element’s type attribute:
- search
- tel
- url
- datetime
- date
- month
- week
- time
- datetime-local
- number
- range
- color
That’s a lot of useful form controls you can create. Browser support isn’t all the way there yet of course, but some browsers do something useful with several of these input types.
To round this off, here are a few screenshots of the new input controls in browsers that support them.
<input type="tel"> in Safari on iPhone/iPod Touch:

<input type="url"> in Safari on iPhone/iPod Touch:

An interesting note is that on the iPhone/iPod Touch, the main difference between input types like text, number, url, tel, and email is how the on-screen keyboard changes to display the characters you are most likely to enter.
I’m very much looking forward to the day when all major browsers have full and consistent support for HTML5 input types. Unfortunately that isn’t likely to happen for many years, so until then I guess we’re stuck with the hackish JavaScript workarounds we use today for things like sliders and datepickers.
Subscribe to:
Posts (Atom)