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:
When a non-valid email address is entered, and submit button pressed, a tooltip will ask to insert a valid email address.
URLThis input type is used for URLs. The value is again validated upon submission.
NumberIn this case, the accepted value will only be numeric. Validation works when the value is submitted.
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.
RangeRange 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
Range has the same attributes as number (max, min, step, value).
DatesDates 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.
ColorColor type should be used when picking colors:
CompatibilityAs 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?