En el artículo anterior hemos visto las casillas de verificación y los botones radio, que permiten al usuario elegir una entre varias opciones. Sin embargo, puede ocurrir que la cantidad de opciones disponibles a presentar sea muy alta, por lo que estos controles resulten poco prácticos. También, puede que simplemente no se adapten bien al aspecto visual que se quiere del formulario.

En el caso de que necesitemos mostrar una lista más extensa de datos, quizás sería conveniente utilizar una lista de selección, también llamada frecuentemente combo o lista desplegable. Estas listas nos permiten mostrar al usuario varias opciones disponibles para que se decanten por una.

Hay dos tipos de listas seleccionables:

Vamos a centrarnos en el primer tipo de lista. Más adelante, en el próximo artículo, veremos el segundo.

Listas desplegables

La forma más básica de crear una lista desplegable de elementos se compone de una etiqueta contenedora <select> que en su interior incluirá varias etiquetas <option>, una por cada opción posible a elegir por parte del usuario:

<form method="post" action="/send/">
  Selecciona la opción deseada:
  <select>
    <option value="1">Opción 1</option>
    <option value="2">Opción 2</option>
    <option value="3">Opción 3</option>
  </select>
</form>

Observa que en este fragmento de código tenemos una etiqueta <select> con tres opciones <option>. El atributo value tiene el valor interno de la opción, mientras que el contenido de la etiqueta <option> es lo que el usuario observará visualmente en el formulario.

De forma alternativa, en lugar de colocar el texto de la etiqueta en el interior de <option>, también podemos hacerlo como valor del atributo label.

Opción seleccionada por defecto

Si queremos que una opción de la lista esté marcada por defecto, incluiremos el atributo selected:

<form method="post" action="/send/">
  Selecciona la opción deseada:
  <select>
    <option value="1">Opción 1</option>
    <option value="2" selected>Opción 2</option>
    <option value="3">Opción 3</option>
  </select>
</form>

Como puedes ver, la Opción 2 aparecerá visualmente marcada. Intenta no confundir el atributo checked (utilizado en checkbox y radio) con el atributo selected, puesto que no son lo mismo.

Sugerencia visual

Es posible que queramos que por defecto, exista una opción marcada que de una pista o sugerencia al usuario de que debe seleccionar una opción. Sin embargo, nos interesa que dicha opción no pueda ser seleccionada finalmente, y que esté desactivada:

<form method="post" action="/send/">
  Selecciona la opción deseada:
  <select>
    <option disabled selected>-Elige una opción-</option>
    <option value="1">Opción 1</option>
    <option value="2">Opción 2</option>
    <option value="3">Opción 3</option>
    <option value="4">Opción 4</option>
    <option value="5">Opción 5</option>
  </select>
</form>

Para ello, hemos utilizado el atributo disabled para desactivar esa opción y no dejar seleccionarla, pero por otro lado, hemos utilizado el atributo selected para que aparezca marcada por defecto para que el usuario pueda leer su contenido.

Esta opción, al estar seleccionada inicialmente, no cumplirá la restricción de validación del formulario, algo que aprenderemos algo más adelante, en el capítulo de Validaciones HTML.

Grupos de opciones

Otra cuestión interesante sería la de crear grupos o categorías de opciones. Para ello, podemos utilizar la etiqueta <optgroup>, la cuál se utilizará de etiqueta contenedora, agrupando las etiquetas <option> que quieras incluir en el grupo. Por otro lado, el atributo label se utilizará para poner un texto visual que el usuario podrá ver:

<form method="post" action="/send/">
  Selecciona la opción deseada:
  <select>
    <optgroup label="Categoría 1">
      <option value="1">Opción 1</option>
      <option value="2">Opción 2</option>
    </optgroup>
    <optgroup label="Categoría 2">
      <option value="3">Opción 3</option>
      <option value="4">Opción 4</option>
      <option value="5">Opción 5</option>
    </optgroup>
  </select>
</form>

Ten en cuenta que las etiquetas <optgroup> no son seleccionables. Sin embargo, podemos incluir el atributo disabled, desactivando el grupo y además, impidiendo que el usuario seleccione cualquier opción de ese grupo.

Listas seleccionables múltiples

A la etiqueta <select> le podemos aplicar el atributo multiple. De esta forma, estaremos indicando al navegador que el usuario puede seleccionar múltiples opciones, por lo que la apariencia visual de la lista cambiará a una lista de selección marcable, donde podemos seleccionar múltiples valores, y no necesariamente uno:

<form method="post" action="/send/">
  Selecciona la opción deseada:
  <select multiple>
    <option value="1">Opción 1</option>
    <option value="2">Opción 2</option>
    <option value="3">Opción 3</option>
    <option value="4">Opción 4</option>
    <option value="5">Opción 5</option>
  </select>
</form>

Aunque, si pulsamos en las diferentes opciones, sólo se marcará una, manteniendo pulsada la tecla CTRL podremos marcar todas las opciones que seleccionemos. Además, con la tecla SHIFT pulsada, podemos marcar un rango de varias opciones.