Combo Boxes

One field type that you get in a lot of programs is missing from HTML. The missing field is the combo box. A combo box is a combination of two field types into one - the input field and the selection list. It is because it is effectively two fields combined together that it gets the name combo box.

We can't produce a proper combo box in html because we can't actually incorporate the input and selection fields into one field. The closest that we can achieve is to place the input text field immediately above the selection drop down list and use a couple of Javascript statements to get the two fields working together as a combo box. Here is an example where we want our visitor to specify the state that they live in. The drop down list includes all of the states (and the most common territories) within Australia but the combo box also caters for visitors from outside of Australia who can manually type their state into the text field.



So how do we create the combo box? Well here's the code for the one I have above:

<div style="background:#cccccc;border:solid 1px #000000">
<input type="text" name="state" value="" size="10" /><br />
&nbsp;&nbsp;<select name="s" size="1"
onchange="document.ex.state.value = document.ex.s.options[document.ex.s.selectedIndex].value;document.ex.s.value=''">
<option value=" " selected="selected">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

<option value="ACT">ACT</option>
<option value="NSW">NSW</option>
<option value="NT">NT</option>
<option value="QLD">QLD</option>
<option value="SA">SA</option>
<option value="TAS">TAS</option>
<option value="VIC">VIC</option>
<option value="WA">WA</option>


To create your own combo box for whatever you want to use it for all you have to do is to copy the above code and substitute your selectable values for the ones shown in italics. You might also need to adjust the number of non-breaking spaces if you adjust the text field width to get the two fields to align properly.

So I guess it doesn't matter too much that HTML left out the combo box from their list of form fields because you can always create your own.


This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow