Today I do a simple test of new HTML5 Input Types on Different Browsers and here I will show you some interesting results.
Firefox, Chrome, Safari, Opera and Internet Explorer are as much major browser as I can get. The test will run on the following input types:
|1.||tel||The input value is of type telephone number|
|2.||search||The input field is a search field|
|3.||url||The input value is a URL|
|4.||The input value is one or more email addresses|
|5.||datetime||The input value is a date and/or time|
|6.||date||The input value is a date|
|7.||month||The input value is a month|
|8.||week||The input value is a week|
|9.||time||The input value is of type time|
|10.||datetime-local||The input value is a local date/time|
|11.||number||The input value is a number|
|12.||range||The input value is a number in a given range|
|13.||color||The input value is a hexadecimal color, like #FF8800|
In the past you will see only <input type=”text”… /> or <input type=”button”…/> Now HTML5 comes with these types new types of input to help you simplify the process of designing and coding web application. I only need design a simple source code for the test, here it goes:
<form action="input-test.html" method="get"> <table> <tr> <td><strong>Input Type</strong></td> <td><strong>Result</strong></td> </tr> <tr> <td>Telephone</td> <td><input type="tel" name="tel" value="12345" /></td> </tr> <tr> <td>Search</td> <td><input type="search" name="search" value="type in keyword" /> </td> </tr> <tr> <td>URL</td> <td><input type="URL" name="url" value="http://searchdaily.net" /> </td> </tr> <tr> <td>Email</td> <td><input type="email" name="email" value="email@example.com" /></td> </tr> <tr> <td>Datetime</td> <td><input type="datetime" name="datetime" value="2011-09-17" /> </td> </tr> <tr> <td>Datetime-Local</td> <td><input type="datetime-local" name="datetime_local" value="2011-09-17" /></td> </tr> <tr> <td>Date</td> <td><input type="date" name="date" value="2011-09-17" /></td> </tr> <tr> <td>Time</td> <td><input type="time" name="time" value="16:40" /></td> </tr> <tr> <td>Month</td> <td><input type="month" name="month" value="08" /></td> </tr> <tr> <td>Week</td> <td><input type="week" name="week" /></td> </tr> <tr> <td>Number</td> <td><input type="number" name="number" value="1234" /></td> </tr> <tr> <td>Range</td> <td><input type="range" name="range" min="1" max="100" value="70" /></td> </tr> <tr> <td>Color</td> <td><input type="color" name="color" /></td> </tr> </table> </form>
Which eventually should look like this:
Now I will run the test file through various browser to see its result.
First is Chrome (13.0), because I know it best supports HTML5 at the moment.
HTML5 Input Types support in Google Chrome
Most of input are supported now by Chrome, but datepicker is not visible yet, we can only change date/time by input it manually or to increase/decrease it.
HTML5 Colorpicker is not supported as well, not like what I can see later on Opera.
Now let’s move to the latest Opera (11.50)
HTML5 Input Types supports in Opera
You won’t see Opera can suggest URL like Chrome can do and Opera doesn’t support Search either, but It can support great Color Picker, let see what I can capture from Opera if I click on the Color:
And here is what it can give if you want the full color picker.
Another goodness you can see on Opera right now is the HTML5 DatePicker, it’s totally helpful just like the colorpicker
How about Safari? I’ve tested this on Safari 5.1
HTML5 Input Types supports on Safari
The result is so similar to Opera except that ColorPicker isn’t supported in Safari. And you won’t see DatePicker either, it’s just like Chrome, you can increase and decrease date/time value.
Now you might ask me why didn’t I show Firefox? I’ve tested this demo with Firefox 6 (6.0.2 at the moment) and it gives me nothing, here is the result of Firefox
HTML5 Input Types supports on Firefox
You can see Firefox can validate if I enter an invalid email or suggest URL, but nothing more, you won’t see anything else support at least yet.
And the last browser we need to test is Internet Explorer, I have the latest version here (IE 9) but just like Firefox, I don’t see anything here yet.
HTML5 Input Types supports on Internet Explorer
Internet Explorer must be the less support HTML5 at the moment, and Internet Explorer 10 is shipped with Windows 8 as I can see on the previous its preview version.
At the moment we can only see the beautiful and simplicity of new HTML5 Input on Opera and Chrome for goodshake.
Here is the history of version these browsers started to support some of the above Input Types:
If you want to run the test on your own browser, just click here.