Select List or ComboBox

A lot of people appear to get these two elements mixed up - perhaps because for many years it wasn't easy to actually add a combobox on the web. Everywhere except on the web these two completely different form element types have been readily distinguished by their names but the lack of a combobox construct for the web prior to it being added in HTML5 has resulted in many people referring to select lists as combo boxes even though they don't combine anything and so are not a combo.

Both a select list and a combo box have a dropdown list where a number of options are displayed allowing the person sung the form to select the option they want. Where a combobox differs from a select list is in how they handle when the option the person wants to select isn't listed. The best that can be done with a select list is to include an option "Other" for people to select when none of the other options apply. You either leave it at that where you then don't know what their other value actually is or you provide a separate input field that is only used when "Other" is selected in order to allow that value to be entered.

Where the combobox comes in is that it takes this one step further by combining the select list and the other input field into the one form field doing away with the need for people to select "Other" in order to be able to input their desired value. Instead they can simply type their own value into the combobox if the values the combo box lists do not include the required option.

One simple example of using a combobox would be for when you want to collect the name of the state where someone lives. Suppose that almost but not all of the people you expect to be filling out the form live in Australia (since Australia only has 6 states and so provides a shorter example than say the USA where there would be 50 to include in the list). So we have or six options covering the six Australian states and for that one or two people who live in the USA they can still enter their state into the combobox even though it isn't one of the combobox options.

Here's the code you would use for this particular combobox:

<div><label for="cb">Combobox : </label><input type="text" list="state"/>
<datalist id="state">
<option>New South Wales</option>
<option>South Australia</option>
<option>Western Australia</option>

And here's what the combobox looks like on the page:


This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow