XForms-Tiny Testbed - combo boxes

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 explores an extension to the select element to allow users to type values as an alternative to picking from a list.

Try looking at the drop down list, then click on the "E" button (E for edit) and type mangoes. If you click on the "E" button again then the selection box will reappear and you can verify that mangoes is now in the list. Please view the forms-lite script for more details on how this works.

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>
<select name="fruit" id="f1" editable="12">
<option>apples</option>
<option>pears</option>
<option>bananas</option>
<option>pineapple</option>
</select>
</fieldset>
</form>

Comments

The presence of the editable attribute triggers the combo-box behavior. The value of the attribute sets the effective width of the text edit box and is mapped to the HTML4 size attribute on the input element. I tried getting double click to toggle between edit and select modes, but couldn't get it to work effectively across browsers. I also tried to ensure that when the field loses the focus, it is switched to the select mode, but this is proving harder to get right than I had thought. Extending the select element seems like a natural way to support editable selection lists (combo boxes), but another approach is to link an input element to a list of options. If scripting is disabled, that still allows users to type the value in. However, many rich web applications are very limited with scripting disabled, so that may not be such an important consideration. Furthermore, the noscript element could be used to provide a separate input element for users to type into.

The current experiment toggles between an input element and a select field. Another possible implementation would be to replace the select element with an input element and a drop down list based upon a positioned div element. This is something that could easily be customized.

Dave Raggett <dsr@w3.org>