¿Qué es un cuadro de lista HTML?

En el lenguaje de marcado de hipertexto (HTML), un cuadro de lista es un tipo de componente de interfaz gráfica de usuario (GUI) interactiva. Aparece en un sitio web como un cuadro dentro de la página que contiene un conjunto vertical de opciones de texto que puede seleccionar el usuario. El propósito de usar un cuadro de lista HTML es presentar al usuario una serie de opciones entre las que puede seleccionar y luego reaccionar a la selección. Hay muchas opciones disponibles para personalizar un cuadro de lista, especialmente mediante el uso de hojas de estilo en cascada (CSS). Existe una diferencia visual y funcional entre un cuadro de lista HTML y otro elemento de la GUI conocido como cuadro combinado, a pesar de que se definen de la misma manera.

En un documento, un cuadro de lista HTML se define con la etiqueta select. Esta etiqueta inicia el cuadro de lista y puede usarse para definir varias opciones. Una de las propiedades más importantes de la etiqueta de selección es el nombre del cuadro de lista, que brinda a otras partes del documento HTML la capacidad de acceder directamente a los valores del cuadro de lista. Otra opción importante que se puede configurar es la propiedad múltiple, que puede permitir a un usuario seleccionar varios elementos de la lista simultáneamente en lugar de solo uno a la vez.

Entre las etiquetas de selección de apertura y cierre, los elementos reales que se incluirán en un cuadro de lista HTML se definen mediante la etiqueta de opción. La etiqueta de opción encierra el texto real que se mostrará en el cuadro de lista HTML. Al igual que la etiqueta select, también tiene algunas propiedades importantes. Una propiedad valiosa de la etiqueta de opción es la capacidad de definir un valor de retorno para una opción seleccionada que se envía a un script de consulta en lugar del texto que ve el usuario. Esto significa que un usuario puede ver la palabra "rojo", pero el cuadro de lista HTML puede devolver el valor hexadecimal de rojo en lugar de la palabra real.

Además de las opciones, un cuadro de lista HTML puede contener otro elemento visual conocido como optgroup. Un optgroup es un encabezado que se usa para separar visualmente las diferentes opciones dentro de un cuadro de lista. Cuando un usuario mira un cuadro de lista que contiene etiquetas optgroup, verá un encabezado en negrita en el cuadro, debajo del cual las opciones asociadas estarán ligeramente sangradas y no en negrita.

Aunque se puede crear un cuadro de lista HTML funcional y colocarlo en un sitio web, en realidad no hará nada cuando un usuario seleccione una opción a menos que haya un código de respaldo para hacerlo. Esto se puede hacer con JavaScript® accediendo al cuadro de lista a través del modelo de objeto de documento (DOM), o se puede realizar con otros scripts o applets. Como elemento interactivo, un cuadro de lista genera eventos de usuario como mouseover, que se pueden capturar dentro del navegador.