Manejar HTML puede resultar sencillo para algunos y complicado para otros, por eso, nos hemos propuesto a explicarte diferentes acciones que puedes realizar con este lenguaje de marcado. Específicamente te contaremos cómo hacer una lista desplegable en HTML paso a paso, porque es una de las funcionalidades esenciales para mejorar la interacción en tus páginas web. Además, le permite a tus usuarios elegir entre varias opciones de forma sencilla. Entonces, empecemos.

¿Qué encontrarás en este post?

¿Qué es una lista desplegable en HTML?

Una lista desplegable en HTML, técnicamente conocida como un elemento <select>, es un componente esencial en la interfaz de usuario que facilita a los usuarios la selección de una opción dentro de un menú compacto. Este elemento es especialmente útil y prevalente en la creación de formularios web, donde el espacio en la pantalla puede ser limitado y la organización y claridad son cruciales.

Al agrupar múltiples opciones dentro de un menú desplegable, se conserva el espacio visual, manteniendo la interfaz limpia y ordenada. Además, saber cómo hacer una lista desplegable en HTML te ayudará a evitar el desorden en el sitio web y mejorarás la experiencia del usuario al proporcionar una manera sencilla y directa de navegar a través de las opciones disponibles sin necesidad de desplazarse por extensos listados.

Cómo hacer una lista desplegable en HTML

Paso 1: Define el esqueleto del HTML

Primero, vamos a definir la estructura básica de una página HTML. Incluye las etiquetas esenciales como <!DOCTYPE html>, <html>, <head>, y <body>.

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Listas Desplegables</title>
</head>
<body>
    <!-- Aquí irá nuestro contenido de lista desplegable -->
</body>
</html>

Paso 2: Agrega un formulario

Dentro del cuerpo de tu página, comenzarás por añadir un formulario. Este debe contener tu lista desplegable. Para ello utiliza la etiqueta <form>:

<form>
    <label for="grado">Seleccione un grado:</label>
    <select id="grado" name="grado">
        <!-- Opciones de la lista desplegable irán aquí -->
    </select>
</form>

Paso 3: Inserta las opciones

Dentro del <select>, añade varias etiquetas <option>. Cada <option> representa una opción en la lista desplegable. En este caso hemos trabajado con grados de primaria.

<select id="grado" name="grado">
    <option value="kinder">Kínder</option>
    <option value="primero">Primero</option>
    <option value="segundo">Segundo</option>
    <option value="tercero">Tercero</option>
</select>

Paso 4: Personaliza la apariencia

🔴 ¿Quieres Aprender a Programar con Python? 🔴

Descubre el Full Stack Jr. Bootcamp - Aprende a Programar desde Cero de KeepCoding. La formación más completa del mercado y con empleabilidad garantizada

👉 Prueba gratis el Bootcamp Aprende a Programar desde Cero por una semana

Para hacer que tu lista sea más atractiva, añade un poco de CSS. Puedes incluir el CSS directamente en la etiqueta <head> usando <style>.

<style>
    body {
        background-color: #FFFFA0; /* Color amarillo claro */
        text-align: center;
        font-family: Arial, sans-serif;
    }
    select {
        width: 200px; /* Ancho del select */
        margin-top: 20px;
    }
</style>

Paso 5: Agrega grupos de opciones

El último paso de este recorrido donde te enseñamos cómo hacer una lista desplegable en HTML es agregar grupos de opciones. En caso de que tengas muchas opciones para añadir a la lista desplegable, puedes agruparlas utilizando <optgroup> con un atributo label para cada grupo, tal y como te mostramos a continuación:

<select id="grado" name="grado">
    <optgroup label="Preescolar">
        <option value="kinder">Kínder</option>
    </optgroup>
    <optgroup label="Primaria">
        <option value="primero">Primero</option>
        <option value="segundo">Segundo</option>
        <option value="tercero">Tercero</option>
    </optgroup>
</select>

Ejemplo práctico de cómo hacer una lista desplegable en HTML

Aquí tienes un ejemplo completo de cómo hacer una lista desplegable en HTML que podrías implementar en tu próximo proyecto web.

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Listas Desplegables</title>
    <style>
        body {
            background-color: #FFFFA0;
            text-align: center;
            font-family: Arial, sans-serif;
        }
        select {
            width: 200px;
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <h1>Listas Desplegables</h1>
    <form>
        <label for="grado">Seleccione un grado:</label>
        <select id="grado" name="grado">
            <optgroup label="Preescolar">
                <option value="kinder">Kínder</option>
            </optgroup>
            <optgroup label="Primaria">
                <option value="primero">Primero</option>
                <option value="segundo">Segundo</option>
                <option value="tercero">Tercero</option>
            </optgroup>
        </select>
    </form>
</body>
</html>

Esperamos que ahí no termine tu aprendizaje, tenemos post donde te enseñamos a gestionar el enfoque que le das a los elementos de un formulario en HTML, cómo introducir y modificar texto con las etiquetas de texto HTML, cómo hacer un menú de navegación en HTML y cómo crear listas en HTML.

Saber cómo hacer una lista desplegable en HTML es solo un ejemplo de las habilidades que puedes adquirir en el Bootcamp de Programación Full Stack Jr. de KeepCoding. Si te apasiona el desarrollo web y quieres cambiar tu vida, este bootcamp es tu puerta de entrada al emocionante mundo de la tecnología. Con alta demanda de profesionales y salarios competitivos, el sector tecnológico ofrece oportunidades únicas para una carrera estable y gratificante. ¡No esperes más, inscríbete y comienza tu camino hacia el éxito hoy mismo!