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

Clase 19 de 55 • Curso Definitivo de HTML y CSS

Clase anteriorSiguiente clase

Resumen

¿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.