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

autocomplete

El atributo autocomplete provee información acerca de si y cómo los navegadores deberían sugerir opciones automáticamente para este control, como un intento de adivinar lo que el usuario está escribiendo. Existen tres valores posibles para este atributo:

  • El valor on, indicando al navegador que debería sugerir opciones automáticamente pero sin proveer ninguna otra información acerca del tipo de datos que se espera en el control.
  • El valor off, indicando al navegador que no debería sugerir opciones automáticamente, ya sea debido a que la información a ser ingresada en el control es particularmente sensible (como el usuario para acceder a un área muy segura) o debido a que su valor nunca será reutilizado (como una clave de uso único en un proceso de registración).
  • Una lista de identificadores de detalles de autocompletado, indicando al navegador que debería sugerir opciones automáticamente y especificando el tipo de valor que se espera recibir.

Una lista de identificadores de detalles de autocompletado puede estar compuesta por los siguientes identificadores en el orden especificado.

  1. Opcionalmente, un identificador que comience con la cadena "section-" (insensible a mayúsculas/minúsculas), indicando el grupo al cual el campo pertenece.
  2. Opcionalmente, uno de los dos identificadores siguientes (insensibles a mayúsculas/minúsculas):
    • shipping: el campo es parte de la dirección de envío.
    • billing: el campo es parte de la dirección de facturación.
  3. Una de las dos opciones siguientes:
    • El siguiente identificador (insensible a mayúsculas/minúsculas):
      • name: un nombre completo
      • honorific-prefix: un prefijo o título, como Sir, Sr., Dr., etc.
      • given-name: un primer nombre.
      • additional-name: nombres adicionales o secundarios.
      • family-name: un apellido o nombre de familia.
      • honorific-suffix: un sufijo, como Jr., II ó ABIST.
      • nickname: un sobrenombre o nombre corto utilizado en lugar del nombre completo.
      • organization-title: un título profesional, como Contador, Arquitecto, Ingeniero, etc.
      • username: un nombre de usuario, típicamente usado para operaciones de acceso, como "adan457" ó "materia_oscura_01".
      • new-password: una nueva contraseña, típicamente requerida al crear una cuenta o al cambiar una contraseña.
      • current-password: la actual contraseña, típicamente requerida al ingresar o al cambiar una contraseña.
      • organization: la empresa asociada con la persona o información en otros campos asociados a este campo.
      • street-address: una dirección, posiblemente compuesta por múltiples líneas.
      • address-line1: una componente de una dirección.
      • address-line2: una componente de una dirección.
      • address-line3: una componente de una dirección.
      • address-level4: el nivel administrativo más específico, en direcciones con cuatro niveles administrativos.
      • address-level3: el tercer nivel administrativo, en direcciones con tres o más niveles administrativos.
      • address-level2: el segundo nivel administrativo, en direcciones con dos o más niveles administrativos. En países con dos niveles administrativos, esto sería típicamente la ciudad, pueblo o aldea.
      • address-level1: el nivel administrativo más amplio. Esto podría ser la provincia o estado dentro del cual se encuentra la localidad.
      • country: un código de país representando a un país, como "US", "UK" ó "ES".
      • country-name: el nombre de un país, como Albania, Liberia ó Uruguay.
      • postal-code: un código postal, código ZIP, código CEDEX (si es CEDEX, se debe agregar "CEDEX", y el distrito, si es relevante, al campo address-level2), etc., como 02139, 1428 ó 10025.
      • cc-name: un nombre completo como figure en el instrumento de pago.
      • cc-given-name: un primer nombre como figure en el instrumento de pago.
      • cc-additional-name: nombres adicionales o secundarios como figure en el instrumento de pago.
      • cc-family-name: un apellido o nombre de familia como figure en el instrumento de pago.
      • cc-number: un código identificando al instrumento de pago, como el número de una tarjeta de crédito.
      • cc-exp: la fecha de expiración del instrumento de pago.
      • cc-month: el mes de expiración del instrumento de pago.
      • cc-year: el año de expiración del instrumento de pago.
      • cc-csc: el código de seguridad del el instrumento de pago (CSC, CVC, CVV, SPC, CCID, etc.).
      • cc-type: el tipo de intrumento de pago utilizado, como la tarjeta de crédito.
      • transaction-currency: un código de divisa representando a la divisa a ser usada en la transacción, como "USD", "ARS" ó "GBP".
      • transaction-amount: el monto de la transacción, como al ingresar un valor en una subasta.
      • language: una etiqueta de lenguaje identifiando al idioma preferido, como "en", "en-GB" ó "es-419".
      • bday: una fecha de nacimientoa.
      • bday-day: el día de una fecha de nacimiento.
      • bday-month: el mes de una fecha de nacimiento.
      • bday-year: el año de una fecha de nacimiento.
      • sex: un identificador de género, como masculino o femenino.
      • url: una página correspondiente a la empresa, persona, dirección o información de contacto en otros campos asociados a este campo, como "http://www.yo-soy-juan.com".
      • photo: una fotografía, ícono, u otra imagen a la empresa, persona, dirección o información de contacto en otros campos asociados a este campo, como "http://www.yo-soy-juan.com/imagenes/yo.jpg".
    • Lo siguiente, en el orden dado:
      1. Opcionalmente, un identificador que coincide (insensible a mayúsculas/minúsculas) con alguno de los valores siguientes:
        • home: indicando que el campo es para contactar a alguien en su residencia.
        • work: indicando que el campo es para contactar a alguien en su lugar de trabajo.
        • mobile: indicando que el campo es para contactar a alguien en su dispositivo móvil.
        • fax: indicando que el campo describe datos de contacto de una máquina de fax.
        • pager: indicando que el campo describe datos de contacto de un pager ó beeper.
      2. Un identificador que coincide (insensible a mayúsculas/minúsculas) con alguno de los siguientes identificadores de detalles de autocompletado:
        • tel: un número de teléfono completo, incluyendo el código de país, como +1 617 253 5702.
        • tel-country-code: el código de país de un número telefónico, como +1 ó +54.
        • tel-national: un número de teléfono sin el código de país, con un prefijo nacional, si corresponde, como 617 253 5702.
        • tel-area-code: el código de área de un número telefónico, como 617.
        • tel-local: un número de teléfono sin el código de país y sin el código de área nacional, como 253 5702.
        • tel-local-prefix: la primera parte de un número de teléfono sin código de país y sin código de área, cuando ese número se encuentra dividido en dos componentes.
        • tel-local-suffix: la segunda parte de un número de teléfono sin código de país y sin código de área, cuando ese número se encuentra dividido en dos componentes.
        • tel-extension: el código de extensión interno de un número telefónico.
        • email: una dirección de correo electrónico, como juanperez@desconocido.com.
        • impp: una URL representando a un punto de un protocolo de mensajería instantánea, como "aim:goim?screenname=juanperez" ó "xmpp:juanperez@desconocido.com".

Usualmente, los navegadores llevan a cabo las operaciones de autocompletado recuperando datos de una base de datos con entradas previas u otras fuentes con información del usuaio.

Ejemplo

<p>
  Tratamiento:
  <select name="tratamiento" autocomplete="honorifix-prefix">
    <option>Sr.</option>
    <option>Sra.</option>
    <option>Srita.</option>
    <option>Dr.</option>
  </select>
</p>

Tratamiento:

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.

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>

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.