XForms-Tiny Testbed - referring to fields within 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 shows how calculations can refer to fields within a named fieldset.

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 class="address" name="billto">
<legend>Billing Address</legend>
<label for="f1">Street</label>
<input id="f1" name="street" value="1280 Buena Vista"/>
<br />
<label for="f2">City</label>
<input id="f2" name="city" value="Palo Alto"/>
<br />
<label for="f3">State</label>
<input id="f3" name="state" value="California"/>
<br />
<label for="f4">Zip code</label>
<input id="f4" name="zipcode"/>
<br />
</fieldset>

<p><input id="f5" name="difship" type="checkbox" value="needed"/>
<label for="f5">Ship to a different address</label>
<br clear="all"/></p>

<fieldset class="address" name="shipto" relevant="difship">
<legend>Shipping Address</legend>
<label for="f6">Street</label>
<input id="f6" name="street" value="46 Main Street"/>
<br />
<label for="f7">City</label>
<input id="f7" name="city" value="Redwood City"/>
<br />
<label for="f8">State</label>
<input id="f8" name="state" value="California"/>
<br />
<label for="f9">Zip code</label>
<input id="f9" name="zipcode"/>
<br />
</fieldset>

<p><label for="f10">Will be shipped to</label>
<input id="f10" name="shipCity" readonly="readonly"
 calculate="difship ? shipto.city : billto.city"/></p>
</form>

Comments

HTML's forms object model assumes a flat namespace. You must therefore avoid giving a fieldset the same name as an input or select element. The use of "." to delimit compound field names is consistent with JavaScript. If the XPath syntax were adopted, the delimiter would instead be "/", and another operator would need to be used for division. My guess is that most web developers would prefer the JavaScript syntax, given the ability to call JavaScript functions and to access JavaScript global variables from within forms-lite expressions. However, this is worthy of further study.

Internet Explorer doesn't raise the onchanged event for radio buttons and checkboxes until the focus is moved away from them. This is unlike other browsers. My work around is to treat the onclick event in the same was as onchanged if the browser is IE.

Dave Raggett <dsr@w3.org>