HTML5 Input Types on Different Browsers

Sep 172011

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:

No.	Type	Description
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.	email	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="nam@searchdaily.net" /></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.

Interesting isn’t it? The value after selecting will be converted into Hex value and submit to server along with the form, so you won’t need to configure error potential javascript to popup color picker and parse value for your website anymore with HTML5.

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.

Tweet
Pin It

Searchdaily