Numeric HTML Input Field and other HTML5 goodies

Some while ago I've written a little web app at home that
a) needs mainly numeric input
and
b) is used mainly from an iPod touch / iPad / other mobile device.

On all of those devices, numeric input is cumbersome, because you first have to switch the virtual keyboard into numeric mode.

Yesterday I googled around again for this, and finally found a solution.

HTML5 has some more types to INPUT fields:

type="email"	for email addresses
type="url"	for web addresses / URLs
type="number"	for numeric input

All of them have the effect on the iPhone/iPad that they switch to a virtual keyboard layout that is optimized for the input, e.g.

The email-keyboard on the iPhone will have the @-sign there
The url-keyboard on the iPhone will have the ".com" key; also the . and the / key will be placed more prominently.
The number-keyboard on the iPhone will switch the numbers in the top row.

On my Android 2.2 [1]  HTC only the number mode works, but it gives you a numeric block / phone-style keyboard, which is even better for numeric input.

HTML5 defines some more values for the type like "date", "week", "month", "time", ... and "range" for sliders, i.e. for numeric values with clear and narrow boundaries, but those are rarely implemented as of today.

See Dive Into HTML5 for an excellent overview including browser-support.

Since all of the above are defined only starting HTLM5, they are not "supported" on many current browsers, but the good thing is, that all browsers, that do not explicitely support them, revert to type="text" for unknown input-types.

Also there is a new attribute placeholder:
Placeholder text is displayed inside the input field as long as the field is empty and not focused. As soon as you click on (or tab to) the input field, the placeholder text disappears. (from Dive Into HTML)

Sort of like the search box in Firefox.

So back to my initial problem, defaulting to numeric input on mobile devices.
Just replace  input type="text" with input type="number", there is no down-side to this.
It is user-friendly on mobile devices, and works like it used to on all other browsers.

--

[1] I'll check 2.3 and 3.0 once my PC is fast enough for the SDK.