HTML: HTML5 new input types
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:
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.
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.
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?
The new types are:
- email;
- url;
- number;
- range;
- dates;
- color.
Email
The email input type is meant to receive a valid email address and has automatic validation:
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.
Number
In 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.
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
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.
Color
Color type should be used when picking colors:
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?