HTML5 tests - inputs

Back to the index.

Spec

This page tests the new input values of HTML5 in mobile browsers.

See also the desktop table.

Last updated on 3 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

iOS iOS WebView And. 4 AWK WebView Chromium Chromium WebView UC BlackBerry Nokia Xpress UC Mini Opera Nintendo Dolphin IE Firefox
7 8 7 8 Sa Puf LG Cy HTC Xia Op Go 30 33 37 9 10 6 7 10 Mini Classic 9 10 11 And OS
<input type="color">

Test page 		No See below Yes Buggy Yes Yes Yes Yes No Yes No Yes No Incomplete No
This type is supported if the browser
  1. Offers the user a color picker interface
  2. Returns a hexadecimal RGB value to the server
  • Puffin shows the color interface but nothing happens when you click it.
  • BB 6 note: although the form field looks like a normal one, tapping it in fact triggers the color picker.
  • Firefox Android gives a limited number of colors to pick from.
<datalist>

Test page 		No See below Yes No Yes No Yes No Yes Almost No Yes No Yes No Yes No Yes No 
<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
  • UC has a unique interface: it first shows the values in the datalist in a popup, and when the user presses Cancel he’s allowed to enter a value.
<input type="date">

Test page 		Yes See below Yes Buggy Yes Yes Yes Yes No Yes No Yes No Yes
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
  • Puffin shows the desktop Chrome interface, but you can’t enter any data.
iOS iOS WebView And. 4 AWK WebView Chromium Chromium WebView UC BlackBerry Nokia Xpress UC Mini Opera Nintendo Dolphin IE Firefox
7 8 7 8 Sa Puf LG Cy HTC Xia Op Go 30 33 37 9 10 6 7 10 Mini Classic 9 10 11 And OS
<input type="datetime">

Test page 		No See below Yes No Yes No Yes No No Yes Yes No Yes No Yes No Yes
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
<input type="email">
<input type="url">

Test page 		1 No Yes 1-3 Yes No Yes Yes No 1-3 Yes No 1-3 No Yes No 1-3 1-3
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
  • Opera Classic automatically prepends http://, which makes the value more like a URL.
<input type="month">

Test page 		Yes See below Yes Buggy Yes Yes Yes Yes No Yes No Yes No Yes No
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
  • Puffin shows the desktop Chrome interface, but you can’t enter any data.
iOS iOS WebView And. 4 AWK WebView Chromium Chromium WebView UC BlackBerry Nokia Xpress UC Mini Opera Nintendo Dolphin IE Firefox
7 8 7 8 Sa Puf LG Cy HTC Xia Op Go 30 33 37 9 10 6 7 10 Mini Classic 9 10 11 And OS
<input type="number">

Test page 		1 and 3 See below Yes Yes Incomplete Yes No 1 + 3 Alternative No Yes Yes
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
  • Safari offers the numeric keyboard, but allows the user to switch to the alphabetic one and doesn’t validate the data. This is all the weirder since the iPhone, at least, has a fully numeric keyboard (it’s used for tel.
  • Android 2 also offers the numeric keyboard, and refuses to allow the user to enter other characters in the input field.
  • Chromia show the numeric keyboard, except Puffin, which shows the general one. However, Puffin gives an error message when the value is not numeric.
  • UC on Huawei offers the numeric part of the regular keyboard and nothing else. The ones on Xiaomi and S4 do this correctly.
  • BB6/7, which have a physical keyboard, only accept keys that can have a numeric value. The others are ignored.
  • Opera Classic allows any input but doesn’t send non-numeric values to the server. It doesn’t show any error message.
  • Nintendo and Dolphin remove non-numeric values onblur, but doesn’t give an error message.
<input type="range">

Test page 		Yes Yes Yes Yes Yes Yes No Yes No Yes Yes
This type is supported if the browser
  1. Offers the user a slider
  2. Returns a number to the server
<input type="search">

Test page 		No clue
I don’t know how to define support because I don’t know what this type is supposed to do.

I do not understand the point of this type. Neither do browsers.
iOS iOS WebView And. 4 AWK WebView Chromium Chromium WebView UC BlackBerry Nokia Xpress UC Mini Opera Nintendo Dolphin IE Firefox
7 8 7 8 Sa Puf LG Cy HTC Xia Op Go 30 33 37 9 10 6 7 10 Mini Classic 9 10 11 And OS
<input type="tel">

Test page 		1-2 Yes Yes 1 Yes Yes Yes Yes No Yes No Yes Yes
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
Minimal
Browser gives keyboard with numbers, but allows switching to non-numbers (or those are on the keyboard anyway) and doesn’t validate the data.
  • The iPhone iOS8 gives a numeric keyboard and handles everything correctly. Although the iPad gives the numeric part of the regular keyboard, it doesn’t protest when you enter wrong data.
<input type="time">

Test page 		Yes See below Yes Buggy Yes Yes No Yes Yes No Lousy No Yes No Yes
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
  • Puffin shows the desktop Chrome interface, but you can’t enter any data.
  • Opera Classic supports time, but the interface is lousy.
<input type="url">
 See <input type="email">
<input type="week">

Test page 		Buggy See below No Buggy Yes Yes Yes No Yes No Yes No Yes No Yes No
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
  • On iOS this input is a thin line you cannot enter any data in; not even normal data.
  • Puffin shows the desktop Chrome interface, but you can’t enter any data.
iOS iOS WebView And. 4 AWK WebView Chromium Chromium WebView UC BlackBerry Nokia Xpress UC Mini Opera Nintendo Dolphin IE Firefox
7 8 7 8 Sa Puf LG Cy HTC Xia Op Go 30 33 37 9 10 6 7 10 Mini Classic 9 10 11 And OS

Attributes

iOS iOS WebView And. 4 AWK WebView Chromium Chromium WebView UC BlackBerry Nokia Xpress UC Mini Opera Nintendo Dolphin IE Firefox
7 8 7 8 Sa Puf LG Cy HTC Xia Op Go 30 33 37 9 10 6 7 10 Mini Classic 9 10 11 And OS
autofocus

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

The browser automatically focuses on this field when the page is loading. Whether that is a good idea on mobile is an open question. Users may not liked being yanked to a different part of the page because of an autofocus.

  • BB6/7 supports it fully, and that’s OK, since it has a hardware keyboard.
  • Firefox Android supports it fully and thus opens the keyboard when the user enters the page. Wrong decision.
min and max on number

Test page 		No No Yes Minimal Yes No Yes Yes No Minimal Yes No Minimal No Minimal No Minimal Minimal No
Minimal
Browser doesn’t send wrong numbers to the server but doesn’t give an error message, either.
  • Firefox on Android shows an error message, but only for about 200ms.
min and max on date

Test page 		No No Yes Buggy Minimal Yes Yes Yes Yes No Yes No Yes No Yes

A perfectly-supporting browser would present the date picker interface and only allow you to pick dates that fall between min and max. Among others, BlackBerry 6 and the Google and HTC Chromia do this.

Minimal
Browser doesn’t send wrong numbers to the server but doesn’t give an error message, either.
  • Firefox on Android shows an error message, but only for about 200ms.
  • Puffin shows the desktop Chrome interface, but you can’t enter any data.
multiple

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

Allows users to upload multiple files at once.

Surprisingly, the Chromium-based browsers don’t support it; that is, the device doesn’t allow me to select multiple files. This could be a device failure, I suppose, instead of a browser failure. The net result is the same, though.

  • The app I use for WebView testing does not support selecting files at all.
pattern

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

Minimal
The browser does not submit the form, but gives no error message, either.
  • BB10 shows the numeric keyboard in the pattern test, but letters are necessary to complete the pattern.
iOS iOS WebView And. 4 AWK WebView Chromium Chromium WebView UC BlackBerry Nokia Xpress UC Mini Opera Nintendo Dolphin IE Firefox
7 8 7 8 Sa Puf LG Cy HTC Xia Op Go 30 33 37 9 10 6 7 10 Mini Classic 9 10 11 And OS
placeholder

Test page 		Yes Yes Yes Yes Yes Yes No Yes No 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 Yes No Yes No Yes Yes 
<input type="number" readonly>

User cannot enter a value in the form field.
required

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

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

Minimal
Form submission halted but no error message.
step

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

I test this attribute by entering 11, which is a wrong value. The browser is supposed to reject it and inform the user of that fact.

Minimal
Wrong values are not sent to the server, but the user isn’t notified of an error, either.
  • LG and Opera Chromium don’t send the offending value to the server, but don’t show an error message, either.
  • UC halts form submission but does not give an error message.

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.
  • Firefox and the Chrome-based browsers show an error message with the closest legal values.
iOS iOS WebView And. 4 AWK WebView Chromium Chromium WebView UC BlackBerry Nokia Xpress UC Mini Opera Nintendo Dolphin IE Firefox
7 8 7 8 Sa Puf LG Cy HTC Xia Op Go 30 33 37 9 10 6 7 10 Mini Classic 9 10 11 And OS

Android WebKit 4

Android WebKit 4 is such a mess that it needs its own, private compatibility table for some types. The columns below are for default browser and WebView both, except for Huawei and LG, where the WebView can’t be tested, and Xiaomi, which has a Chromium-based default browser.

Method or property Hua Note Xperia L5 Wolf One Xiao
<input type="color">

Test page 		No Incomplete No No Yes Incomplete No

Shows a color wheel or similar interface.

Incomplete
Works, but with very few colors (about 8)
<datalist>

Test page 		No No No No Yes No No
<input type="date">
<input type="datetime">
<input type="time">
<input type="month">
<input type="week">

Test page 		2 Incomplete No Yes Incorrect Yes No
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
  • Huawei allows you to fill in anything. It does not send wrong values to server, but doesn’t notify the user, either.
  • Note doesn’t support month and week.
  • Wolfgang treats datetime as date, and month and week as time.
<input type="number">

Test page 		3 Yes 3 Yes Yes 3 Yes
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
Method or property Hua Note Xperia L5 Wolf One Xiao

Tested browsers

Mobile browser test array 2.1.1; February 2015

iOS 7
WebKit 537
Default browser on iPad 2 with iOS 7.1.2
iOS 7 WebView
WebKit 537
Chrome/iOS on iPad 2 with iOS 7.1.2
iOS 8
WebKit 600
Default browser on iPhone 4S with iOS 8.1
iOS 8 WebView
WebKit 600
Chrome/iOS on iPhone 4S with iOS 8.1
Android WebKit 4
WebKit 534
Default browser on Huawei C8813, Android 4.1.1
Default browser on Samsung Galaxy Note I, Android 4.1.2
Default browser on Sony Xperia S, Android 4.1.2
Default browser on LG L5, Android 4.1.2
Default browser on Wolfgang AT-AS45FW, Android 4.2.2 (see note below)
Default browser on HTC One X, Android 4.2.2
Android 4 WebView
WebKit 534
WebView on Samsung Galaxy Note I, Android 4.1.2
WebView on Sony Xperia S, Android 4.1.2
WebView on HTC One X, Android 4.2.2
WebView on Wolfgang AT-AS45FW, Android 4.2.2 (see note below)
WebView on Xiaomi M2, Android 4.1.1
All these WebViews were tested with the HTML5Test Android app.
Chromium Samsung
Blink; Chromium 28
Default browser on Samsung Galaxy S4, Android 4.4.2
This is Samsung’s Chrome.
Chromium Puffin
Blink; Chromium 30
Possibly proxy-ish browser; doesn’t make connection to my internal server, but does do some stuff client-side.
4.0 Free Edition on Samsung Galaxy Note, Android 4.1.2
Chromium LG
Blink; Chromium 30
Default browser on LG L70, Android 4.4.2
This is LG’s Chrome.
Chromium Cyanogen
Blink; Chromium 33
Default browser on Galaxy Nexus flashed with Cyanogenmod 11, Android 4.4.4
This is Cyanogen’s Chrome.
Chromium HTC
Blink; Chromium 33
Default browser on HTC M8, Android 4.4.4
Chromium Xiaomi
Blink; Chromium 34 or 35; see this blog post
Default browser on Xiaomi M2, Android 4.1.1
Chromium Opera
Blink; Chromium 39
26 on LG L5, Android 4.1.2
26 on Wolfgang AT-AS45FW, Android 4.2.2
This is Opera Mobile.
Chromium Google
Blink; Chromium 40
Default browser on Nexus 7, Android 4.4.2
Default browser on Motorola Moto G, Android 4.4.4
This is Google’s regular Chrome. I test it only on devices where it is the default browser.
Chromium WebView 30
Blink; Chromium 30
WebView on LG L70, Android 4.4.2
WebView on Samsung Galaxy S4, Android 4.4.2
All these WebViews were tested with the HTML5Test Android app.
Chromium WebView 33
Blink; Chromium 33
WebView on Nexus 7, Android 4.4.2
WebView on Motorola Moto G, Android 4.4.4
WebView on Galaxy Nexus flashed with Cyanogenmod 11, Android 4.4.4
All these WebViews were tested with the HTML5Test Android app.
Chromium WebView 37
Blink; Chromium 37
WebView on HTC M8, Android 4.4.4
All these WebViews were tested with the HTML5Test Android app.
UC 9
WebKit 534
UC 9.9.5 on Huawei C8813, Android 4.1.1
UC 9.9.7 on Xiaomi M2, Android 4.1.1
The largest Chinese browser. This is the full Chinese variant, not the proxy. These browsers were pre-installed (next to Android WebKit; don’t ask me why).
UC 10
UC 10.0.2 on Samsung Galaxy S4, Android 4.4.2
This is an English install. I don’t know if that matters, but it could.
BlackBerry 6
WebKit 534
Default browser on BB Torch 9800 (OS6)
BlackBerry 7
WebKit 534
Default browser on BB Torch 9810 (OS7)
BlackBerry 10
WebKit 537
Default browser on BlackBerry Z30 (BB OS 10.2.1)
Nokia Xpress
Gecko 20100401; this version was used for some Firefoxes from 3 to 4.
Proxy browser
5.5 on the Nokia Asha 311, S40.
UC Mini
Gecko; don’t know version number
Proxy browser
9.4 on Motorola Moto G, Android 4.4.2
9.4 on Wolfgang AT-AS45FW, Android 4.2.2 (see note below)
Opera Mini
Presto
Proxy browser
7.6 on Samsung Galaxy S4, Android 4.4.2
8.0 on BB Torch 9800 (OS6)
8.0.3 on iPad 2, iOS 7.1.2
Opera Classic
Presto
12.10 on Samsung Galaxy Pocket, Android 2.3.6
Nintendo
WebKit 536
Nintendo browser 3.0.3 on Wii U (OS version unfindable)
Supposed to be based on NetFront, which in turn is WebKit-based nowadays.
Dolphin
WebKit 534
Dolphin 11.23 with JetPack on Sony Xperia S, Android 4.1.2.
Independent full browser for Android, as long as you install both Dolphin and the Jetpack extension.
IE9
Trident
Default browser on Nokia Lumia 800, Windows Phone 7.5.
IE10
Trident
Default browser on Nokia Lumia 520, Windows Phone 8.0.
IE11
Trident
Default browser on Nokia Lumia 820, Windows Phone 8.1 “Update”
This is a developer phone. That might matter.

Firefox Android
Gecko 33
33 on LG L5, Android 4.1.2
33 on Samsung Galaxy S4, Android 4.4.2
Firefox OS
Gecko 28
Default browser on T2Mobile Flame, the FFOS reference device. 1.3.0 prerelease

Wolfgang AT-AS45FW note: Wolfgang is a Dutch importer and re-brander of phones. In this particular case they seem to have bought Chinese (? probably) phones, re-branded them, then re-sold them to the Whoop company, which re-branded them and sold them to the Hema chain of supermarkets, which sells them to consumers as the Whoop Echo. Supply chain management FTW!