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.

Check box, para seleccionar uno o más elementos

Check box, para seleccionar uno o más elementos

Los radio buttons para escoger entre una sola opción de un grupo de elementos.

Radio buttons, para seleccionar una sola opción

Radio buttons, para seleccionar una sola opción

Las cajas de selección o select box que muestran por defecto una sola opción pero permiten escoger otras hacemos clic sobre ellas.

Cuadro de selección o select box

Cuadro de selección o select box

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.

Selección múltiple en un select box

Selección múltiple en un select box

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.

Selección múltiple con check box

Selección múltiple con check box

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í

1. ¿Cuáles de estos periódicos lees?




...

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.

Pin It on Pinterest

Share This