Web Forms 2.0 - radio buttons

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>