Listas desplegables en los formularios HTML

Nota: Si lo que estas buscando es como realizar menús en HTML por medio de listas, entonces ve a este enlace.

La etiqueta <select> para crear listas desplegables HTML

La etiqueta <select> sirve para crear listas desplegables html (que por cierto no obligatoriamente tiene que ser desplegable), y cada uno de los elementos de esa lista son especificados por las etiquetas OPTION u OPTGROUP dentro de ella.

Los atributos de la etiqueta select son:

  • name: Representa el nombre asociado con la casilla de texto, que permite su identificación en el par nombre/valor.
  • disabled: Crea un lista desactivada, que aparece atenuada
  • size: Si un elemento SELECT se presenta como una lista con desplazamiento (“scrolled list box”), este atributo especifica el número de filas de la lista que deberían ser visibles al mismo tiempo.No es preciso que los agentes
    visuales presenten un elemento SELECT como una lista (“list box”); pueden usar cualquier otro mecanismo, como por ejemplo un menú desplegable (“drop-down menu”).
  • multiple: Permite al usuario seleccionar varios campos de la lista

La etiqueta <option> para cada elemento de las listas desplegables HTML

 

Por cada opción a desplegar en la lista se utiliza la etiqueta <option> la cual puede tener como propiedades selected y value además de cualquiera de los atributos inherentes de los objetos html, que puedes revisar en esta entrada.

Veamos pues un sencillo ejemplo de una lista desplegable con sus elementos.

Esto se verá así:

Como puedes ver los values no necesariamente son texto, y cuando son números, no necesariamente van en orden.
De hecho, debes siempre recordar que el value será el dato que se enviará cuando el formulario sea enviado.

En el ejemplo anterior, los sistemas operativos windows y linux estan revueltos, pero esto puede solucionarse.
Con la etiqueta <optgroup> se pueden crear grupos de opciones para así clasificarlos:

El código anterior mostrará algo así:

El atributo size para que las listas desplegables HTML sean fijas y no desplegables

Si lo que se desea es que esta no sea una lista desplegable, entonces se genera un código indicando el size de la lista:

Y eso mostraría esto:

About Michelle Torres

Licenciada en Informática con Maestría en Tecnologías de la Información. Docente por convicción con trece años de experiencia, desarrolladora desde hace nueve años trabajando actualmente con desarrollo WEB para alta disponibilidad, además de ser consultor independiente y capacitador. Participe del movimiento del software libre como fiel apasionada, reconocida por su actividad en la comunidad y su participación en la inclusión.