HTML: HTML5 new input types

Tweet

HTML5 introduced some new input types with better control and validation. When the features will be completely supported by all main browsers, creating forms will surely be easier and faster.
The new types are:

• email;
• url;
• number;
• range;
• dates;
• color.

As you can see they are quite interesting. Let's take a tour and see how they work.

Email

The email input type is meant to receive a valid email address and has automatic validation:

<input type="email">

When a non-valid email address is entered, and submit button pressed, a tooltip will ask to insert a valid email address.

URL

This input type is used for URLs. The value is again validated upon submission.

<input type="url">

Number

In this case, the accepted value will only be numeric. Validation works when the value is submitted.

<input type="number">

There are some attributes we can use for the input tag:
max = the maximum number accepted;
min = the minimum number accepted;
step = the accepted step between numbers (e.g. step="3" means that only numbers with a step of 3 will be accepted - -6, -3, 0, 3, 6 etc.);
value = the default value.

Range

Range type accepts only a range of numbers. It seems absolutely identical to the number type, however it is not. Infact it will appear as a slider bar

<input type="range">

Range has the same attributes as number (max, min, step, value).

Dates

Dates are quite interesting. It is infact possible to automatically create date pickers for input boxes. The actual different types are:
1) date = for complete dates (day, month, year);
2) month = for month and year;
3) week = for week and year;
4) time = for time (hour and minutes);
5) datetime = for time and date (hour, minutes, day, month, year) - UTC time;
6) datetime-local = the same as datetime but local time.

<input type="date">

Color

Color type should be used when picking colors:

<input type="color">

Compatibility

As usual, the only problem is compatibility. When will we be able to use the new input types? I don't know.
What we know is that some new types are already available on some browsers. Others have been totally ignored, as of now.
Email and URL work on FF 6.0+, Chrome 13+, Opera 11.5+ and IE10.
Color works only on Opera 11.5+.
Number is implemented on Safari 5.1+, Chrome 13+, Opera 11.5+ and IE10, while range is ok on Safari 5.1+ and Opera 11.5+.
Dates work only on Opera 11.5+ and partially on Chrome 13+ and Safari 5.1+.

As you can see, it is the usual mess.
Again, when will we be able to use them?