XForms-Tiny Testbed - radio buttons

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 the use of radio buttons to determine the relevancy of other fields. Activating female shows a text box to allow you to enter your maiden name.

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>
<legend>Combining different kinds of fields</legend>
<label for="male">Male</label>
<input id="male" name="gender" type="radio" value="male" checked="checked"/>
<label for="female">Female</label>
<input id="female" name="gender" type="radio" value="female"/>
<label for="married">Married?</label>
<input id="married" name="married" type="checkbox" value="married"/>
<label for="maiden">Maiden name</label>
<input id="maiden" name="maiden" relevant="gender=='female' &amp;&amp; married"/>
</fieldset>
</form>

Comments

You will only be asked for your maiden name if you have indicated that you are female and that you are married. Note the need for escaping & < and > in expressions.

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, and I have provided a work around based upon the onclick event.

Dave Raggett <dsr@w3.org>