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' && married"/> </fieldset> </form>
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>Copyright © 2006 W3C® (MIT, ERCIM, Keio), All Rights Reserved. W3C liability, trademark, document use and software licensing rules apply.