La etiqueta <select> | Manual PcWeb

Algunas veces nos interesará, no que el usuario inserte unos datos, sino acotarle el rango de la respuesta, esto es, le mostramos unos posibles valores de los cuales el usuario escogerá uno. Por ejemplo, elegir, el tipo de tarjeta de crédito para un pago, módelo de coche, etc... Las listas de selección son este tipo de menús desplegables que nos permiten elegir una (o varias) de las múltiples opciones de las que nos proponen.

Para conseguir esto, disponemos de la etiqueta <select>...</select>

Veamos un ejemplo:

 <form>
  <select name="colores">
   <option value="blanco">blanco</option>
   <option value="amarillo">amarillo</option>
   <option value="verde">verde</option>
   <option value="rojo">rojo</option>
   <option value="azul">azul</option>
  <option value="negro">negro</option>
 </select>
</form>

Visualización en el navegador:

Es importante observar la primera opción aparece selecionada por defecto es la primera de la lista. Podemos elegir la opción que queremos, con la propiedad selected.

<option value="amarillo" selected>amarillo</option>

 <form>
  <select name="colores">
   <option value="blanco">blanco</option>
   <option value="amarillo" selected >amarillo</option>
   <option value="verde">verde</option>
   <option value="rojo">rojo</option>
   <option value="azul">azul</option>
  <option value="negro">negro</option>
 </select>
</form>

Visualización en el navegador:

Con el objetivo de asegurarnos de que el usuario a elegido el mismo la opción, en muchas ocasiones por despiste de este se envía con el formulario la opción por defecto, muchos desarrallodores web colocan un espacio en blanco o habilitan un texto generico.

Ejemplo:

 <option value="enblanco"></option>

Y una cosa mas, podemos convertir la ventana en un scroll fijo, sin mas que añadir a select el atributo size="":

Si se desean seleccionar varias opciones se debe especificar el atributo multiple en la directiva select.

Ejemplo:

<form>
 <select name="material" size="3" multiple>
  <option> Corcho
  <option> Plastico
  <option> Madera
  <option> Acero Inoxidable
  <option> Cobre
  <option> Plomo
 </select> 
</form>

Se visualizará: