Combo Box or Selection List

Anyone who has ever worked with form creation anywhere other than the web knows that these are two completely different types of form field. You can enter whatever you like in a combo box if you don't like any of the selections in the list whereas a selection list forces you to choose between what is on the list.

Those who have only ever created forms for the web tend to get the two terms confused - probably because prior to HTML 5, HTML did not implement a combo box form field. Those with no experience of combo boxes observed the references to being able to select from a list and simply assumed (incorrectly) that it was just another name for a selection list.

In fact if you attempt to create a real combo box by adding some JavaScript to HTML 4 then you will not use a selection list at all. The most important feature of a combo box is the ability to enter whatever you like rather than be limited to entries in a list and so a text input field is the obvious starting point since that doesn't prevent those without JavaScript from entering whatever they want. To the text input you would add a list of the values that can be displayed in the drop down part of the combo box. You'd then use JavaScript to attach the list to the text input.

With HTML 5 a combo box still has the text input but now instead of using JavaScript to attach a list we use HTML to attach a datalist containing options (just the same way that a selection list contains options). This means that our HTML 5 combo box more accurately reflects to combination of an input field and a selection list (which is why it is called a combo box) than the code you'd use to try to emulate on in older versions of HTML.

Perhaps now that HTML 5 has actually implemented the combo box form field those who have previously confused it with a selection list will at last see that they are in fact two different field types.

Oh, and where I mentioned that you can enter whatever you like into a combo box, that is in the same sense as applies with other input text fields. Just what values would be accepted will be determined by the server side validation of the field once the form has been submitted.

For those of you who still don't know what a combo box is, here's a combo box that allows Australian residents to select their state from the list while allowing people from elsewhere to enter their state directly into the combo box.

<input type="text" list="state">
<datalist id="state">

Here's what such a combo box looks like in action (assuming your browser supports the new HTML 5 datalist tag:


This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow