HTML5 tests - inputs

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.

Input

IE 9

FF 4.0b11

Saf 5

Chrome 9

Opera 11

<input type="color">

Yes

Will probably show a color wheel or similar interface.

<datalist>

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">

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">

Yes

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

<input type="number">

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">

Yes

Shows a slider.

<input type="url">

Yes

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

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

Yes

<input type="text" required>

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

placeholder

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

<input type="number" readonly>

User cannot enter value in form field.

step

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