La selección múltiple de elementos suele ser un dolor de cabeza la hora de trabajar con formularios. Por defecto el HTML nos da tres elementos para diseñar la interacción del usuario con opciones cerradas:
La casilla de verificación o check box, que se utiliza cuando el usuario puede escoger más de una opción de un grupo de elementos.
Los radio buttons para escoger entre una sola opción de un grupo de elementos.
Las cajas de selección o select box que muestran por defecto una sola opción pero permiten escoger otras hacemos clic sobre ellas.
Cuando tenemos muchas opciones para ofrecerle al usuario normalmente no queremos saturarlo y usamos el select para que vaya recorriendo el listado a su conveniencia. El problema es que si queremos ofrecerle la alternativa de elegir más de un ítem la forma de hacerlo es muy poco natural: el usuario deben presionar la opción y mantener presionada la tecla control.
Cuando hacemos uso de esta opción normalmente colocamos la referencia debajo ya que se trata de una opción mayormente desconocida. Para facilitarle un poco el proceso normalmente hacemos que el cuadro de selección se expanda hasta que muestre 2 o 3 opciones, con lo cual damos a entender que existe la alternativa de elegir más de un elemento.
Una solución sencilla que ofrece una mejor experiencia de usuario es emplear casillas de verificación con una barra de desplazamiento como el siguiente ejemplo.
Solamente hay que agregar un poco de CSS:
div.multiple {
height: 100px;
overflow: auto;
background:#eee;
border:5px solid #eee;
margin:0 0 1.5em 25px;
}
Y el HTML quedaría algo así
Existen otras soluciones más sofisticadas como usar Web Forms 2.0 o algún framework de JavaScript como jQuery, pero esta solución está bien para algo simple y sin agregar demasiado código.