XForms-Tiny Testbed - data types

This is part of a series of cross-platform experiments in incremental extensions to HTML4 forms that provide a stepping stone towards the much richer capabilities in XForms. This particular experiment extends the input element's type attribute to support a small set of data types including number and date along with an associated drop-down date picker. The datatype attribute is used below as an alternative to "type" to ensure compatibility with Opera Mobile.

Please view the xforms-tiny script for more details on how this works.

Typed fields

Here is the markup for the above form:

<form name="form1" onsubmit="false">
<legend>Typed fields</legend>
<label for="f1" title="must be a number">Number</label>
<input id="f1" name="x" datatype="number"/>
<label for="f2" title="must be a date">Date</label>
<input id="f2" name="y" datatype="date"/>


The type is checked when the form is loaded and whenever the field is updated. For numbers, the JavaScript eval function is called and the resultant type is then checked. For dates, a new Date object is created and converted to a number. This results in NaN (not a number) for invalid dates.

The JavaScript date parser is a little limited compared with most spreadsheets, e.g. it fails to parse "23-jan-06", "23-jan-2006" and "23rd January 2006" although "23 Jan 2006" is fine. It might be worth doing some preprocessing in the library to make the date type more forgiving of varations in what people type. Dates are normalized with the weekday and month name, which avoids the ambiguity inherent in the nn/nn/nnnn format returned by JavaScript's toLocaleDateString function. This makes it necessary to localize the library to tailor the date format to the web page's locale.

The date picker provides an alternative to typing the date directly. Sometimes it will be easier to type the date, for example, if you don't have access to a mouse or track pad. The Enter key can be used to show and hide the data picker when the associated button to the right of the date field has the input focus. Note that the date picker makes use of an image which is linked from the script and can be customized as needed.

I have used datatype in place of type as unfortunately Opera Mobile returns "text" for types it doesn't know about, whether you access the type property on the field or call getAttribute. Opera 9 also also treats unknown types in this way, but has built in support for number and date. Ideally, Opera would return the author supplied value for date when calling getAttribute as that would give scripts the chance to implement new types.

Dave Raggett <dsr@w3.org>