Controles: Listas de selección

Si las casillas de verificación se nos quedan cortas o necesitamos 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:

Tipo de información a obtener	Etiqueta a utilizar	Ejemplo
Lista (cerrada) de opciones	<select> y <option>	Opción 1Opción 2
Lista (abierta) de opciones	<datalist>

Listas seleccionables

Su forma más básica se compone de una etiqueta contenedora <select> que en su interior incluirá varias etiquetas <option>, una por opción posible a elegir. Si queremos que una opción de la lista esté marcada por defecto, incluiremos el atributo selected:

<form name="formulario" method="post" action="http://pagina.com/send.php">
  <!-- Lista de selección -->
  Selecciona la opción deseada:
  <select name="combo">
    <!-- Opciones de la lista -->
    <option value="1">Opción 1</option>
    <option value="2" selected>Opción 2</option> <!-- Opción por defecto -->
    <option value="3">Opción 3</option>
  </select>
</form>

Listas seleccionables múltiples

A la etiqueta <select> le podemos aplicar el atributo multiple, de modo que desaparecerá la posibilidad de desplegar la lista, mostrando directamente las opciones en otro formato que hará posible pulsar la tecla CTRL y marcar varias de las opciones de la lista.

También podemos utilizar la etiqueta <optgroup>, que es una etiqueta contenedora para agrupar varias etiquetas <option>. De esta forma, podemos crear pequeñas agrupaciones para tener más organizada la lista de opciones. La propia etiqueta <optgroup> no es seleccionable por el usuario, aparecerá en negrita y sólo estará disponible para organizar las opciones:

<form name="formulario" method="post" action="/send.php">
  <!-- Lista de selección múltiple -->
  <select name="combo" multiple>
    <!-- Formato alternativo con atributo label -->
    <optgroup label="Opciones básicas">
      <option value="1" label="Opcion 1"> </option>
    </optgroup>

    <optgroup label="Opciones avanzadas">
      <option value="2" label="Opcion 2"> </option>
      <option value="3" label="Opcion 3"> </option>
    </optgroup>
  </select>
</form>

Obsérvese que en esta segunda lista hemos utilizado el atributo label que es un formato alternativo al ejemplo anterior.

Listas seleccionables abiertas

Por último, también podemos crear una lista abierta, donde el usuario puede seleccionar opciones sugeridas mediante un <datalist> o indicar la suya propia escribiéndola manualmente. Para ello, utilizaremos una etiqueta <datalist> que funcionará exactamente igual que un <select>, conteniendo las opciones posibles en etiquetas <option>.

Al hacer esto, y al contrario que las etiquetas <select>, el elemento <datalist> no mostrará visualmente nada. Sin embargo, la diferencia radica en que le daremos un atributo id al <datalist> y lo combinaremos con un campo de texto <input> a través del atributo list:

<form name="formulario" method="post" action="/send.php">
  <!-- Campo de texto combinado con lista de opciones -->
  <input type="text" list="items" />
  <!-- Lista de opciones -->
  <datalist id="items">
    <option value="1">Opción 1</option>
    <option value="2">Opción 2</option>
    <option value="3">Opción 3</option>
  </datalist>
</form>

De esta forma, tenemos una lista de selección donde podemos marcar las opciones del <datalist> pero además se nos ofrece la opción de escribir manualmente nuestra propia opción.

En listas con muchas opciones, también se tiene la ventaja que al escribir un primer carácter, sólo nos aparecen los ítems que comienzan por ese caracter, lo que lo hace ideal para crear listas de opciones extensas o de forma dinámica con Javascript.

No obstante, cuidado con el soporte de este tipo de lista, que puede no estar disponible para algunos navegadores: