HTML5 forms (and IE10 (Mobile))

One of the many improvements introduced by HTML5 is around forms, users hate filling forms and developers hate validating the data submitted. HTML5 makes these tasks a lot simpler.
In this article I will not talk about what HTML5 added, but I will rather focus on what is new in IE10 mobile, i.e. the browser that comes with Windows Phone 8. At the end of the article I have collected a few useful links that cover HTML5 forms at large and provide more examples and complete support tables. All the code examples are meant to be cross-browser, unless specified.

What’s new in IE10

IE10 and IE10 mobile are substantially the same browser. In I will try to highlight some different behaviors often determined by the different hardware configurations and environments. To give you an idea consider the input element, it now supports a new state for the type attribute: “number”; if you are using a PC with a full keyboard you will not see any difference, but if you are using a device like the Lumia 920 with a virtual keyboard, that keyboard will only show you numbers. Try using the “tel” state and the keyboard will show numbers, the plus sign, the dash and the space. These simple enhancements will make the life of your users a lot easier. This different behavior in different environments is true for pretty much all browsers and all OS’s.

As of today, IE10 implements most of the HTML5 spec related to forms and in fairness none of the current browsers covers 100% of the spec. The good news is that all modern browsers have wide coverage and they all degrade gracefully when something is not yet supported.

What doesn’t work

As mentioned there are a few things that are not yet implemented and I suggest you check can I use for more details on cross-browser support and look at the official Microsoft documentation for the specifics of IE10.
Although IE10 supports most of the improvements to forms it does not support the output element, Microsoft doesn’t clearly state if it supports it or not, so I thought I would clarify. Custom validation error messages are supported in Windows 8, but not on mobile. Custom validation error messages are not supported in iOS 6 or Safari 6. Similarly, the datalist element works in Windows 8, but not on Windows Phone 8.
HTML5 defines a number of new properties for the input element such as valueAsNumber, stepUp and stepDown, Microsoft’s documentation says they are supported, but I could not get any of these to work on either Windows 8 or WP8.
Either way, there is no reason for you not to use it as it degrades gracefully and we can expect that it will be implemented at some point.

Update: The stepUp and stepDown methods actually work when the input type state is “range”.

How does it compare to other mobile OS’s?

Here is a quick summary table of the features that are not consistent across different OS’s. I recommend that you look on can I use for more details and of course always test on real devices.

Feature	IE10 on WP8	IE10 on Win8	iOS5 & 6	Android 4.1.1	Chrome 18 on Android
Date	NO	NO	YES	NO	YES
Progress	YES	YES	NO	NO	YES
Output	NO	NO	YES	YES	YES
Datalist	NO	YES	NO	NO	NO
Custom error	NO	YES	NO	NO	YES
valueAsNumber	NO	NO	YES	YES	YES
stepUp and stepDown	NO	NO	YES	YES	YES

A real world example

I built a simple form covering some of the new features of HTML5 forms. First of all I wanted to show how the new elements and attributes behave in IE10 mobile and how some gracefully degrade. This is how it looks like in Chome 22 (probably the most complete implementation today) and how it looks like on a Lumia 920.

You can try it yourself at http://logme.mobi/html5/form.html. Look at the code and feel free to take what you need, but don’t expect accurate error checking and validation unless it’s specifically useful for this article.

As you can see the placeholder texts are there, some fields are surrounded with a red glow and some with a green one, these are defined in CSS using pseudo classes for required and optional fields. You might have noticed that Chrome shows a placeholder for the birthday field, that’s because the browser correctly interprets the “date” state for the type attribute of the input element, but on IE10 mobile this field is treated like a normal text field (the expected graceful degradation).
This is how I defined the input field for the name:

<input type="text" id="name" name="name" placeholder="John Doe" required>

And this is how I defined the input field for the birthday:

<input type="date" id="bday" name="bday">

And my pseudo-class for the required fields, notice that I still defined the prefixed versions, mostly for mobile (read more about box-shadow support on can I use):

:required {
 border-color: #88a;
 -webkit-box-shadow: 0 0 5px rgba(0, 0, 255, .5);
 -moz-box-shadow: 0 0 5px rgba(0, 0, 255, .5);
 -o-box-shadow: 0 0 5px rgba(0, 0, 255, .5);
 -ms-box-shadow: 0 0 5px rgba(0, 0, 255, .5);
 box-shadow: 0 0 15px rgba(0, 0, 255, .5);
}

 

If you use a lot Chrome or Safari you might be familiar with the little widget on the far right of the “Donation” field. As I was writing my example and testing I quite liked the functionality of it. When testing on IE10 and later checking the spec I realized that this is an extra that Chrome adds. HTML5 adds instead two new methods of the “input” element named stepUp and stepDown and the developer is left with the burden to implement it, but also the freedom of designing it as he wishes. Either way all browsers evaluate the value correctly. Since I define a “min” and a “step”, the value will be considered invalid until the user enters a multiple of 10. If you test on your Windows Phone 8 device you will see that the surrounding color will change from red to green if you enter for example the number 20. Look at the source code to see the CSS pseudo-classes. This is the markup I used to define the input field:

<input type="number" id="donation" name="donation" required 
  min="10" step="10" title="Type the amount, only multiples of 10"
  oninput="test_output.value=donation.valueAsNumber+10">

Chrome 22 on Mac:

IE10 mobile on a Lumia 920:

Creating a widget to handle the stepping is very simple. Below is an example I wrote using two buttons and a JavaScript function that invokes the .stepUp(n) and .stepDown(n) methods where “n” is the number of steps you want to increment or decrement the value of the field:

[...]
<input type="number" id="donation" name="donation" required min="0" 
  step="2" title="Enter an even number between 0 and 10">
<button type="button" id="stepUp" name="stepUp" 
onclick="step('up')">Add 10</button>
<button type="button" id="stepDown" name="stepDown" 
onclick="step('down')">Subtract 10</button>
[...]


function step(action) {
  var donation = document.getElementById('donation'),
    min = donation.getAttribute('min');

  if(isNaN(donation.valueAsNumber)) {
    donation.value = min;    return;
  }

  // the actual stepping up or down, 1 is the number of steps
  (action=='up') ? donation.stepUp(1) : donation.stepDown(1);
}

As you can see I used valueAsNumber in both example. This is another handy addition of HTML5, unfortunately I could not get it to work in IE10, of course you can always use .value.

Next I want to show the “progress” element, in this example I used a very simple JavaScript function to change the value attribute of the progress element and hence change the look of the bar based on how many fields the user has filled.

I did not go into the detail of verifying if the values are valid, it’s really just to show how the browser animates the bar. You can use the CSS3 property “animation-name” to switch between the default (a bar) and a ring. This is the HTML:

<progress id="progBar" value="0" max="100">0%</progress>

Input type states like email, number and tel affect the virtual keyboard layout. As you would expect the keyboard for email is the standard virtual keyboard with the “@” symbol immediately available, on the other hand, using the “number” type a keypad is displayed and using the “tel” type a keypad with digits, the plus sign, space and dash are displayed. Very handy, see the screenshots here:

You might also have noticed the little JavaScript that is executed in the “donation” input field, if the browser supports it it will update the value of the output element. In IE10 it degrades gracefully and always shows the default value.

Continue reading

This article covers most of the new implementations in IE10, but not everything. I have collected more resources that I think are very valuable, if you haven’t read them yet, I strongly suggest you do it now.

• Making forms fabulous with HTML5 by Jan Kleinert
• A form of madness by Mark Pilgrim as part of Dive into HTML5
  • HTML5 form validation
• PPK’s “HTML5 tests – inputs“, i.e. support table
• For cross-browser support information, check out the always great can I use
• The current state of HTML5 forms @ wufoo

Microsoft has a lot of documentation specific for IE10, I found these articles particularly useful:

• HTML5 forms
  • Progress element
• A very complete example of what is supported in IE10
• Download the full source code of a forms controls sample
• CSS3 animations in IE10

 This article is cross-posted on Nokia Developer.