HTML5 tests - inputs (mobile)

Spec

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

See also the desktop table.

Property Opera Mobile Safari Android Symbian S40 Dolfin BlackBerry Palm Obigo MeeGo UC Firefox IE Mobile
Presto WebKit Gecko Trident
<input type="color">

Test page
11.5 No PB2 No Buggy No

Shows a color wheel or similar interface.

  • UC does nothing: it doesn’t even show the keyboard.
<datalist>

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

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

Test page
Almost 5.0 No Almost No Buggy Minimal No
  • Works in Opera Mobile 10 (exactly as on desktop), but the calendar widgets are pretty hard to use, especially since you can’t zoom in on them.
  • The widgets have been improved in Opera 11.5, but I can’t fill in a time. and the month and week types show the same widget as the date type.
  • Nobody but Opera supports type="week".
  • BlackBerry PlayBook 2 lost support for type="month"; something that OS6 supported fine.
  • Firefox pops up the numeric keyboard but does not validate the results.
  • UC does nothing: it doesn’t even show the keyboard.
Property Opera Mobile Safari Android Symbian S40 Dolfin BlackBerry Palm Obigo MeeGo UC Firefox IE Mobile
Presto WebKit Gecko Trident
<input type="email">

Test page
Yes Minimal No OS6 No Fairly minimal No

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

  • Safari gives a customised keyboard but does not validate the field.
  • PlayBook 2 dropped support.
  • Firefox adds a red border around an input with an incorrect value, but doesn’t prevent the user from submitting it.
<input type="number">

Test page
Incomplete 5.0 buggy No Yes No Almost Yes Minimal No
  • Opera 10 gives a control, and that’s it.
  • Opera 11.5 validates the content of the field, but only internally: no error message is shown.
  • Android: Nexus One (2.3) pops up the numeric keyboard. HTC Legend (2.1) doesn’t.
  • Android 3.2 pops up a numeric keyboard, but doesn’t allow any non-number characters such as - and e (for exponents) to be entered. Its validation is thus too strict.
  • Obigo WebKit disallows characters (correctly), but does not automatically switch to the numeric keyboard.
  • Firefox and Safari 3.2 pops up the numeric keyboard but do not validate the results.
<input type="range">

Test page
Yes 5.0 Buggy No Yes No Yes Buggy No

Shows a slider. On touchscreen phones you have to tap; not slide. Except on iOS, where you first have to tap the slider button and then you can slide it. This interaction is not up to Apple’s usual high standards.

  • Android 3.2 and UC don’t show any interface at all. Not even a default text box.
Property Opera Mobile Safari Android Symbian S40 Dolfin BlackBerry Palm Obigo MeeGo UC Firefox IE Mobile
Presto WebKit Gecko Trident
<input type="tel">

Test page
No Minimal No Minimal No Minimal Buggy Minimal No

The spec says this type should do nothing special. Browsers assidiously comply. But some sort of validation would be possible here, right?

  • Android: 2.3 and 3.2 pop up the numeric keyboard. HTC Legend (2.1) doesn’t.
  • BlackBerry restricts input, but that’s it.
  • Firefox and MeeGo pop up the numeric keyboard but do not validate the results.
  • Safari gives a customised keyboard but does not validate the field.
  • UC does nothing: it doesn’t even show the keyboard.
<input type="url">

Test page
Probably Minimal No OS6 No Buggy Fairly minimal No

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.

  • Safari gives a customised keyboard but does not validate the field.
  • PlayBook 2 dropped support.
  • UC does nothing: it doesn’t even show the keyboard.
  • Firefox adds a red border around an input with an incorrect value, but doesn’t prevent the user from submitting it.
Property Opera Mobile Safari Android Symbian S40 Dolfin BlackBerry Palm Obigo MeeGo UC Firefox IE Mobile
Presto WebKit Gecko Trident

Attributes

Property Opera Mobile Safari Android Symbian S40 Dolfin BlackBerry Palm Obigo MeeGo UC Firefox IE Mobile
Presto WebKit Gecko Trident
autofocus

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

The browser automatically focuses on this field when the page is loading but does not pop up the software keyboard. Actually this is the best possible implementation on pure touchscreen devices — if you want to implement it at all.

multiple

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

Allows users to upload multiple files at once.

One problem on mobile is that the interface is not suited for selecting more than one file at a time.

pattern

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

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

  • PlayBook 2 dropped support.
  • Firefox adds a red border around an input with an incorrect value, but doesn’t prevent the user from submitting it.
placeholder

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

Firefox doesn’t allow use of the Backspace in form fields, so I cannot complete this test (removing value and seeing if placeholder reappears).

readonly

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

User cannot enter a value in the form field.

required

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

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

  • PlayBook 2 dropped support.
step

Test page
Yes No OS6 No No
<input type="number" step="3">
  • Field controls in Opera 10 are too small; I can’t click on them. They’re there, though.
  • PlayBook 2 dropped support.
Property Opera Mobile Safari Android Symbian S40 Dolfin BlackBerry Palm Obigo MeeGo UC Firefox IE Mobile
Presto WebKit Gecko Trident

Browsers

Opera Mobile
10.1 and 11.5 on Android 2.3 on Nexus One
10.0 on Symbian N8 (pre-Anna)
Safari
3.2 on iPhone 3G
5.01 on iPad 2
Android
2.3 on Nexus One
2.1 on HTC Legend
3.2 on Packard Bell (Acer) tablet
Symbian
Nokia WebKit 3 on N8 (pre-Anna)
S40
Nokia WebKit 1 on X3-02
Dolfin
on Samsung Wave I (bada)
BlackBerry
BB Torch (OS6)
BB PlayBook 2 (call it OS 7.5)
Palm
on Palm Pre 2 (2.0)
Obigo
on HTC Smart (Brew MP)
MeeGo
Nokia N950
UC
Android 2.3 on Nexus One with acceleration off
Firefox
8.0 on Android 2.3 on Nexus One
IE
9 on Nokia Lumia 800