Etiqueta HTML <select>
La etiqueta HTML <select> se utiliza para crear una lista desplegable de opciones, que aparece cuando el usuario hace clic en un elemento de formulario, y permite al usuario elegir una de las opciones.
La <option> se utiliza para definir las posibles opciones entre las que elegir. La etiqueta se coloca dentro de la etiqueta <select>.
La primera opción de la lista se selecciona de forma predeterminada. Para cambiar una opción predeterminada, se utiliza el atributo selected.
La <optgroup> se utiliza para agrupar varias opciones en un solo grupo. La etiqueta de <optgroup> aparece como un encabezado en negrita.
La apariencia de la lista depende del atributo size, que especifica el número de opciones visibles. El ancho de la lista depende de la longitud del texto dentro de <option>. El ancho también se puede regular con estilos CSS.
La etiqueta <select> es difícil de estilizar eficazmente con CSS. Puedes afectar ciertas partes de un elemento. Por ejemplo, es posible controlar la fuente mostrada, el modelo de caja, etc., así como puedes usar la propiedad appearance para eliminar la apariencia predeterminada del sistema. Pero estas propiedades no dan un resultado estable en todos los navegadores. La estructura interna de la etiqueta <select> es complicada y difícil de controlar. Para obtener un control total, es posible que necesites una biblioteca con mejores widgets de formulario estilizados, o un menú desplegable que utilice elementos no semánticos.
éxito
Si necesitas enviar los datos al servidor o hacer referencia a la lista con scripts, la etiqueta
<select>debe colocarse dentro de la<form>.
Sintaxis
La etiqueta <select> se escribe 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>Resultado
Books HTML CSS PHP JavaScript ---
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 utiliza para agrupar las opciones.
Resultado
HTML CSS Git Java ---
Ejemplo de la etiqueta HTML <input> con la etiqueta <datalist>:
Ejemplo de la etiqueta HTML <input> con la etiqueta <datalist>
<!DOCTYPE html>
<html>
<head>
<title>Window title of the page</title>
</head>
<body>
<p>Airport of departure:</p>
<form action="action_form.php" method="get">
<input type="text" list="airports" name="airports" />
<datalist id="airports">
<option value="Berlin">
<option value="Los Angeles">
<option value="Moscow">
<option value="Paris">
</datalist>
<input type="submit" value="confirm" />
</form>
</body>
</html>En este ejemplo, se utiliza la etiqueta <form> porque necesitamos enviar información al servidor.
Resultado
Airport of departure:
---
Atributos
| Atributo | Valor | Descripción |
|---|---|---|
| autofocus | autofocus | Indica que la lista debe recibir el foco después de cargar la página. |
| disabled | disabled | Indica que la lista está deshabilitada y el usuario no puede interactuar con ella. |
| form | form_id | Compatible con todos los navegadores modernos. |
| multiple | multiple | Indica que se pueden 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. Se puede usar para acceder a los datos del formulario después de enviarlo o para vincularlo a un elemento de 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 en la lista, el navegador agregará automáticamente un desplazamiento para indicar que hay más opciones para ver. |
La etiqueta <select> admite Atributos globales y Atributos de eventos.
Cómo estilizar una etiqueta HTML <select>
Práctica
¿Cuál es la función del elemento HTML 'select'?