El elemento <select> permite crear un control interactivo que representa un menú con múltiples opciones. Con el elemento <option> se definen las opciones del menú, y con el elemento <optgroup> se pueden agrupar. El usuario podrá seleccionar una o varias opciones, según esté configurado.
Lista de elementos descritos en este artículo:
| Elemento | Descripción |
|---|---|
<select> | Para crear un menú de opciones |
<option> | Para crear las opciones del menú |
<optgroup> | Para agrupar las opciones del menú |
Ejemplo de código HTML de un menú:
<form>
<select>
<option>HTML</option>
<option>CSS</option>
<option>JS</option>
</select>
</form>
El código anterior creará el siguiente resultado:
En los siguientes apartados vamos a ver cada uno de estos tres elementos utilizados, uno por uno, con sus atributos y las posibilidades que ofrecen.
Crear un menú de opciones: elemento <select>
Para crear un menú de opciones se utiliza el elemento <select>. Se trata de un elemento de línea, por lo que ocupa el mínimo espacio horizontal, permitiendo que otros elementos se añadan a sus costados. Las opciones deben insertarse entre las etiquetas <select> (de apertura) y </select> (de cierre).
El atributo ‘multiple’
Este elemento tiene un atributo de gran importancia que determina su apariencia: el atributo multiple. Este atributo permite indicar si los usuarios pueden seleccionar una o varias opciones. Es un atributo binario, por lo que su presencia habilita la posibilidad de seleccionar varias opciones, y con su ausencia, el navegador tomará el valor por defecto, es decir, que sólo se podrá seleccionar una opción.
En el caso de usar el atributo multiple, en lugar de tener la apariencia de un menú desplegable se verá una caja con una lista interior de las opciones y una barra de desplazamiento vertical. Así se pueden seleccionar varias a la vez.
Ejemplo de código HTML de una lista con varias opciones:
<form>
<select multiple>
<option>HTML</option>
<option>CSS</option>
<option>JS</option>
</select>
</form>
Resultado:
Cuando se establece el atributo multiple, el atributo name debe finalizar con dos corchetes ([]), de apertura y de cierre, con tal de asegurar que todas las opciones seleccionadas llegarán al servidor.
Para seleccionar varias opciones a la vez (selección múltiple), el usuario deberá mantener la tecla Ctrl presionada mientras va seleccionando opciones. Además, si el usuario mantiene presionada la tecla Shift podrá seleccionar un intervalo de opciones contiguas.
El atributo ‘size’
El atributo size permite establecer el número de opciones visibles en el listado. Con el valor 1 (por defecto), los navegadores mostrarán el menú desplegable. Pero especificando un valor superior a 1, los navegadores mostrarán una lista encerrada en una caja de opciones. El valor será un número entero.
Ejemplo de código HTML de una lista con dos opciones visibles:
<form>
<select size=2>
<option>HTML</option>
<option>CSS</option>
<option>JS</option>
</select>
</form>
Resultado:
El atributo ‘name’
Al igual que sucede con otros controles interactivos, el atributo name es utilizado para asignar un nombre al control. Este nombre será enviado junto con el valor del control (par «nombre-valor») por el navegador web a la aplicación que procesará los datos del formulario. En el caso de que el elemento <select> tenga presente el atributo multiple, el par será «nombre-[valor1, valor2, etc]».
El atributo ‘form’
El atributo form permite asociar el control con el formulario al que pertenece. En este sentido, el valor de este atributo debe ser el mismo que el valor del atributo id del formulario en cuestión. Este atributo apareció en la versión de HTML5.
El atributo ‘autofocus’
Mediante el atributo autofocus se indica al navegador que ponga el enfoque del cursor sobre este control justo cuando el documento HTML o página web se haya cargado. Se trata de un atributo binario, por tanto, su presencia pondrá el foco automático y su ausencia no lo hará.
El atributo ‘required’
Mediante el uso del atributo required se obliga al usuario a seleccionar como mínimo una opción antes de enviar los datos. Si el usuario no selecciona ninguna opción, el botón de enviar devolverá error. Este atributo es de tipo binario, por lo que no debe contener ningún valor; su presencia lo hace obligatorio y su ausencia lo convierte en un control opcional.
El atributo ‘disabled’
El atributo disabled permite deshabilitar el control. Se trata de un atributo de tipo binario, es decir, que con su presencia se deshabilita el control y con su ausencia se habilita otra vez. Cuando el control esté deshabilitado aparecerá en color gris y no se podrá seleccionar ninguna opción.
Crear las opciones del menú: elemento <option>
El elemento <option> permite crear opciones para el elemento <select>. Este elemento permite contenido de tipo texto, que servirá para describir cada una de las opciones. Se trata de un elemento de línea con dos etiquetas: <option> (de apertura) y </option> (de cierre).
El atributo ‘value’
Mediante el atributo value se puede definir el valor de la opción que será enviado cuando el formulario envíe los datos. Su valor será una cadena de texto. Si este atributo está ausente, se tomará como valor el texto del contenido de la opción.
El atributo ‘label’
El atributo label permite etiquetar la opción de forma individual. El valor de este atributo será una cadena de texto. Cuando este atributo está presente, su valor será el que se mostrará en la lista del menú, con preferencia por encima del contenido de texto del elemento <option>.
<form>
<select size=3>
<option label='HTML'></option>
<option label='CSS'></option>
<option label='JS'></option>
</select>
</form>
Resultado:
El atributo ‘selected’
El atributo selected es utilizado para seleccionar por defecto una opción cada vez que se carga el documento HTML o página web. Al ser un atributo binario, no requiere valor; con su inclusión ya se selecciona por defecto la opción deseada.
Ejemplo de código HTML de una lista con una opción por defecto:
<form>
<select size=3>
<option selected>HTML</option>
<option>CSS</option>
<option>JS</option>
</select>
</form>
Resultado:
El atributo ‘disabled’
Con el atributo disabled en el elemento <option> podemos deshabilitar una opción en concreto, de modo que será visible pero no se podrá seleccionar. La opción que esté deshabilitada aparecerá de color gris. Se trata de un atributo binario, con lo que su presencia deshabilita la opción, y su ausencia la habilita.
Ejemplo de código HTML con una opción deshabilitada:
<form>
<select size=3>
<option>HTML</option>
<option>CSS</option>
<option disabled>JS</option>
</select>
</form>
Resultado:
Tal y como se puede apreciar en este ejemplo, es imposible seleccionar la opción referente al «JS», ya que ha sido deshabilitada.
Además, en el caso de que esta opción esté dentro de un grupo de opciones (elemento <optgroup>) que haya sido deshabilitado, todas las opciones contenidas también aparecerán deshabilitadas.
Agrupar las opciones del menú: elemento <optgroup>
Las opciones se pueden agrupar con tal de facilitar la lectura y la comprensión al usuario. Esto es posible con el elemento <optgroup>. También se trata de un elemento de línea, y puede contener ninguna o más opciones. Tiene dos etiquetas: <optgroup> (de apertura) y </optgroup> (de cierre).
Ejemplo de código HTML con agrupación de opciones:
<form>
<select>
<optgroup label='Desarrollo web'>
<option>HTML</option>
<option>CSS</option>
<option>JS</option>
</optgroup>
<optgroup label='Programación'>
<option>C</option>
<option>Rust</option>
<option>Python</option>
</optgroup>
</select>
</form>
Resultado:
Abre el menú desplegable y observa como las opciones aparecen agrupadas en dos secciones: una para el «desarrollo web» y otra para la «programación» en general. ¿Verdad que se hace más legible?
El atributo ‘label’
En este caso, el atributo label también sirve para proveer una etiqueta o un nombre que aparecerá en el listado de opciones. Por lo tanto, el valor contenido será una cadena de texto que será mostrada por el navegador.
El atributo ‘disabled’
La posibilidad de deshabilitar un grupo de opciones permite deshabilitar todas las opciones que contiene. Esto significa que todas las opciones de dentro del grupo deshabilitado aparecerán en gris y no se podrán seleccionar. Se trata de un atributo binario, por lo que no requiere valor. Su presencia deshabilita todo el grupo de opciones, y su ausencia lo mantiene habilitado (por defecto).
