Web Forms 2.0 - combo boxes

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).

Selection fields you can type into

Here is the markup for the above form:

<form name="form1" onsubmit="false">
<fieldset>
<legend>Selection fields you can type into</legend>
<label for="f1">Favorite fruit</label>
<input name="fruit" id="f1" list="fruits">
<datalist id="fruits" xmlns="http://www.w3.org/1999/xhtml">
<option>apples</option>
<option>pears</option>
<option>bananas</option>
<option>pineapple</option>
</datalist>
</fieldset>
</form>

Where the style sheet includes the following rules:

/* for wf2 combobox aka datalist */
@namespace xh url(http://www.w3.org/1999/xhtml);
xh|datalist { display: none; }
datalist { display: none; }

The namespace declaration is a work around for existing browsers and enables the use of CSS to hide the datalist element and its contents on browsers that don't support WF2. Unfortunately the above technique fails to suppress the display of the text content for the option elements on Internet Explorer. A better work around would be to add a class attribute to the option elements and a matching CSS rule.

By way of contrast the XForms Transitional markup for this example is the following:

<form name="form1" onsubmit="false">
<fieldset>
<legend>Selection fields you can type into</legend>
<label for="f1">Favorite fruit</label>
<select name="fruit" id="f1" editable="12">
<option>apples</option>
<option>pears</option>
<option>bananas</option>
<option>pineapple</option>
</select>
</fieldset>
</form>

where editable is analogous to the input element's size attribute. A compatibility library generates an input element along with the means to toggle between it and the select element. If scripting is disabled, then the WF2 approach allows uses to type any value they want, while the XFT approach limits them to the predefined choices. With scripting enabled, both approaches can be made to work using a suitable compatibility library.

Dave Raggett <dsr@w3.org>