Inside Technique : Multiselect Checkboxes and Listboxes
The implementation for handling multiple selection in browsers today using list-box is not very friendly. Novice users need to know to hold down the ctrl or shift key to make multiple selections. In this article, we present a very simple alternative to multi-select list boxes that requires you to make no changes on the server. This alternative has always been apart of HTML but often overlooked by web authors.
First, let's quickly look at a multi-select list box. Multi-select list boxes
are created with the HTML SELECT element. To enable multiple selections you need
to specify two attributes, the MULTIPLE attribute and a SIZE with the value greater
To select multiple items, you need to hold down the control key for each selected item after the first one. While experienced users are familiar with this user-interface paradigm, for many new users this is not very discoverable.
The alternative is very simple. When you want to create a multi-select element,
you create a set of check boxes instead of a list box. When you specify the check
boxes give them all the same name. Rewriting our select box above:
This solution creates a different user-interface that accomplishes
the same result as the multi-select list box. The real benefit to this alternative
is that this is really just a user-interface change that can simplify
forms for novice users. The server receives the
same values in both cases. The key to this is to make sure all
your check boxes are given the same name.
When the form is submitted to the server, it creates a set of name-value pairs.
So if you were to select option 1 and option 3 from the list box or the check boxes,
the server would receive the following information:
This approach works very well when the number of choices being presented is not very large. For very long lists, this easier user-interface needs to be weighed against the possible clutter of having a large number of check-boxes.
Page 1:Multiselect Checkboxes and Listboxes
© 1997-2000 InsideDHTML.com, LLC. All rights reserved.