HTML5 tests - inputs

Spec

This page tests the new input values of HTML5.

Input IE 9 FF 4.0b11 Saf 5 Chrome 9 Opera 11
<input type="color">
No No No No Yes

Will probably show a color wheel or similar interface.

<datalist>
No Yes No No Yes
<input list="ppk" name="list" />
<datalist id="ppk">
	<option label="ppk" value="ppk">
	<option label="JavaScript" value="JavaScript">
</datalist>

Shows the listed values as a suggestion/autocomplete box. Users can type in an alternative value, though.

<input type="date">
<input type="datetime">
<input type="time">
<input type="week">
No No Sort of Sort of Yes

Shows a calendar popup in Opera. Safari/Chrome’s behaviour is less easily explained, and I find it confusing. Besides, it’s possible to fill in a non-date value. I feel Opera’s implementation is superior.

<input type="email">
No Yes No No Yes

Value is automatically validated as an email address, and if it’s invalid form submission is halted.

<input type="number">
No No Yes Yes Yes

Value should be a number, and a special control is added for going up or down the numbers. Oddly, this filed is not auto-validated, although it’s not submitted to the server when it does not contain a number.

If the field is empty and you press an arrow, Opera sensibly starts at 0. WebKit, however, starts at (presumably) the largest number the computer can handle. Weird.

<input type="range">
No No Yes Yes Yes

Shows a slider.

<input type="url">
No Yes No Minimal Yes

Value is automatically validated as a URL, and if it’s invalid form submission is halted.

Chrome offers autocomplete of recent URLs, but that’s it.

autofocus
No Yes Yes Yes Almost
<input type="text" autofocus>

The browser automatically focuses on this field when the page is loading.

  • The autofocus works fine in Opera on the pages here on QuirksMode.org, but it doesn’t work when I access the same page on my local web server.
required
No Yes No No Yes
<input type="text" required>

Form submission is halted if a required field does not have a value.

placeholder
No Yes Yes Yes Yes
<input type="text" placeholder="Some text">

The placeholder text is shown as long as the field is unfocused and the user has not entered another value.

readonly
Yes Yes Yes Yes Yes
<input type="number" readonly>
User cannot enter value in form field.
step
No No Yes Yes Yes
<input type="number" step="3">

Shows extra widget that goes through the numbers in steps of step. However, Safari and Opera force the number to be a multiple of step, even if you don’t start with a multiple. Chrome doesn’t. I don’t understand the spec well enough to decide who’s right.

Test cases

Attributes

Data list (must come last; Safari 5 stops rendering here)