HTML5 tests - inputs

Spec

This page tests the new input values of HTML5.

See also the mobile table.

Input IE 9 IE 10 pr 2 FF 10 Win FF 9.0.1 Mac Saf 5.1 Windows Saf 5.1.2 Mac Chrome 17 Win Chrome 16 Mac Opera 11.61 Win Opera 11.61 Mac
<input type="color">

Test page
No No No No Yes

Shows a color wheel or similar interface.

<datalist>

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

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

IE and Opera show the entire datalist when the user focuses on the input. Firefox only shows matching options when the user types in a letter. I side with IE and Opera here.

See also the second test for old Safari/Chrome bugs.

<input type="date">
<input type="datetime">
<input type="time">
<input type="month">
<input type="week">

Test page
No No Minimal No Yes

Shows a calendar popup in Opera. Safari shows a (bad) arrow-based interface but doesn’t validate the value.

Input IE 9 IE 10 pr 2 FF 10 Win FF 9.0.1 Mac Saf 5.1 Windows Saf 5.1.2 Mac Chrome 17 Win Chrome 16 Mac Opera 11.61 Win Opera 11.61 Mac
<input type="email">

Test page
No Yes Yes No Yes Yes

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

  • Chrome 9 shows a auto-suggest list, but does not validate the value. Chrome 10 does.
<input type="number">

Test page
No Almost No Yes Yes Yes
  • IE10 uses a default range between 0 and 100 for the number.
  • Safari and Chrome don’t validate, but when the value is not a number they revert to the previous proper value (including an empty value). Try it by filling in -9 (or any number), followed by "Hello world"
  • Opera hides the value when it’s not a number.

I wonder why no browser just returns an error message “This field should contain a number” and stops the form submission. Much easier in the long run than the current somewhat-weird behaviour.

<input type="range">

Test page
No No Almost Almost Yes

Shows a slider.

Opera makes the slider keyboard-accessible. Safari and Chrome don’t.

Input IE 9 IE 10 pr 2 FF 10 Win FF 9.0.1 Mac Saf 5.1 Windows Saf 5.1.2 Mac Chrome 17 Win Chrome 16 Mac Opera 11.61 Win Opera 11.61 Mac
<input type="tel">

Test page
Nothing special

The spec says this type should do nothing special. Browsers assidiously comply.

<input type="url">

Test page
No Yes Yes No Yes Yes

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

Problem is: what is actually a URL? I’ve heard people say that quirksmode is a valid URL. I don’t like it for beans, but they could be right.

Input IE 9 IE 10 pr 2 FF 10 Win FF 9.0.1 Mac Saf 5.1 Windows Saf 5.1.2 Mac Chrome 17 Win Chrome 16 Mac Opera 11.61 Win Opera 11.61 Mac

Attributes

Input IE 9 IE 10 pr 2 FF 10 Win FF 9.0.1 Mac Saf 5.1 Windows Saf 5.1.2 Mac Chrome 17 Win Chrome 16 Mac Opera 11.61 Win Opera 11.61 Mac
autofocus

Test page
No Yes Yes Yes Yes Yes
<input type="text" autofocus>

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

multiple

Test page
No Yes Yes Yes Yes
<input type="file" multiple>

Allows users to upload multiple files at once.

pattern

Test page
No Yes Yes No Yes Yes
<input pattern="[0-9]{4}[ ]?[A-Z]{2}" />

The value must conform to the regexp pattern, or submission is halted.

placeholder

Test page
No Yes 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

Test page
Yes Yes Yes Yes Yes Yes
<input type="number" readonly>

User cannot enter a value in the form field.

required

Test page
No Yes Yes No Yes Yes
<input type="text" required>

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

step

Test page
No Yes No Yes Yes Incomplete
<input type="number" step="3">

If you set step="3" and enter 11 in the field the following happens:

  • IE10 rejects the value. It has no interface, so you can’t use it to show allowed values.
  • Safari accepts the value, but pressing on the arrows brings you back to the expected 3-6-9-12 range.
  • Chrome rejects the value, and pressing on the arrows does the same as in Safari.
  • Opera rejects the value, but pressing on the arrows brings you to a 2-5-8-11-14 range. All values in this range are subsequently rejected. This is obviously a bug.
Input IE 9 IE 10 pr 2 FF 10 Win FF 9.0.1 Mac Saf 5.1 Windows Saf 5.1.2 Mac Chrome 17 Win Chrome 16 Mac Opera 11.61 Win Opera 11.61 Mac