En el lenguaje de marcado de hipertexto (HTML), un cuadro de lista es un tipo de componente de interfaz gráfica de usuario interactiva (GUI). Aparece en un sitio web como un cuadro dentro de la página que contiene un conjunto vertical de opciones de texto que el usuario puede seleccionar. 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 GUI conocido como cuadro combinado, aunque se definen de la misma manera.
En un documento, un cuadro de lista HTML se define mediante la etiqueta de selección. Esta etiqueta inicia el cuadro de lista y se puede utilizar 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 otorga 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 incluye el texto real que se mostrará en el cuadro de lista HTML. Al igual que la etiqueta de selección, 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.
Aparte de las opciones, un cuadro de lista HTML puede contener otro elemento visual conocido como optgroup. Un optgroup es un encabezado que se utiliza 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 aparecerá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 apoyo para hacerlo. Esto se puede hacer con JavaScript® accediendo al cuadro de lista a través del modelo de objetos de documento (DOM), o se puede realizar con otros scripts o subprogramas. Como elemento interactivo, un cuadro de lista genera eventos de usuario como el mouseover, que se pueden capturar dentro del navegador.