XForms-Transitional 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-Transitional script for more details on how this works.

Here is the markup for the above form:

<form name="form1" onsubmit="false">
<fieldset>
<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"/>
</fieldset>

Comments

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.

Safari's Date object has a bug that doesn't decrement the year when you decrement the month from January (0), although it handles incrementing the year correctly when the month is incremented from December (11). Another Safari bug is that stopPropagation() also acts as preventDefault() for the keydown event.

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.

What if scripting is turned off?

If scripting is turned off, the scripting library won't be able to apply the validation constraints or to refresh calculated fields. A work around is to provide a submit button to allow these function to be carried out by the server. To ensure that this button is only visible on browsers with scripting turned off, you should enclose the button in a noscript element, e.g.

<noscript>
  <button name="refresh" value="now">Refresh Form</button>
  <input type="hidden" name="noscript" value="true" />
</noscript>

The hidden field allows the server to determine that scripting has been disabled, and hence change the behavior it applies to submitted forms. A open source scripting library module could be provided to apply the semantics of the XForms-Transitional features used on the page that submitted the form.

Dave Raggett <dsr@w3.org>