This is part of a suite of test forms for Web Forms 2.0 for a set of shared examples with XForms Transitional. See the corresponding XForms Transitional example. This demo will only work on a Web Forms 2.0 compliant browser (e.g. Opera 9).
Here is the markup for the above form:
<script type="text/javascript"> function update() { var form = document.forms[0]; var maiden = document.getElementById("maiden-name"); if (form.gender[1].checked && form.married.checked) { maiden.style.display = "inline"; maiden.style.visibility = "visible"; } else { maiden.style.display = "none"; maiden.style.visibility = "hidden"; } } window.onload = update; </script> <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"> <span id="maiden-name"><label for="maiden">Maiden name</label> <input id="maiden" name="maiden"></span> </fieldset> </form>
By way of contrast the XForms Transitional markup for this example is the following:
<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>
Dave Raggett
<dsr@w3.org>
Copyright © 2007 W3C® (MIT, ERCIM, Keio), All Rights Reserved. W3C liability, trademark, document use and software licensing rules apply.