Listas desplegables

Las listas desplegables se definen con la etiqueta <select> y </select>. Cada uno de los elementos que conformen la lista se definirán entre las etiquetas <option> y </option>.

Como se ha comentado en apartados anteriores, el tag select deberá definir obligatoriamente el atributo name.

El tag <select> y el tag <option>

La etiqueta <select> define la lista y encierra todas las opciones que muestra la lista.

Cada una de las opciones de la lista se define mediante una etiqueta <option>.

Conceptualmente funcionan como las listas, donde se definía el inicio y el fin (mediante <ul></ul>, <ol></ol> o <dl><dl>) y todos sus items que contenía la lista con la etiqueta <li>.

El tag option deberá definir obligatoriamente el atributo value:

<option value="nombre-identificativo-del-atributo" ... >. Este el dato que se enviará al servidor cuando el usuario envíe el formulario. El valor de este atributo deberá ser único para cada lista desplegable.

Para seleccionar por defecto una opción al mostrar la lista, se añade el atributo selected="selected" a la opción deseada.

Véase el siguiente ejemplo:



Sistema operativo:


El código es el siguiente:

<form action="script.php" method="post">
   Sistema Operativo:<br /> 
   <select name="programa">    
       <option value="Windows" selected="selected">Windows</option>
<option value="Machintosh">Mac</option>
<option value="Linux">Linux</option> </select>
</form>

En caso de que el usuario seleccionara la opción Mac y enviara la información, los datos que se enviarían al servidor serían programa=Machintosh. Estos datos se enviarán por el método post.

PRÁCTICA: Codificar el siguiente formulario con todos los atributos obligatorios. Por defecto la opción "Tecnología" será la que esté habilitada. El 'select' se identificará como 'aficiones' dentro del formulario y el valor para cada una de las opciones será el texto que contengan seguido del texto '001':