HTML5 tests - inputs

Back to the index.

Spec

This page tests the new input values of HTML5.

See also the mobile table.

Last updated on 9 February 2015.

Types

Method or property Internet Explorer EdgeHTML Firefox Safari Chrome Opera Yandex
7 and lower 8 9 10 11 35 Win 35 Mac 35 Linux 7 40 Win 40 Mac 37 Linux 26 Win 26 Mac 14.12 Win 14.12 Mac
<input type="color">

Test page
No Yes No Yes Yes Yes

Shows a color wheel or similar interface.

<datalist>

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

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

Test page
No No No Incomplete Incomplete Incomplete
  • The Chromium-based browsers support all except datetime, but always show US-formatted dates and times. As far as I know there’s no way to change that. My OS date/time pref is Dutch, and I gave the test page a lang="nl", but that didn’t help.
    (I heard one report of correct format, though, where the user had his entire OS and browser configured in Dutch.)
Method or property Internet Explorer EdgeHTML Firefox Safari Chrome Opera Yandex
7 and lower 8 9 10 11 35 Win 35 Mac 35 Linux 7 40 Win 40 Mac 37 Linux 26 Win 26 Mac 14.12 Win 14.12 Mac
<input type="email">

Test page
No Yes Yes No Yes Yes Yes

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

<input type="number">

Test page
No Yes Yes Minimal Yes Yes Yes
  • IE10 and 11 remove the value onblur if it’s not a number. IE Edge doesn’t, but refuses to submit the form. Both are correct, though I think the latter is a bit more clear.
  • Safari does not send non-numeric values to the server, but doesn’t give a clue something is wrong while the user is using the form, so the user will expect the value to make it to the server.
<input type="range">

Test page
No Yes Yes Yes Yes Yes Yes

Shows a slider.

Method or property Internet Explorer EdgeHTML Firefox Safari Chrome Opera Yandex
7 and lower 8 9 10 11 35 Win 35 Mac 35 Linux 7 40 Win 40 Mac 37 Linux 26 Win 26 Mac 14.12 Win 14.12 Mac
<input type="search">

Test page
No No No No No No

Mac browsers except Firefox give the field rounded corners, but that’s the full extent of the support for this type. To be fair, I don’t know what else they’re supposed to be doing.

<input type="tel">

Test page
No No No No No No
<input type="url">

Test page
No Yes Yes No Yes Yes Yes

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

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.

Method or property Internet Explorer EdgeHTML Firefox Safari Chrome Opera Yandex
7 and lower 8 9 10 11 35 Win 35 Mac 35 Linux 7 40 Win 40 Mac 37 Linux 26 Win 26 Mac 14.12 Win 14.12 Mac

Attributes

Method or property Internet Explorer EdgeHTML Firefox Safari Chrome Opera Yandex
7 and lower 8 9 10 11 35 Win 35 Mac 35 Linux 7 40 Win 40 Mac 37 Linux 26 Win 26 Mac 14.12 Win 14.12 Mac
autofocus

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

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

min and max for number

Test page
No Yes Yes No Yes Yes Yes
min and max for date

Test page
No No No Yes Yes Yes
multiple

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

Allows users to upload multiple files at once.

pattern

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

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

The error message contains the element’s title, if any.

Method or property Internet Explorer EdgeHTML Firefox Safari Chrome Opera Yandex
7 and lower 8 9 10 11 35 Win 35 Mac 35 Linux 7 40 Win 40 Mac 37 Linux 26 Win 26 Mac 14.12 Win 14.12 Mac
placeholder

Test page
No Yes 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
Not tested 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 Yes
<input type="text" required>

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

step

Test page
No Yes Yes Minimal Yes Yes Yes
<input type="number" step="3">
  • Safari doesn’t send a wrong value to the server, but doesn’t alert the user that something is wrong, either. Pressing on the arrows brings you back to the expected 3-6-9-12 range.

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

  • IE tells the user to enter a valid value but doesn’t tell the user what a valid value looks like.
  • Safari removes the value and sends the rest to the server. This is BAD since the user has no clue that his submission has gone wrong.
  • Firefox and the Chrome-based browsers show an error message with the closest legal values.
Method or property Internet Explorer EdgeHTML Firefox Safari Chrome Opera Yandex
7 and lower 8 9 10 11 35 Win 35 Mac 35 Linux 7 40 Win 40 Mac 37 Linux 26 Win 26 Mac 14.12 Win 14.12 Mac

Tested browsers

Desktop browser test array 2.1; January 2015

IE7 and lower
I removed them, so they’re not tested for newer methods and properties that they don’t support anyway. However, I copy all information from older versions of the Tables.
If IE8 supports a method or property I never tested before I have to guess if IE7 and lower also support it. In general I assume they support the Microsoft-invented properties, but for others I will occasionally have to add a "Don’t know" entry. If IE8 does not support something I never tested before, I assume IE7 and lower also don’t support it.
IE 8, 9, and 10
Trident
On separate Windows 7 virtualizations as downloaded from Modern IE.
IE11
Trident
On Windows 8.1 virtualization as downloaded from Modern IE.
On Surface
EdgeHTML
EdgeHTML
On Microsoft Remote Desktop, as indicated at Remote IE. This is not Spartan, but an IE that runs EdgeHTML, the new rendering engine.
Firefox
Gecko 35
35 on Win7, Mac and Linux
Safari
WebKit
7.0.5 on Mac
Chrome
Chromium 40/37
40 on Win7 and Mac
37 on Linux (can’t update)
Opera 26
Chromium 38
26.0 on Win7 and Mac
Yandex 14.12
Chromium 38
14.12 on Win7
14.12 on Mac

Operating systems

Mac
MacBook Pro 17'' with OS 10.9.4
This is my main test station. It also runs all virtual Windows systems.
Windows
All downloaded from modern.ie. I use VirtualBox, and downloded the Windows 7 systems for all browsers but IE11, which runs on Windows 8.1.
The non-IE Windows browsers all run on the IE9/Win7 virtualization.
Surface
Microsoft Surface with Windows RT 8.1
Linux
Ubuntu 12.04 on pretty old hardware. Not fair for performance comparisons.