Creación de Menús Desplegables con Select y Data List en HTML

Contenido del curso

Web Developer Fundamentals

HTML

Etiquetas multimedia

Formularios

CSS

Responsive Design

Accesibilidad

Próximos pasos

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:008:11

Creación de Menús Desplegables con Select y Data List en HTML

Curso Definitivo de HTML y CSS

Clase 20 de 56

Clase 20 / 56

Recursos

¿Cómo crear un formulario Select en HTML?

Muchos hemos interactuado con formularios en línea que nos permiten elegir entre varias opciones desplegables para seleccionar artículos, idiomas o países. Este tipo de funciones se implementan en HTML usando la etiqueta <select>. A continuación, te describimos cómo usarla eficientemente y mejoramos tu conocimiento con prácticas recomendadas para el desarrollo web.

¿Cómo usar la etiqueta Select?

La etiqueta <select> es esencial para crear listas desplegables en formularios HTML. Dentro de esta etiqueta, puede haber múltiples opciones que el usuario podrá seleccionar. Aquí está un ejemplo sencillo de cómo se implementa:

<!DOCTYPE html>
<html>
<head>
    <title>Select Example</title>
</head>
<body>
    <main>
        <label for="cursos">Elige un curso:</label>
        <select name="cursos" id="cursos">
            <option value="javascript">Curso de JavaScript</option>
            <option value="html5">Curso de HTML5</option>
            <option value="css3">Curso de CSS3</option>
            <option value="web-standards">Curso de Web Standards</option>
        </select>
    </main>
</body>
</html>

¿Cuáles son las limitaciones del Select estándar?

Aunque la etiqueta <select> parece sencilla, presenta ciertas limitaciones, especialmente en dispositivos móviles. En escenarios donde hay un gran número de opciones (por ejemplo, 200), buscar un elemento específico puede convertirse en una tarea ardua para el usuario. Esto se debe a la necesidad de desplazarse extensamente para encontrar la opción deseada.

¿Qué son las mejores prácticas al usar Select?

Para superar las limitaciones del <select>, se recomienda una práctica avanzada de desarrollo usando <input> y <datalist>. Este enfoque permite la autocompletación, mejorando así la experiencia del usuario:

<!DOCTYPE html>
<html>
<head>
    <title>Datalist Example</title>
</head>
<body>
    <main>
        <label for="cursos">Elige un curso:</label>
        <input list="cursos">
        <datalist id="cursos">
            <option value="JavaScript">
            <option value="HTML5">
            <option value="CSS3">
            <option value="Web Standards">
        </datalist>
    </main>
</body>
</html>

Con este método:

Los usuarios pueden comenzar a escribir y recibir sugerencias automáticas.
Se reduce el número de opciones visibles, ya que solo se muestran aquellas que coinciden con los caracteres ingresados.
Mejora la accesibilidad y usabilidad en dispositivos móviles.

¿Cómo beneficiarse de estas prácticas en proyectos futuros?

Con las herramientas y conocimientos de cómo usar <select> y <datalist>, puedes crear formularios más eficientes y amigables al usuario. Ahora puedes aplicar estas prácticas para mejorar formularios en diversos proyectos web, ya sea para seleccionar horarios de vuelos, cursos académicos, entre otros.

¡Sigue aprendiendo y aplicando buenas prácticas en tus proyectos! Con estas técnicas, podrás diseñar formularios que no solo funcionen, sino que sean accesibles y agradables para cualquier usuario.

Orlando Jose Altamiranda Piñango

Hace 6 años

Agregado fomulario de selección <select> e <input list> y saltos de linea <br> en cada input para una vista más agradable.

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Lista del Super</title>
    <meta name="description" content="No olvides lo que debes comprar en el super" />
    <meta name="robots" content="index, follow" />
</head>
<body>
    <header>

    </header>
    <main>
        <section>
            <h2>¡Soy la lista del super!</h2>
            <h3>Listado de productos a comprar:</h3>
            <ul>
                <li>Frutas:</li>
                <ol>
                    <li><a href="https://www.pequerecetas.com/receta/manzana-18-recetas/">Manzana</a></li>
                    <figure>                    
                        <img src="./images/manzanas.png" alt="Deliciosas manzanas" width="100">
                        <figcaption>Manzana roja o verde</figcaption>                    
                    </figure>                
                    <li><a href="https://www.directoalpaladar.com/recetario/aprovechar-platanos-maduros-recetas-bizcochos-tartas-helados">Platano</a></li>
                    <figure>
                        <img src="./images/platanos.png" alt="Deliciosos Platanos" width="100">
                        <figcaption>Platanos dulces</figcaption> 
                    </figure>
                        
                </ol>
                <li>Carnes:</li>
                <ol>
                    <li><a href="https://www.cocinacaserayfacil.net/recetas-con-pollo/">Pollo</a></li>
                    <figure>
                        <img src="./images/pollo.png" alt="Delicioso Pollo" width="100">
                        <figcaption>Carne de pollo</figcaption>
                    </figure>
                    <li><a href="https://www.cocinafacil.com.mx/recetas/recetas-de-carne-molida/">Carne Molida</a></li>
                    <figure>
                        <img src="./images/carne-molida.png" alt="Deliciosa carne molida" width="100">
                        <figcaption>Carne de res</figcaption>
                    </figure>
                </ol>
                <li>Verduras:</li>
                <ol>
                    <li><a href="https://www.directoalpaladar.com/directo-al-paladar/11-recetas-limon-irresistibles-todos-tiempos">Limón</a></li>
                    <figure>
                        <img src="./images/limon.png" alt="Delicioso limon" width="100">
                        <figcaption>Limon</figcaption>
                    </figure>
                    <li><a href="https://www.directoalpaladar.com/ingredientes-y-alimentos/nuestras-mejores-47-recetas-zanahoria">Zanahoria</a></li>
                    <figure>
                        <img src="./images/zanahoria.png" alt="Deliciosa zanahoria" width="100">
                        <figcaption>Zanahoria</figcaption>
                    </figure>                
                </ol>
            </ul>
    </section>
    <section>
        <h3>Video explicativo de Compras:</h3>
        <figure>
            <video src="images/1- Presentación del curso.mp4" controls preload="auto" width="400" height="225"></video>
            <figcaption>Video en detalle como hacer compras</figcaption>
        </figure>
    </section>
    <section>
        <figure>
            <h3>Formulario Responsable de Compra:</h3>
            <form action="">
                <label for="nombre-resposable">
                    <span>¿Cuál es el nombre del responsable?</span>
                    <input type="text" id="nombre-responsable" placeholder="Introduce tu nombre"><br>                    
                </label>
                <label for="dia-compra">
                    <span>Fecha que se hará la compra</span>
                    <input type="date" id="dia-compra"><br>                    
                </label>
                <label for="hora-compra">
                    <span>Hora en que se hará la compra</span>
                    <input type="time" id="hora-compra"><br>                    
                </label>
            </form>
        </figure>
    </section>
    <section>
        <figure>
            <h3>Formulario Calendar</h3>
            <form action="">
                <label for="hora">
                    <span>Horario de Viaje</span>
                    <input type="time" id=hora name=hora><br>
                </label>
                <label for="dia">
                    <span>Día del Viaje</span>
                    <input type="date" id=dia name=dia><br>
                </label>
                <label for="semana">
                    <span>Semana del Viaje</span>
                    <input type="week" id=semana name=semana><br>
                </label>
                <label for="mes">
                    <span>Mes de Viaje</span>
                    <input type="month" id=mes name=mes>
                </label>
                <input type="submit">
            </form>
        </figure>
    </section>
    <section>
        <figure>
            <h3>Formulario Calendar Completo</h3>
            <form action="">
                <label for="calendario">
                    <span>Calendario Completo</span>
                    <input type="datetime-local" id="calendario" name="calendario">
                </label>
                <input type="submit" value="Me voy de viaje">
            </form>
        </figure>
    </section>
    <section>
        <figure>
            <h3>Formulario con Autocompletado:</h3>
            <form action="">
                <label for="nombre">
                    <span>¿Cuál es tu nombre?</span>
                    <input type="text" name="nombre" id="nombre" autocomplete="name" required><br>
                </label>
                <label for="correo">
                    <span>¿Cuál es tu email?</span>
                    <input type="email" name="correo" id="correo" autocomplete="email" required><br>
                </label>
                <label for="pais">
                    <span>¿Cuál es tu país?</span>
                    <input type="text" name="pais" id="pais" autocomplete="country" required><br>
                </label>
                <label for="cp">
                    <span>¿Cuál es tu código postal?</span>
                    <input type="text" name="cp" id="cp" autocomplete="postal-code" required>
                </label>
                <input type="submit">
            </form>
        </figure>
    </section>
    <h3>Crear Lista con Comando Select - No recomendado</h3>
    <section>
        <figure>
            <form action="">
                <select name="destinos" id="">
                    <option value="España">España</option>}
                    <option value="Alemania">Alemania</option>
                    <option value="Suiza">Suiza</option>
                    <option value="Japón">Japón</option>
                    <option value="Suecia">Suecia</option>
                    <option value="Zimbabue">Zimbabue</option>
                    <option value="Chile">Chile</option>
                    <option value="México">México</option>
                    <option value="Perú">Perú</option>
                    <option value="Venezuela">Venezuela</option>
                    <input type="submit" >
                </select>
            </form>
        </figure>
    </section>
    <h3>Creación de Lista con Datalist - Práctica recomendada</h3>
    <section>
        <figure>
            <form action="">
                <input list="destinos2" name="destinos2">
                <datalist id="destinos2">
                    <option value="España"></option>
                    <option value="Alemania"></option>
                    <option value="Suiza"></option>
                    <option value="Japón"></option>
                    <option value="Suecia"></option>
                    <option value="Zimbabue"></option>
                    <option value="Chile"></option>
                    <option value="México"></option>
                    <option value="Perú"></option>
                    <option value="Venezuela"></option>
                </datalist>
                <input type="submit">
            </form>
        </figure>
    </section>
    </main>
    <footer>
        <p>Creado con amor por Orlando Altamiranda con ayuda del Team Platzi</p>
    </footer>
</body>
</html>

Carmen Álvarez M.

Hace 6 años

Este proyecto está quedando genial Orlando. Gracias por compartir!!!

Emilio Chaim Correa Díaz

Hace 5 años

Hice una parte solo por curiosa. ¡Genial!

Comentarios (403)403 comentarios

Alejandro Ramos

Sebastian Camilo Herrera Lopez

Russell Sotomayor

Hermes Aguilar

Juan Daniel Diaz Jaramillo

Obed Paz

Iván Arcos

Joel Dominguez Merino

Christian Velázquez

Juan Sarmmiento

Yair Lira

Jimmy Buriticá Londoño

Kevin Javier Serrano Ubillús

Sergio Andrés Bolaños Penagos

Mauricio Doncel

Nestor Quiroga Suárez 🧑🏼‍🚀

Patricio Alberto Novelo Novelo

Valeria Ortíz

Armando Zuluaga Hurtado

Aldo Said Salas Rodríguez

Luciano Nicolas Pereira

EDWIN VASQUEZ VALLE

Milthon Herran

Anthony González (@ThonnyGeek)

Usuario anónimo

User

Carlos Andres Soriano Gonzalez

Hollman Andres Barbon Florez

Beto Martinez

John Cardenas

Sneyder Barreto

Bryan Alexander Portillo Sánchez

Leslie Paz Ore

Web Developer Fundamentals

Este curso tiene una versión actualizada.

HTML y CSS: Fundamentos para Desarrolladores Web

Fundamentos del Desarrollo Frontend: Tecnologías y Prácticas Esenciales

Fundamentos del Desarrollo Backend

Comprende el Rol y las Habilidades de un Desarrollador Full Stack

Diferencias entre Páginas Web Estáticas y Dinámicas

HTML

Anatomía de una Página Web: Estructura y Elementos HTML

Creación y Estructura de un Archivo index.html Básico

Etiquetas HTML: Contenedoras y de Contenido

Listas anidadas y enlaces en HTML para recetas

Anatomía de Etiquetas HTML: Apertura, Cierre y Atributos

Etiquetas multimedia

Formatos de Imágenes y su Uso en Desarrollo Web

Optimización de Imágenes para Web

Uso de etiquetas IMG y FIGURE en HTML

Uso de las etiquetas HTML figure y figcaption para imágenes

Uso de la etiqueta de vídeo en HTML y sus atributos clave

Formularios

Creación de Formularios Web Efectivos con HTML

Creación de Formularios HTML con Campos de Fecha y Hora

Autocompletado y Requerimiento en Formularios HTML

Creación de Menús Desplegables con Select y Data List en HTML

Diferencias entre botones submit e input en formularios HTML

CSS

Introducción a CSS: Estilos y Aplicaciones Básicas

Implementación Básica de CSS en HTML

Pseudo Clases y Pseudo Elementos en CSS

Anatomía de una Regla CSS: Selectores y Declaraciones

Modelo de Caja en CSS: Margen, Relleno y Bordes

Herencia en CSS: Cómo Funciona y Afecta a los Estilos

Especificidad y Orden de Declaración en CSS

Especificidad y Orden en CSS: Crear y Aplicar Estilos Correctamente

Buenas prácticas en CSS: Especificidad y uso adecuado de selectores

Combinadores CSS: Hermanos Adyacentes y Especificidad

Selectores de Hermano General en CSS: Uso y Ejemplos Prácticos

Combinadores CSS: Hijos y Descendientes

Medidas Absolutas y Relativas en CSS: Píxeles y Porcentajes

Comprensión del uso de em en CSS: medidas relativas de fuente

Uso de REM en CSS para Fuentes y Dimensiones

"Uso de Viewport y Dimensiones en CSS: min-width, max-width, min-height"

Posicionamiento en CSS: Static, Absolute y Relative

CSS: Display Block, Inline e Inline-Block

Posicionamiento de Layout Básico en CSS

Posicionamiento y Estilos con Display Flex en CSS

Posicionamiento Vertical con Flexbox en CSS

Uso de Variables Custom en CSS para Optimizar Estilos

Fuentes y Web Fonts en CSS: Cómo Seleccionarlas y Aplicarlas

Responsive Design

Responsive Design: Estrategias Mobile First

Patrones de Diseño Responsive: Mobile First a Desktop

Media Queries para Diseño Responsive Mobile y Tablet

Patrón Layout Shifter en Diseño Mobile First

Patrón de Diseño Responsive: Column Drop en CSS

Diseño Responsive: Estrategias y Ejemplos Prácticos

Imágenes Responsive: Uso de la Etiqueta Picture y Buenas Prácticas

Accesibilidad

Accesibilidad Web: HTML Semántico para Proyectos Inclusivos

Uso de medidas relativas para accesibilidad en texto web

Atributos HTML para Mejorar la Accesibilidad Web

Próximos pasos

Próximos Pasos en Desarrollo Web: Mobile First y Más

Recursos Visuales para Desarrolladores Web

Creación de Menús Desplegables con Select y Data List en HTML