XForms-Tiny Testbed - initializing fieldsets

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 demonstrates how repeating groups of fields can be initialized by including the fields within the fieldset element. In this case only the first two rows are provided and the remaining two rows of the four specified by the repeat attribute are automatically cleared.

Try entering some numbers for the number purchased and the prices per unit and the total price should be updated as the focus leaves the changed field. Please view the XForms-Tiny script for more details on how this works.

Here is the markup for the above form:

<form name="form1">
<fieldset name="lineItem" repeat-number="4">
<legend>Repeating groups of fields</legend>
<label for="item">Product Name</label>
<label for="quantity">Number Purchased</label>
<label for="unitprice">Price Per Unit</label>

<!-- first row -->
<input name="item" datatype="text" title="product name" value="a"/>
<input name="quantity" datatype="number" title="number purchased" value="10"/>
<input name="unitprice" datatype="number" title="price per unit" value="1"/>

<!-- second row -->
<input name="item" datatype="text" title="product name" value="b"/>
<input name="quantity" datatype="number" title="number purchased" value="2"/>
<input name="unitprice" datatype="number" title="price per unit" value="3"/>

<!-- any remaining rows will be generated dynamically so that
 there is always at least the number of rows given by repeat-number -->
</fieldset>

<p><label for="total">Total price</label>
<input name="total" readonly="readonly"
 calculate="sumover(lineItem, quantity*unitprice)"/>
<button type="submit">Submit</button>
<button type="reset">Reset</button></p>
</form>

Comments

The library expects a set of fields and matching labels. This is transformed into a table with the minimum number of rows taken from the repeat-number attribute on the fieldset element. This ensures that the labels are aligned with the corresponding columns. Note that there must be a label for each field in the template. A name attribute may be given with the fieldset for use in mapping the form data into an XML data model.

The meaning for attribute on the label attribute is widened from HTML4. If there isn't a matching id value, then the for attribute value is matched against field names as given by the name attribute. This essentially binds the label to a set of fields with the same name, i.e. to a column. The scope is that of the nearest enclosing fieldset element or if that isn't present, the enclosing form.

The number of columns is taken from the number of distinct names found. If there are multiple fields with the same name, then they are used to initialize the corresponding column. It is inappropriate to use radio buttons within repeating fieldsets and you should instead use select elements when a given field has a predefined set of alternatives.

The library currently only supports a fixed number of rows, but in principle, there could be methods to append a new row and to delete an existing row. This assumes a user interface for invoking these functions. It might be simpler to automatically add a new row when the last row is filled out.

By default the data will be submitted URL-encoded as per the HTML4 specification. In principle, attributes on the form element could be used to submit the data as XML using Ajax, where the fieldset element name appears in the XML data.

Another approach for initializing form fields would be to add an attribute to the form element for a URI that is used with Ajax to load the form data as XML or JSON. Both approaches will be implemented as further extensions to the forms-lite testbed.

A related issue is how to initialize the data after a "back" or "reload" operation. This isn't a problem if the data is included in the page's markup, and only occurs when the fields are generated automatically. Ideally, there would be a way for web page scripts to access the history state for the current page as this would allow the script to restore the state for dynamically generated markup.

Dave Raggett <dsr@w3.org>