I think multi-select lists are perfectly functional — just hold down the Ctrl key while clicking your mouse to pick multiple items from the list. This is an example of a multi-select:

Check your favorite fast food:

The code for that would look something like this:

<form method="get" action="">

<b>Check your favorite fast food:</b><br/>


<SELECT MULTIPLE SIZE=5 name="favorites">


<OPTION VALUE="McDonalds">McDonald's</option>


<OPTION VALUE="BurgerKing">Burger King</option>


<OPTION VALUE="Wendys">Wendy's</option>


<OPTION VALUE="JackInTheBox">Jack in the Box</option>


<OPTION VALUE="KFC">KFC</option>


<OPTION VALUE="TacoBell">Taco Bell</option>


</SELECT>


<br/><input type="submit" value="Choose">

</form>

The thing is, even when you put instructions on the page, there are still going to be users who don’t understand how to use the multi-select. Plus, there will be times when an additional caption for each item would be really helpful, and I’m not certain that can be achieved easily with a regular multi-select.

However, I do know that with a little bit of CSS and a tiny bit of JavaScript, you can produce a prettier multi-select list that will still create an identical URL to the regular multi-select. That way, none of your back-end code that processes the form has to change — all we’re doing is prettying up the front end.

You start with the CSS to create a little region wherein your new multi-select will scroll. We’ll give it a hover effect as well so, when you move over an item, the background color will change to highlight the current selection.

<style>

.checklist {


border: 1px solid #ccc;


list-style: none;


height: 10em;


overflow: auto;


width: 20em;


}.checklist, .checklist li { margin: 0; padding: 0; }


.checklist label {


display: block;


padding: 0 0.2em 0 25px;


text-indent: -25px;


}


.checklist label:hover { background: #777; color: #fff; }


* html .checklist label { height: 1%; }

</style>

For the JavaScript, you basically just want to create a URL that is identical to what the normal multi-select would do. Taking the above sample multi-select, the query string would look something like this:

?favorites=Wendys&favorites=KFC

So that’s what we have to emulate. This script simply takes the form object, loops thru looking for all the checkboxes, and builds up the URL for the ones that are selected. This particular script obviously only works for a form where all the checkbox elements live inside your new multi-select.

<script type="text/javascript">

function submitForm(f) {


var cb = f.getElementsByTagName("input");


var favorites = "favorites=";


var isFirst = true;  for (var i = 0; i < cb.length; i++) {


var curr = cb[i];


if (curr.type == "checkbox") {


// window.alert(curr.name + ": " + curr.type);


if (curr.checked) {


if (isFirst) {


favorites = "favorites=" + curr.name;


isFirst = false;


} else {


favorites = favorites + "&favorites=" + curr.name;


}


}


}


}


window.location = f.action + "?" + favorites;


}

</script>

And finally, the code for your new and slightly improved multi-select form:

<form method="get" action="">

<b>Check your favorite fast food:</b><br/>


<ul class="checklist">


<li><label><input type="checkbox" name="McDonalds" /><b>McDonalds</b><br/>I'm lovin' it</label></li>


<li><label><input type="checkbox" name="BurgerKing" /><b>Burger King</b><br/>Have it your way</label></li>


<li><label><input type="checkbox" name="Wendys" /><b>Wendy's</b><br/>Always fresh, never frozen</label></li>


<li><label><input type="checkbox" name="JackInTheBox" /><b>Jack in the Box</b><br/>If it doesn't get all over the place, it doesn't belong in your face</label></li>


<li><label><input type="checkbox" name="KFC" /><b>KFC</b><br/>Finger lickin' good</label></li>


<li><label><input type="checkbox" name="TacoBell" /><b>Taco Bell</b><br/>Think outisde the bun</label></li>


</ul>


<input type="button" value="Choose" onclick="submitForm(this.form);">

</form>

Unfortunately, the TechRepublic site has a lot of CSS going on, so when I tried putting this sample into the blog, it looked very ugly. I didn’t want to mess up the code by tweaking it just to compensate for the conflicts — I’m just trying to show the basics here. So, I posted a simple file with the code on my personal site, where you can see it in action.