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.

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.

La información enviada al agente procesador por este control es el contenido del atributo value de la opción seleccionada (option). Si este atributo está ausente, el contenido de la opción toma su lugar.

Cuando el atributo multiple está presente, el valor en el atirbuto name debe terminar con un par de corchetes ("[]"). Esto asegurará el correcto arribo de las opciones seleccionadas en el control.

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>

Deporte favorito:

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.

Si el atributo multiple no está presente en el control, solo una opción en la lista puede tener el atributo selected declarado.

<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>

Marca favorita:

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.

Si el atributo size 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.

<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>

Send message:

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.

Cuando el atributo multiple 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.

<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>

Tus RPGs favoritos:

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).

Cuando el atributo required está presente, los navegadores que lo soportan impedirán el envío del formulario hasta que una o más opciones en el control hayan sido apropiadamente seleccionadas.

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.

<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>

Seleciona un curso:

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>

Mascota favorita:

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>

Mascotas favorita:

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.

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>

Actividad para esta noche:

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>

Calidad:

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.