Etiqueta HTML <select>
La etiqueta HTML <select> crea una lista desplegable de opciones. Aprende sus atributos, etiquetado, multiple, size, required y patrones de marcador.
La etiqueta HTML <select> crea una lista desplegable de opciones. El usuario hace clic en el control, la lista se expande y selecciona un valor (o varios, con el atributo multiple). Es uno de los controles de formulario principales, utilizado para todo tipo de elementos desde selectores de país hasta menús de orden.
Esta página cubre la sintaxis, cada atributo, la accesibilidad (etiquetado), los comportamientos de multiple / size / required, el patrón de marcador de posición deshabilitado, y cómo <select> difiere de una entrada respaldada por <datalist>.
La etiqueta <option> define cada opción y vive dentro del <select>. Por defecto, la primera opción está preseleccionada; añade el atributo selected a una opción para cambiar cuál está preseleccionada. Usa <optgroup> para agrupar opciones relacionadas bajo un encabezado en negrita no seleccionable.
Para enviar el valor elegido, asigna un name al <select> y colócalo dentro de un <form> (o asócialo con uno usando el atributo form). El valor enviado al servidor es el value de la opción seleccionada.
Si necesitas enviar los datos al servidor o leer la lista desde un script, el <select> debe tener un name y estar asociado con un <form>.
Siempre etiqueta tu <select>
Un <select> por sí solo no ofrece al usuario ningún texto que describa lo que está eligiendo, y los lectores de pantalla no anuncian nada significativo. Siempre combínalo con un <label>: establece un id en el <select> y apunta el atributo for de la etiqueta a ese id. Esto también permite al usuario hacer clic en el texto de la etiqueta para enfocar el control.
Ejemplo de un <select> etiquetado
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<label for="topic">Choose a topic:</label>
<select id="topic" name="topic">
<option value="html">HTML</option>
<option value="css">CSS</option>
<option value="js">JavaScript</option>
</select>
</body>
</html>Cuando no es posible tener una etiqueta visible, usa aria-label="..." en el <select> para que la tecnología asistiva siga anunciando su propósito.
Sintaxis
La etiqueta <select> viene en pares. El contenido se escribe entre las etiquetas de apertura (<select>) y cierre (</select>).
Ejemplo de la etiqueta HTML <select>:
Ejemplo de la etiqueta HTML <select>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<form>
<select>
<option value="books">Books</option>
<option value="html">HTML</option>
<option value="css">CSS</option>
<option value="php">PHP</option>
<option value="js">JavaScript</option>
</select>
</form>
</body>
</html>Ejemplo de la etiqueta HTML <select> con la etiqueta <optgroup>:
Ejemplo de la etiqueta HTML <select> con la etiqueta <optgroup>
<!DOCTYPE html>
<html>
<head>
<title>Window title of the page</title>
</head>
<body>
<select aria-label="Books and Snippets">
<optgroup label="Books">
<option value="html">HTML</option>
<option value="css">CSS</option>
</optgroup>
<optgroup label="Snippets">
<option value="git">Git</option>
<option value="java">Java</option>
</optgroup>
</select>
</body>
</html>En este ejemplo, la etiqueta <optgroup> se usa para agrupar las opciones en grupos.
Seleccionar múltiples opciones
Añade el atributo boolean multiple para permitir al usuario elegir más de una opción. El control se muestra entonces como un cuadro de lista desplazable en lugar de una lista desplegable. Combínalo con size para establecer cuántas filas son visibles. Para seleccionar varios valores, el usuario mantiene presionado Ctrl (Cmd en Mac) mientras hace clic, o mantiene presionado Shift para seleccionar un rango.
Ejemplo de multiple y size
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<label for="langs">Languages you know:</label>
<select id="langs" name="langs" multiple size="4">
<option value="html">HTML</option>
<option value="css">CSS</option>
<option value="js">JavaScript</option>
<option value="php">PHP</option>
<option value="sql">SQL</option>
</select>
</body>
</html>Cuando se envía un <select> con multiple, cada valor seleccionado se envía bajo el mismo name (por ejemplo, langs=html&langs=js).
Añadir un marcador de posición
Un <select> siempre tiene un valor, por lo que no existe un marcador de posición nativo. La solución habitual es una primera opción que esté vacía, preseleccionada, deshabilitada y oculta — muestra un indicador, no puede volver a elegirse y permanece oculta una vez que la lista se abre. Combínala con required para que sea obligatorio elegir una opción real antes de enviar el formulario.
Ejemplo de una opción de marcador de posición
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<form>
<label for="size">Choose a size:</label>
<select id="size" name="size" required>
<option value="" disabled selected hidden>Choose one</option>
<option value="s">Small</option>
<option value="m">Medium</option>
<option value="l">Large</option>
</select>
<button type="submit">Submit</button>
</form>
</body>
</html>Debido a que el value del marcador de posición está vacío, el atributo required lo trata como "ninguna opción seleccionada": enviar el formulario sin elegir una opción real activa el mensaje de validación del navegador.
<select> vs. <datalist>
Un <select> obliga al usuario a elegir de una lista fija. Si en cambio quieres un campo de texto libre que sugiera valores que el usuario puede aceptar o ignorar, ese es un trabajo para un <datalist> asociado a un <input> de texto mediante el atributo list — no una función de <select>. Es un elemento separado con comportamiento diferente; úsalo cuando escribir con autocompletado encaje mejor que una lista desplegable estricta.
Atributos
| Atributo | Valor | Descripción |
|---|---|---|
| autofocus | autofocus | Define que la lista debe recibir el foco después de que la página cargue. |
| disabled | disabled | Indica que la lista está deshabilitada; el usuario no puede interactuar con ella. |
| form | form_id | Asocia el <select> con un <form> mediante el id de ese formulario, de modo que el control puede estar fuera del elemento <form> en el marcado y aun así enviarse con él. |
| multiple | multiple | Indica que se puede elegir más de una opción. El método para elegir más de una opción depende del sistema operativo. En Windows, debes mantener presionado el botón CTRL; en Mac, el botón CMD. |
| name | name | Define un nombre para el menú desplegable. Puede usarse para acceder a los datos del formulario después de enviarlo o para vincularlo a un elemento JavaScript. |
| required | required | Indica que es obligatorio elegir una opción. |
| size | number | Indica el número de opciones visibles en la lista desplegable. Si el valor del atributo "size" es mayor que 1 y menor que el número total de opciones de la lista, el navegador añadirá automáticamente un desplazamiento para indicar que hay más opciones. |
La etiqueta <select> admite atributos globales y los atributos de evento.
Cómo dar estilo a una etiqueta HTML <select>
El elemento <select> es renderizado en parte por el sistema operativo, por lo que resiste el estilo CSS completo y los resultados varían entre navegadores. Puedes establecer de forma fiable la fuente, los colores, el relleno y el modelo de caja en el propio control. Para reemplazar la flecha desplegable nativa con la tuya propia, restablece el aspecto del sistema con appearance: none y añade una flecha personalizada (por ejemplo, un background-image o un contenedor con un pseudo-elemento). La lista de opciones expandida y el estilo por opción siguen siendo solo parcialmente controlables; para listas desplegables completamente personalizadas y perfectas al píxel, los desarrolladores suelen construir un widget con elementos que no sean <select> usando JavaScript.