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 9 February 2015.

Types

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

Test page
No No See below Yes No Yes Yes Yes No Yes No Yes No Incomplete No

Shows a color wheel or similar interface.

  • 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 No See below 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>

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

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

Test page
No No See below Yes Buggy Yes No Yes No Yes Yes No Yes No Yes No Yes
  • Puffin shows the desktop Chrome interface, but you can’t enter any data.
<input type="email">
<input type="url">

Test page
No No Yes Minimasl Yes Yes No Minimal Yes No Minimal No Yes No Minimal Minimal

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

Minimal
Browser validates the data and does not send wrong data to the server, but does not notify the user.
  • Opera Classic automatically prepends http://, which makes the value more like a URL.
<input type="month">

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

Test page
Minimal Yes See below Yes Incomplete Yes No Minimal No Yes Yes
  • 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 doesn’t validate the results. 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 No Yes Yes Yes Yes No Yes No Yes Yes

Shows a slider.

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

<input type="search">

Test page
No No No No No No No No

I do not understand the point of this type. Neither do browsers.

iOS Android Chromium UC BlackBerry Nokia Xpress UC Mini Opera Nintendo Dolphin IE Firefox
7 8 2 4 Sa Puf LG Cy HTC Xia Op Go 9 10 6 7 10 Mini Classic 9 10 11 And OS
<input type="tel">

Test page
Phone Yes Yes Minimal Yes Yes Yes No Yes No Yes Yes
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. The iPad iOS7 doesn’t.
<input type="time">

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

Attributes

iOS Android Chromium UC BlackBerry Nokia Xpress UC Mini Opera Nintendo Dolphin IE Firefox
7 8 2 4 Sa Puf LG Cy HTC Xia Op Go 9 10 6 7 10 Mini Classic 9 10 11 And OS
autofocus

Test page
No No Sort of Sort of No Sort of Sort of Yes Sort of No Sort of No Sort of Yes 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 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 No Yes No Yes No Yes
Minimal
Browser doesn’t send wrong numbers to the server but doesn’t give an error message, either.
perfect support: only give allowed dates in interface (bb6, google chrome/moto, htc chr)
  • 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.
google chrome yes lg chrome minimal xiao chrome yes cyano chr yes htc chro yes op chr yes ff and yes with error 200ms ff os yes bb10 yes bb6 yes huawei uc yes dolphin yes
multiple

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

pattern

Test page
No No Yes Minimal 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 Android Chromium UC BlackBerry Nokia Xpress UC Mini Opera Nintendo Dolphin IE Firefox
7 8 2 4 Sa Puf LG Cy HTC Xia Op Go 9 10 6 7 10 Mini Classic 9 10 11 And OS
placeholder

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

  • Sony Xperia Android WebKit 4 has a SEVERE BUG: you aren’t allowed to type anything into a field with a placeholder.
readonly

Test page
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 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 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 Android Chromium UC BlackBerry Nokia Xpress UC Mini Opera Nintendo Dolphin IE Firefox
7 8 2 4 Sa Puf LG Cy HTC Xia Op Go 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.

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

Test page
No Incomplete No No Yes Incomplete

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
<input type="date">
<input type="datetime">
<input type="time">
<input type="month">
<input type="week">

Test page
Minimal Incomplete No Yes Incorrect Yes
  • 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
Buggy Yes Buggy Yes Yes Buggy

Compliant browsers show a numeric keyboard that cannot be switched to the normal one. Thus user input is automatically restricted to numbers.

Buggy
The browser shows the numeric part of the regular keyboard, and allows the user to switch to the alphabetical part, type in letters, and submit the form. The values don’t arrive at the server, but the user doesn’t get an error message, either.
EVERY device in this test actually has a numeric keyboard; it pops up in the tel test. Thus the refusal to do so in the number test is insane.
Method or property Hua Note Xperia L5 Wolf One

Tested browsers

Mobile browser test array 2.1; January 2015

iOS 7
WebKit 537
Default browser on iPad 2 with iOS 7.1.2
iOS 8
WebKit 600
Default browser on iPhone 4S with iOS 8.1
Android 2
WebKit 533
Default browser on HTC Legend, Android 2.2
Default browser on Samsung Galaxy Pocket, Android 2.3.6
Default browser on Sony Reader PRS-T3. I’ve heard it’s Android 2-based, but of course it’s nearly impossible to get some actual information.
Android 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
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.
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!