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 2 March 2015.

I wrote a JavaScript detection script for modern input types. See also this blog post.

Definitions

It turns out to be surprisingly complicated to find a good definition for support of modern input types. I came to the following six points that a proper implementation may have to support:

  1. Offers the user an adapted interface suited to the type
  2. Restricts input to characters suited to the type
  3. Does not send incorrect data to the server
  4. Halts form submission upon finding incorrect data
  5. Informs the user of a failed submission with an error message
  6. Returns predictable output to the server

These six definitions don’t go for all input types or browsers. In the table below I indicate for each type which of the six are relevant.

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
This type is supported if the browser
  1. Offers the user a color picker interface
  2. Returns a hexadecimal RGB value to the server
<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>
This type is supported if the browser
  1. Offers the user a list of options in addition to a normal free input field
  • The Chromia offer a dropdown under an arrow, and match the predefined values from start; i.e. entering a 'p' only shows option 'ppk' since that starts with a p.
  • IE does the same, except that the dropdown automatically opens when you focus on the field.
  • Firefox doesn’t show anything initially, but substring-matches whatever you fill in; i.e. entering a 'p' shows both options since both contain a p.
<input type="date">
<input type="datetime">
<input type="time">
<input type="month">
<input type="week">

Test page
No No No 1 and 2 1 and 2 1 and 2
This type is supported if the browser
  1. Offers the user an interface for picking a date or time
  2. Returns predictable output to the server
  • The Chromia support all except datetime.
  • On Mac, the Chromia always show US-formatted dates and times. As far as I know there’s no way to change that. Windows listens to the user preferences and switches time and date formats accordingly.
  • Using the input itself is annoying, but the Chromia also offer some good popup date pickers for everything but time.

The most annoying one is time, which requires an am/pm input. Entering 14:33 is not possible. However, the server receives a 24hrs-formatted time anyway.

With dates the server received yyyy-mm-dd; with weeks yyyy-Www (where the W is an actual 'W').

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">
<input type="url">

Test page
No 2 to 4 2 to 4 No 2 to 4 2 to 4 2 to 4
This type is supported if the browser
  1. (mobile only) Offers the user a customised keyboard
  2. Does not send incorrect data to the server
  3. Halts form submission upon finding incorrect data
  4. Informs the user of a failed submission with an error message
<input type="number">

Test page
No 3 3 to 5 1 and 3 to 5 1 and 3 1 and 3 to 5 1 and 3 to 5 1 and 3 to 5
This type is supported if the browser
  1. Offers the user a customised interface (custom keyboard on touchscreen; arrows on desktop)
  2. Restricts input to numbers (and related characters such as a negative sign)
  3. Does not send incorrect data to the server
  4. Halts form submission upon finding incorrect data
  5. Informs the user of a failed submission with an error message
  • IE10 and 11 remove the value onblur if it’s not a number. This is a useful bit of interface other browsers should copy.
<input type="range">

Test page
No Yes Yes Yes Yes Yes Yes
This type is supported if the browser
  1. Offers the user a slider
  2. Returns a number to the server
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.

I don’t know how to define support because I don’t know what this type is supposed to do.
<input type="tel">

Test page
No No No No No No
This type is supported if the browser
  1. Offers the user a numeric keyboard
  2. Restricts input to numbers (and maybe related characters such as dashes)
  3. Does not send incorrect data to the server
  4. Halts form submission upon finding incorrect data
  5. Informs the user of a failed submission with an error message
<input type="url">
See <input type="email">
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.