Searchdaily

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.

Continue reading »