XForms-Tiny Testbed - export to XForms

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 focuses on mappings to XForms using the examples from XForms for HTML Authors.

Comments

The export library supports two ways to associate a label with a group of radio buttons or checkboxes. One is to use an enclosing fieldset element together a legend ellement. The other is to use a label element, whose for attribute references the name of the group rather than the id of a particular field.

The markup for the above form is:

<form action="http://example.com/search" method="get" onsubmit="false">
<!-- simple text field with label -->
<p>
<label for="f1">Find</label>
<input id="f1" type="text" name="query"/>
</p>

<!-- text area element with label -->
<p>
<label class="top" for="f2">Message</label><br/>
<textarea id="f2" name="message" rows="4" cols="60"></textarea>
</p>

<!-- grouped radio buttons -->
<fieldset>
<legend for="gender">Gender</legend>
<input id="f3" type="radio" name="gender" value="male">
<label for="f3">Male</label>

<input id="f4" type="radio" name="gender" value="female">
<label for="f4">Female</label>
</fieldset>

<!-- grouped checkboxes and associated label -->
<p>
<label for="flavor"
title="go on, spoil yourself">Flavors</label>
<br/>
&nbsp;&nbsp;&nbsp;
<input id="f5" type="checkbox" name="flavor" value="vanilla">
<label for="f5">Vanilla</label>

<input id="f6" type="checkbox" name="flavor" value="strawberry">
<label for="f6">Strawberry</label>

<input id="f7" type="checkbox" name="flavor" value="chocolate">
<label for="f7">Chocolate</label>
</p>

<!-- independent checkbox -->
<p>
<label for="f8">Are you married?</label>
<input id="f8" type="checkbox" name="married" value="married">
</p>

<!-- select one choice from list -->
<p>
<lable for="f9">Drink:</label>
<select id="f9" name="drink">
   <option selected value="none">None</option>
   <optgroup label="Soft drinks">
      <option value="water">Water</option>
      <option value="milk">Milk</option>
      <option value="juice">Juice</option>
   </optgroup>
   <optgroup label="Wine and beer">
      <option value="red">Red Wine</option>
      <option value="white">White Wine</option>
      <option value="beer">Beer</option>
   </optgroup>
</select>
</p>

<!-- submit button -->
<input type="submit" value="Submit to website">
</form>

Dave Raggett <dsr@w3.org>