Wednesday, October 22nd, 2008

Combo Boxes

One form field type that HTML does not provide is the combo box. Now if you disagree with that statement then you have misunderstood what a combo box is and are thinking of a drop down selection list as being a combo box – which it isn’t.

A combo box combines the functionality of a drop down select list and an input field so as to allow the person filling out the form to either select an entry from the list OR to enter their own value. HTML has separate form fields that provide each of the two parts of this functionality but does not provide a single field that can do both. These days you can use CSS to overlay one field on top of the other or use DOM calls to generate the appearance of a drop down list under an input field but at the time I wrote this article only the simplest of approaches was available and this solution simply updates the input field from the associated drop down using JavaScript. For cross browser compatibility this is still the easiest way of creating your own (almost) combo box.

Oops, prepared this post in advance and then I had an idea for how to create the appearance of a proper combo box using an input field and a list instead of an input field and a select. So I created a script based on my new idea and forgot to come back and update this post. Compare my original idea for the combo box with my new modern combo box script.

Original Combo Boxes

Be Sociable, Share this post with your friends.

    Tags: , ,

    Comments are closed.