Formulario - Select multiple

El elemento select representa un control que permite al usuario elegir de entre un número de opciones, la conducta de este elemento cambia sustancialmente de acuerdo al valor del atributo multiple, el cual decide si el control permitirá a los usuarios elegir una sola opción o muchas. Dependiendo del valor de este atributo, el control select puede compararse con los botones de opción (cuando el atributo multiple está ausente), que permiten a los usuarios elegir solo una opción entre muchas, y a las casillas de verificación (cuando el atribtuo multiple está presente), que permiten a los ususario la selección de tantas opciones como estén disponibles.

El atributo múltiple es un atributo que cuando está presente, especifica que se pueden seleccionar varias opciones a la vez.Una variante del cuadro de selección que vimos en el concepto anterior es permitir que el visitante del sitio pueda seleccionar varias opciones. Supongamos que tenemos un cuadro de selección con una lista de colores y queremos que el visitante pueda elegir varios y no uno solo. La selección de varias opciones varía en diferentes sistemas operativos y navegadores:

  • Para Windows: mantenga presionado el botón de control (ctrl) para seleccionar varias opciones 
  • Para Mac: mantenga presionado el botón de comando para seleccionar múltiples opciones

Debido a las diferentes formas de hacer esto, y debido a que tiene que informar al usuario que la selección múltiple está disponible, es más fácil usar casillas de verificación. La página que resuelve este problema es:

<html>
<head>
<title>Prueba de formulario</title>
</head>
<body>
<form action="/registrardatos.php" method="post">
Seleccione uno o varios colores (Presione Ctrl para seleccionar varios colores)<br>
<select name="colores[]" size="4" multiple>
<option value="1">Rojo</option>
<option value="2">Verde</option>
<option value="3">Azul</option>
<option value="4">Amarillo</option>
<option value="5">Blanco</option>
<option value="6">Negro</option>
<option value="7">Naranja</option>
<option value="8">Violeta</option>
</select>
<br>
<input type="submit" value="Enviar">
</form>
</body>
</html>

Podemos observar la sintaxis para la definición de un cuadro de selección múltiple:

<select name="colores[]" size="4" multiple>

Definimos una propiedad llamada multiple y no le asignamos valor, por otro lado al nombre definido en la propiedad name le agregamos al final los caracteres [] para que desde el servidor podamos identificar que el control retorna posiblemente muchos valores.

Es también común inicializar la propiedad size con un valor mayor a 1 para que sea más fácil la selección.

La mayoría de los navegadores permiten seleccionar opciones que no se encuentran juntas mediante el mouse y presionando simultáneamente la tecla Ctrl.