Curso de HTML - Formulario - Select multiple
¿ Qué es HTML? Estructura interna Salto de línea Párrafo Títulos Enfasis Hipervínculo a otra página Hipervínculo a otro sitio WEB Imágenes en una página Hipervínculo en una imagen Apertura de un hipervínculo en otra instancia del navegador Enlace a un correo Anclas en la misma página Anclas en la otra página Lista ordenada Lista no ordenada Lista de definiciones Listas anidadas Tablas Tabla con encabezado Tabla con título Combinación de celdas Titulo de la pagina Contenido de la cabecera Comentarios en una página Caracteres especiales Formulario form Formulario input Formulario texarea Formulario checkbox Formulario radio Formulario Select 1 Formulario Select 2 Formulario Select 3 Formulario Button Formulario Button 2 Formulario type= Formulario - input type= Formulario - agrupamiento de controles Formulario - controles con valores iniciales Formulario - orden de foco de controles Formulario - Inhabilitar controles Formulario - Text/password y maxlength Formulario - text/password/textarea y readonly Formulario - Envío de datos mediante mail Formulario - label Frames Actualización de un frame Frames - Medidas Frames - propiedades Frames - Anidamiento iframes Declaración DOCTYPE HTML Transitional DOCTYPE. HTML Estricto DOCTYPE. para Frames Validación de enlaces Conceptos hojas de estilo Texto en CSS Elementos div y span Fuentes con CSS Elementos obsoletos de html

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.

Ver ejemplo