1. Computing

Site Navigation

7. Combo Box

clr gif

Strangely, HTML doesn't provide a combo box so in order to use one for our navigation we must first create one. For those of you who don't know what a combo box is, 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 territiories) within Australia but the combo box also caters for visitors from outside of Australia who can manually type their state into the text field.

State

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
continued from previous line1px #000000">
<input type="text" name="state" value=""
continued from previous line size="10" /><br />
&nbsp;&nbsp;<select name="s" size="1"
onchange="document.ex.state.value = document.ex.s.options[document.ex.s.selectedIndex]
continued from previous line.value;document.ex.s.value=''">
<option value=" " selected="selected">&nbsp;&nbsp;&nbsp;&nbsp;
continued from previous line&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
continued from previous line&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</option>

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

</select></div>

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.

The final step is to adapt the combo box so that we can use it as a Combo Navigator. We'll look at how to do this next.

1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9

Note that the script and the descriptions of the functions that it contains are rewritten from the "Ask Felgall" website with the permission of the copyright owner.

Related Video
Creating Webpage Frames

©2014 About.com. All rights reserved.