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

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

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

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

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

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í

<form id="form1" method="post">
 
<strong>1. ¿Cuáles de estos periódicos lees?</strong>
<div class="multiple">
                <label><strong>Nacionales</strong>
                <input name="items[]" type="checkbox" />
                Ámbito Financiero</label>
                <br />
                <label><input name="items[]" type="checkbox" />
                Clarín</label>
                <br />
                <label><input name="items[]" type="checkbox" />
                Crítica</label>
                <br />
                <label><input name="items[]" type="checkbox" />
                Crónica</label>
                <br />
                ...</div>
</form>

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.

• Descargar el archivo de ejemplo

(CC) Sebastián Thüer, 2009 | Enlace | 2 opiniones | Enviar a Delicious | Enviar a Twitter |
Post tags: css, Diseño Web, formularios