Elemento select
Si no sabes lo que es un elemento o cómo debes usarlo, te recomiendo leer el tutorial "Tags y atributos en HTML" que puedes encontrar en la sección de tutoriales HTML.
Tabla de contenidos
Descripción
El elemento select
representa un control que permite al usuario elegir de entre un número de opciones. Las opciones en una lista select
son provistas con el elemento option
y pueden ser agrupadas con el elemento optgroup
.
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.
Los controles select
pueden tener también una opción-etiqueta predeterminada, que no es más que una opción (option
) destinada a actuar como etiqueta cuando no se haya elegido ningun valor en el control. En tales casos, esta opción debe ser la primera en el control, su atributo value
debe estar vacío y no debe pertenecer a ningún grupo de opciones (optgroup
). La opción-etiqueta predeterminada es obigatoria cuando el elemento select
al que pertenece es declarado con el atributo required
y se muestra en modo de lista desplegable.
Ejemplos
En nuestro primer ejemplo crearemos un formulario con solo un control select
, con una definición tan básica como es posible. Esto te permitirá ver cómo es el control y cómo se comporta. Asimismo, haremos uso del elemento option
, a fines de rellenar nuestra lista con algunos ítems.
<form action="../../form-result.php" target="_blank">
<p>
Deporte favorito:
<select name="deporte">
<option>Fútbol</option>
<option>Críquet</option>
<option>Básquetbol</option>
<option>Hockey</option>
<option>Tenis</option>
</select>
<input type="submit" value="Enviar">
</p>
</form>
Nota: puedes ver al enviar el formulario del ejemplo anterior, que el valor enviado al agente procesador es el contenido de la opción que ha sido seleccionada. Esta conducta cambiará si el autor decide proveer el atributo value
en la opción (option
). En tal caso, el contenido del atributo value
será enviado al servidor.
En nuestro segundo ejemplo definiremos una opción predeterminada. Esta opción aparecerá seleccionada cuando la página se carge por primera vez y cuando el usuario restaure el formulario. Para hacer una opción predeterminada, solo necesitamos declarar el atributo selected
para la misma.
<form action="../../form-result.php" target="_blank">
<p>
Marca favorita:
<select name="marcaauto">
<option>Chevrolet</option>
<option>Ford</option>
<option selected>Peugeot</option>
<option>Fiat</option>
</select>
<input type="submit" value="Enviar">
<input type="reset" value="Restaurar">
</p>
</form>
En el tercer ejemplo jugaremos un poco con el atributo size
. Este atributo cambia el aspecto del control considerablemente al establecer un número de líneas (con o sin opciones) que el control mostrará al mismo tiempo.
<form action="../../form-result.php" target="_blank">
<p>Send message:</p>
<p>
<select name="enviar mensaje" size="3">
<option>Ahora</option>
<option>Dentro de una hora</option>
<option>Dentro de seis horas</option>
<option>Mañana</option>
</select>
</p>
<p><input type="submit" value="Enviar"></p>
</form>
Ahora, crearemos un control select
para elegir múltiples opciones al mismo tiempo. Para lograr esto agregaremos el atributo multiple
al elemento, y un par de corchetes ("[]") al final del valor en el atributo name
. Esto asegurará que todas las opciones seleccionadas arribarán correctamente al servidor.
<form action="../../form-result.php" target="_blank">
<p>Tus RPGs favoritos:</p>
<p>
<select name="rgpsfavoritos[]" multiple>
<option>The Witcher II</option>
<option>Baldur's Gate II</option>
<option>The Elder Scrolls III</option>
<option>Torchlight II</option>
<option>Fallout New Vegas</option>
<option>Anachronox</option>
</select>
</p>
<p><input type="submit" value="Enviar"></p>
</form>
Por último, usaremos el atributo required
para indicar que necesitamos que el usuario provea la información solicitada por este control. Cuando este atributo está presente, y el control se muestra como una lista desplegable, el autor debe proporcionar una opción-etiqueta predeterminada, la cual no es más que una primera opción (option
) que al estar seleccionada, indica que ninguna opción real ha sido seleccionada en el control. Esta opción debe ser la primera en el control, su atributo value
debe estar vacío y no debe pertenecer a ningún grupo de opciones (optgroup
).
<form action="../../form-result.php" target="_blank">
<p>
Seleciona un curso:
<select name="curso" required>
<option value="">Elige una opción</option>
<option>Cerámica</option>
<option>Jardinería</option>
<option>Arte</option>
<option>Fotografía</option>
<option>Emprendedurismo</option>
</select>
<input type="submit" value="Enviar">
</p>
</form>
Atributos
Atributos específicos
autofocus
Un valor booleano que instruye al navegador a establecer el enfoque sobre este control cuando el documento termina de cargarse o cuando el cuadro de diálogo (dialog
) donde el control se encuentra es mostrado. Si el atributo tiene el valor "autofocus" o la cadena vacía (""), o si simplemente está presente, el control debería obtener el enfoque tan pronto como sea posible, luego de que la página o cuadro de diálogo hayan sido cargados.
Ejemplo
<p>
Duración:
<select name="duracion" autofocus>
<option>1 año</option>
<option>2 años</option>
<option>4 años</option>
</select>
</p>
disabled
Un valor booleano que indica si el control se encuentra deshabilitado o no. Si el atributo toma el valor "disabled" o la cadena vacía (""), o si está simplemente presente, el control estará deshabilitado.
Los controles deshabilitados son representados en color gris (si son visibles), son impedidos para interactuar con el usuario y, lo más importante, sus valores (si lo tienen) no son enviados cuando el formulario es despachado.
Ejemplo
<form action="../../form-result.php" target="_blank">
<p>
Mascota favorita:
<select name="mascotafavorita" disabled>
<option>Perro</option>
<option>Gato</option>
<option>Conejo</option>
</select>
<input type="submit" value="Enviar">
</p>
</form>
form
El valor del atributo id
del formulario con el que este control está asociado.
Este atributo es nuevo en HTML5 y ayuda a definir la pertenencia de los controles en formularios anidados o distantes.
Ejemplo
<p>
Cómo quisieras recibirlo:
<select name="comorecibirlo" form="formulario1">
<option>Descargar ahora</option>
<option>Envíenmelo</option>
<option>Esperar</option>
</select>
</p>
<form id="formulario1" action="../../form-result.php" target="_blank">
<p><input type="submit" value="Enviar"></p>
</form>
Cómo quisieras recibirlo:
multiple
Un valor booleano que indica si el usuario debería poder elegir más de una opción (option
) o no. Si el atributo toma el valor "multiple", o la cadena vacía (""), o si simplemente está presente, el usuario tendrá permitido elegir más de una opción en el control.
Cuando este atributo es etablecido, el valor en el atributo name
debe terminar con un par de corchetes ("[]") para asegurar el correcto arribo de todas las opciones seleccionadas en el servidor.
Cuando este atributo está presente, la mayoría de los navegadores cambian automáticamente la forma del control a una caja con barras de desplazamiento, independientemente del valor que tenga el atributo size
.
Para seleccionar más de una opción en una lista de selección múltiple, los usuarios pueden hacer clic en las opciones mientras mantienen presionada la tecla CTRL. Un rango también puede ser seleccionado usando la tecla SHIFT.
Ejemplo
<form action="../../form-result.php" target="_blank">
<p>Mascotas favorita:</p>
<p>
<select name="mascotasfavoritas[]" multiple>
<option>Perro</option>
<option>Gato</option>
<option>Conejo</option>
</select>
</p>
<p><input type="submit" value="Enviar"></p>
</form>
name
Un nombre para el control. Este nombre será enviado por el navegador al agente procesador, emparejado con el contenido del atributo value
de las opciones seleccionadas o el contenido mismo de éstas. Estos valores juntos conformarán un par nombre-valor que será utilizado para procesar la información del formulario.
Actualmente, el valor isindex
, antiguamente utilizado de manera especial por algunos navegadores e incluido en el estándar HTML, no está permitido en este atributo.
Cuando el atributo multiple
está presente, el valor del atributo name
debe terminar con un par de corchetes ("[]") para asegurar el correcto arribo de todas las opciones seleccionadas al servidor.
Ejemplo
<form action="../../form-result.php" target="_blank">
<p>
Tu auto para hoy:
<select name="autoparahoy">
<option>Mercedes-Benz SLR McLaren</option>
<option>Lamborghini Egoista</option>
<option>Lamborghini Aventador</option>
</select>
<input type="submit" value="Enviar">
</p>
</form>
required
Un valor booleano que indica si las opciones en este control pueden ser dejadas todas deseleccionadas o no. Si este atributo tiene el valor "required" o la cadena vacía (""), o si está siplemente presente, el usuario tendrá que seleccionar una opción en el control a fin de poder enviar el formulario.
Cuando este atributo booleano está presente, y el control se muestra como una lista desplegable, el autor debe proporcionar una opción-etiqueta predeterminada, la cual no es más que una primera opción (option
) que al estar seleccionada, indica que ninguna opción real ha sido seleccionada en el control. Esta opción debe ser la primera en el control, su atributo value
debe estar vacío y no debe pertenecer a ningún grupo de opciones (optgroup
).
Si un control con el atributo required
presente es dejado en blanco, los navegadores que soporten este mecanismo arrojarán un error previo al envío y cancelarán el proceso inmediatamente.
El soporte provisto por los navegadores para el atributo required
es incompleto. Los autores pueden tener que recurrir a programas para proveer esta funcionalidad consistentemente.
Ejemplo
<form action="../../form-result.php" target="_blank">
<p>
Actividad para esta noche:
<select name="actividadestanoche" required>
<option value="">Elige una opción</option>
<option>Películas</option>
<option>Fiesta</option>
<option>Mirar las estrellas</option>
</select>
<input type="submit" value="Enviar">
</p>
</form>
size
Un entero para ser usado como el número de líneas (con o sin opciones) que este control mostrará al mismo tiempo.
Si este atributo tiene el valor "1" y el atributo multiple
está ausente, los navegadores mostrarán normalmente una lista desplegable. De lo contrario, el control tomará la forma de una caja con barras de desplazamiento.
Ejemplo
<form action="../../form-result.php" target="_blank">
<p>Calidad:</p>
<p>
<select name="calidad" size="2">
<option>Baja</option>
<option>Media</option>
<option>Alta</option>
</select>
</p>
<p><input type="submit" value="Enviar"></p>
</form>
Atributos globales
Para más información acerca de los atributos globales refiérete a esta lista de atributos gloables en HTML5.
Eventos
Eventos globales
Para más información acerca de los eventos globales refiérete a esta lista de eventos globales en HTML5.