Combo Boxes

The most commonly available form field type available in most computer desktop applications but missing from HTML 4 is the combo box. While some desktop applications provide for sliders and date and colour pickers etc which HTML 4 also doesn't have, those particular form fields have no standard way that they are implemented and their exact appearance and function varies between applications and operating systems. The combo box though is a relatively basic form field type that just combines an input field and a drop down list and so is implemented in basically the same way in all the desktop applications that use it.

Until now, the only way to achieve an equivalent of a combo box in your web forms has been to use JavaScript to attach a list to an input field. This works for those that have JavaScript enabled but leaves everyone else with just an input field and no select list.

One of the proposed changes for HTML 5 is to add a number of the form field types missing from earlier versions of HTML. While the slider, date and colour picker etc form field types that are being added leave it to the browser to decide exactly how to implement the functionality, the combo box will be able to be defined entirely in HTML and will then function as you'd expect a combo box to function in all browsers that support this particular HTML 5 construct.

The HTML code for a combo box is relatively straightforward. Since a combo box combines an input field and a select list the HTML for a combo box starts with an input field exactly the same as is allowed by earlier versions of HTML and then adds options to it just like you'd have in a select list. In order to distinguish that this is one combo box field and not an input field followed by a select the HTML replaces the select tag with a datalist tag and adds a list attribute to the input field to specify that the datalist belongs to the input field.

For example:

<input type="text" list="state">
<datalist id="state">
<option value="act">
<option value="nsw">
<option value="nt">
<option value="qld">
<option value="sa">
<option value="tas">
<option value="vic">
<option value="wa">

With the datalist in this particular example loaded with the states and territories of Australia we allow those living in Australia to select their state from the select list while allowing those outside australia to still enter their state in the input field just as a combo box is intended to allow.


This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow