Original article: HTML Select Tag – How to Make a Dropdown Menu or Combo List
La etiqueta HTML select se utiliza para crear menús desplegables para que los usuarios puedan seleccionar el valor que deseen. Es una función instrumental para recopilar datos que se envían a un servidor.
La etiqueta select normalmente va dentro de un elemento de formulario form, con las opciones a elegir codificados dentro de otra etiqueta, <option>. También puede ser un elemento independiente que seguiría asociado a un formulario con uno de sus atributos especiales, form.
En este tutorial, te guiaré a través del proceso para crear un menú desplegable con la etiqueta select para que puedas empezar a utilizarla para recoger datos en tus proyectos de programación. También tocaré como diseñar la etiqueta de selección porque es notoriamente difícil de diseñar.
Atributos de la etiqueta select
Antes de profundizar en cómo crear un menú desplegable con la etiqueta select, necesitamos hablar sobre los atributos que toma esta etiqueta.
Estos son sus atributos:
- name: Es necesario adjuntar el nombre a cada control de formulario, ya que se utiliza para referenciar los datos después de que se envíen al servidor.
- multiple: Este atributo le permite al usuario seleccionar múltiples opciones del menú desplegable.
- required: Esto se utiliza normalmente para la validación. Con este atributo, el formulario no se enviará a menos que el usuario seleccione al menos una opción del menú desplegable.
- disabled: Este atributo impide al usuario interactuar con las opciones.
- size: Expresado en números, este atributo de tamaño se utiliza para especificar cuántas opciones serán visibles a la vez.
- autofocus: Este atributo se usa en todas las entradas de formularios, incluida la selección (select), para especificar que cierta entrada (input) debe enfocarse por defecto cuando se cargue la página.
Cómo crear un menú desplegable con la etiqueta Select
Para crear un menú desplegable con la etiqueta select, primero necesitas un elemento de formulario form. Esto es porque también tendrás un botón de envío dentro del elemento de formulario para enviar los datos al servidor.
<form action="#">
<label for="lang">Lenguaje</label>
<select name="lenguajes" id="lang">
<option value="javascript">JavaScript</option>
<option value="php">PHP</option>
<option value="java">Java</option>
<option value="golang">Golang</option>
<option value="python">Python</option>
<option value="c#">C#</option>
<option value="C++">C++</option>
<option value="erlang">Erlang</option>
</select>
<input type="submit" value="Enviar" />
</form>
He incluido algo de CSS sencillo para centrar el menú desplegable y el botón, y darle un color de fondo gris claro:
body {
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto;
height: 100vh;
background-color: #f1f1f1;
}
input {
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto;
}
Para hacerlo más elaborado y accesible, también puedes adjuntar la caja de selección a un elemento de etiqueta label, para que este sea el foco cuando se haga clic en el texto de la etiqueta. Puedes hacerlo con este código:
<form action="#">
<label for="lang">Lenguaje</label>
<select name="lenguajes" id="lang">
<option value="javascript">JavaScript</option>
<option value="php">PHP</option>
<option value="java">Java</option>
<option value="golang">Golang</option>
<option value="python">Python</option>
<option value="c#">C#</option>
<option value="C++">C++</option>
<option value="erlang">Erlang</option>
</select>
<input type="submit" value="Enviar" />
</form>
He puesto un símbolo de número (#) como el valor del atributo de acción para que no te salga un 404 cuando hagas clic en el botón de envío.
Pero ahora debemos hacer un pequeño cambio en el CSS:
body {
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto;
height: 100vh;
background-color: #f1f1f1;
}
input {
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto;
}
label {
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto;
}
select {
margin-bottom: 10px;
margin-top: 10px;
}
Al final, este es el resultado:
La cosa no termina ahí. Uno de los elementos desplegables aparece por defecto y se seleccionará si el usuario hace clic en el botón de envío inmediatamente cuando llegue a la página.
Pero esta no es una buena experiencia de usuario. Puedes deshacerte de ella agregando la opción de "selecciona un lenguaje" como el primer elemento del menú desplegable.
<form action="#">
<label for="lang">Lenguaje</label>
<select name="lenguajes" id="lang">
<option value="selecciona">Selecciona un lenguaje</option>
<option value="javascript">JavaScript</option>
<option value="php">PHP</option>
<option value="java">Java</option>
<option value="golang">Golang</option>
<option value="python">Python</option>
<option value="c#">C#</option>
<option value="C++">C++</option>
<option value="erlang">Erlang</option>
</select>
<input type="submit" value="Enviar" />
</form>
Cuando el usuario haga clic en la caja de selección para elegir una opción, el menú desplegable también cubrirá el botón de envío - otra cosa que afecta negativamente a la buena experiencia del usuario.
Puedes cambiar esto con el 'atributo de tamaño' size, que mostrará un cierto número de opciones por defecto y mostrará un desplazamiento para las otras opciones del desplegable.
Esto también te permite deshacerte de la primera opción que habíamos agregado, ya que algunas de las opciones quedarán visibles para el usuario automáticamente.
<form action="#">
<label for="lang">Lenguaje</label>
<select name="lenguajes" id="lang" size="4">
<option value="javascript">JavaScript</option>
<option value="php">PHP</option>
<option value="java">Java</option>
<option value="golang">Golang</option>
<option value="python">Python</option>
<option value="c#">C#</option>
<option value="C++">C++</option>
<option value="erlang">Erlang</option>
</select>
<input type="submit" value="Enviar" />
</form>
Con el atributo multiple, puedes permitirle al usuario seleccionar más de una opción del menú desplegable.
<form action="#">
<label for="lang">Lenguaje</label>
<select name="lenguajes" id="lang" multiple>
<option value="javascript">JavaScript</option>
<option value="php">PHP</option>
<option value="java">Java</option>
<option value="golang">Golang</option>
<option value="python">Python</option>
<option value="c#">C#</option>
<option value="C++">C++</option>
<option value="erlang">Erlang</option>
</select>
<input type="submit" value="Enviar" />
</form>
Esto hace que 4 elementos sean visibles por defecto. Para seleccionar opciones múltiples, el usuario debe mantener pulsada la tecla shift o ctrl y luego seleccionar las opciones con el cursor.
Esto no es todo lo que puedes hacer con las etiquetas select y <option>. También puedes hacer una caja de selección multi-capa con el elemento <optgroup> dentro de una etiqueta <select>.
Puedes convertir el menú desplegable ya hecho en un cuadro de selección multi-capa así:
<form action="#">
<label for="lang">Lenguaje</label>
<select name="lenguajes" id="lang">
<optgroup label="primera-opcion">
<option value="seleccionar">Selecciona un lenguaje</option>
<option value="javascript">JavaScript</option>
<option value="php">PHP</option>
<option value="java">Java</option>
<option value="golang">Golang</option>
</optgroup>
<optgroup label="segunda-opcion">
<option value="python">Python</option>
<option value="c#">C#</option>
<option value="C++">C++</option>
<option value="erlang">Erlang</option>
</optgroup>
</select>
<input type="submit" value="Enviar" />
</form>
Cómo aplicar estilo al elemento select
Estilizar el elemento select es a menudo confuso y se muestra de forma inconsistente en los navegadores. Pero siempre puedes intentar lo siguiente:
<form action="#">
<label for="lang">Lenguaje</label>
<select name="lenguajes" id="lang">
<option value="selecciona">Selecciona un lenguaje</option>
<option value="javascript">JavaScript</option>
<option value="php">PHP</option>
<option value="java">Java</option>
<option value="golang">Golang</option>
<option value="python">Python</option>
<option value="c#">C#</option>
<option value="C++">C++</option>
<option value="erlang">Erlang</option>
</select>
<input type="submit" value="Enviar" />
</form>
select {
margin-bottom: 10px;
margin-top: 10px;
font-family: cursive, sans-serif;
outline: 0;
background: #2ecc71;
color: #fff;
border: 1px solid crimson;
padding: 4px;
border-radius: 9px;
}
En el fragmento de código CSS anterior le he dado a la caja de selección el siguiente aspecto:
- una familia de letra cursiva y un color blanco,
- un contorno de 0 para eliminar el feo contorno cuando está en foco,
- un fondo verdoso,
- un borde de 1 píxel de color carmesí,
- un radio al borde de 4 píxeles para obtener un borde ligeramente redondeado en todos los lados,
- y un relleno de 4 píxeles para espaciar un poco las cosas.
La caja de selección ahora se ve mejor:
Conclusión
La etiqueta select es muy útil cuando se hacen menús desplegables y listas combinadas en HTML. Es como un botón de radio y una casilla de verificación (checkbox) en un solo paquete.
Recuerda que con los botones de radio sólo puedes seleccionar una opción de una lista - pero con una casilla de verificación puedes seleccionar múltiples opciones. Select es más flexible, ya que puedes configurarla para aceptar una única opción o múltiples opciones.
Un problema con la etiqueta select es que es muy difícil de estilizar. Una solución razonable es utilizar una biblioteca CSS que ofrece clases de gran utilidad para dar estilo a un formulario junto con el elemento select.
Espero que este tutorial te haya familiarizado con la etiqueta select para que puedas empezar a utilizarla en tus proyectos.
Gracias por leer y sigue programando.