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 experiment provides an example of an expenses claim form. Use your browser to view the source for a look at the underlying markup.
This is something most commonly encountered as a spreadsheet. An online web-based version would help to reduce the errors often encountered in submitting paper copies of spreadsheets. In principle, a web-based editing tool should also be cheaper to use than conventional spreadsheets which rapidly become complex and costly to maintain.
A more complete example would allow you to search for an existing expense claim or to create a new one. A button might also be provided to identify the employee number by a database lookup from the employee name using Ajax to avoid reloading the page. Alternatively, this could be generated server side based upon the user's name and password when the user logged into the system.
The example has a fixed number of rows, but it might be nice to automatically append a blank row whenever the last row is filled in. Alternatively, there could be some kind of customizable user interface for adding, deleting or moving rows.
Fields may be marked as required according to some expression. In this case, the date, description and category fields must be filled out if there is an associated amount. Currently this is only checked upon form submission, although the highlighting is cleared whenever a value is filled in for a missing field. The highlighting for the label is only cleared when all of the associated fields are okay.
The form makes checks for missing values when you press the submit button. The fields are marked as invalid and shaded via CSS. What should the user interface be for clear
I have left off calculations of sales tax (value added tax) as this can be done server-side, using the expense category to determine which items incur the tax. I have also left off fields for the line manager and her signature since these would be handled differently using an online system compared with a paper based system.
I plan to add a related example for claims in other currencies. That brings with it the notion of a default exchange rate for cash purposes which can be overridden e.g. for credit card transactions. Another feature would be to compute the exchange rate when the user enters values for both the foreign and own currency.
When the window width is reduced, some browsers break the line between the input field and the button for the date picker. This makes the table hard to use. The style sheet sets the white-space property to nowrap to inhibit this.
Dave Raggett <dsr@w3.org>Copyright © 2006 W3C® (MIT, ERCIM, Keio), All Rights Reserved. W3C liability, trademark, document use and software licensing rules apply.