Cuando empecé a profundizar en el desarrollo web, uno de los elementos que me llamó la atención por su simplicidad y efectividad fue la etiqueta datalist en HTML.
La capacidad de proporcionar sugerencias automáticas mientras el usuario escribe en un formulario es algo que puede mejorar significativamente la experiencia del usuario.
En este artículo, te contaré todo lo que aprendí sobre el datalist HTML, cómo usarlo correctamente y algunos ejemplos prácticos que te ayudarán a implementarlo en tus proyectos web.
¿Qué es la etiqueta Datalist en HTML?
La etiqueta datalist en HTML es un elemento que se utiliza en formularios para proporcionar una lista de opciones predefinidas para un campo de entrada.
Este elemento permite que los usuarios vean una lista de sugerencias mientras escriben, lo cual facilita la selección de una opción y mejora la experiencia de usuario. Es muy útil cuando se necesita ofrecer varias opciones de entrada en un formulario sin sobrecargar la interfaz.
En términos sencillos, el datalist en HTML te permite ofrecer una lista de opciones de manera dinámica, lo que puede ahorrar tiempo a los usuarios y minimizar los errores en los formularios.
Cómo usar la etiqueta Datalist en HTML
Usar la etiqueta es muy sencillo, y en mi experiencia, es algo que todo desarrollador web debería conocer.
Te muestro cómo implementarlo paso a paso:
Paso 1: Crear la estructura básica de un formulario con datalist
Lo primero que necesitas es definir un formulario y asociar un campo de entrada con la etiqueta datalist.
Aquí te dejo un ejemplo simple:
<form action="#">
<label for="countries">Selecciona un país:</label>
<input list="countries" id="country" name="country" placeholder="Escribe un país">
<datalist id="countries">
<option value="España">
<option value="Francia">
<option value="Alemania">
<option value="Italia">
<option value="México">
</datalist>
</form>
En este ejemplo, el campo de entrada (<input>) está vinculado al datalist mediante el atributo list, el cual hace referencia al id del datalist.
Los usuarios pueden escribir en el campo y, a medida que lo hagan, las sugerencias de países aparecerán debajo del campo de entrada.
Paso 2: Agregar más opciones dinámicamente
Puedes agregar tantas opciones como desees dentro del datalist. Es importante mencionar que, aunque este tipo de lista de sugerencias es útil, no es una lista desplegable tradicional como un <select>, sino que ofrece sugerencias mientras el usuario escribe.
Aquí tienes un ejemplo con más opciones:
<datalist id="fruits">
<option value="Manzana">
<option value="Plátano">
<option value="Cereza">
<option value="Naranja">
<option value="Fresa">
</datalist>
Paso 3: Mejorar la accesibilidad
Al trabajar con formularios y la etiqueta datalist, es importante asegurarse de que la funcionalidad sea accesible.
Utilizar el atributo placeholder y asegurarse de que la lista de opciones sea legible es clave para mejorar la accesibilidad de tu formulario.
<input list="fruits" id="fruit" name="fruit" placeholder="Escribe una fruta">
En este caso, el placeholder ayuda a que el usuario sepa qué tipo de opciones puede esperar en el campo de entrada.
4 Usos que le puedes dar a Datalist en HTML
La etiqueta datalist tiene varios usos prácticos que puedes aplicar en diferentes tipos de formularios.
Aquí te doy 4 ejemplos basados en mi experiencia y en proyectos reales.
1. Selección de países en formularios
En un formulario de registro o compra en línea, puedes usar datalist para permitir a los usuarios seleccionar rápidamente su país sin tener que escribirlo completo.
<label for="country">País:</label>
<input list="countries" id="country" name="country">
<datalist id="countries">
<option value="Argentina">
<option value="Brasil">
<option value="Chile">
<option value="Colombia">
</datalist>
Este ejemplo permite que el usuario empiece a escribir y vea las sugerencias de países disponibles.
2. Selección de productos en una tienda en línea
Si estás creando una tienda en línea y tienes una lista extensa de productos, un datalist HTML puede ayudar a los usuarios a encontrar rápidamente lo que buscan.
<label for="product">Producto:</label>
<input list="products" id="product" name="product">
<datalist id="products">
<option value="Cámara">
<option value="Smartphone">
<option value="Laptop">
<option value="Tablet">
</datalist>
Con este ejemplo, el usuario puede buscar productos de manera eficiente sin navegar por largas listas.
3. Búsqueda de direcciones de correo electrónico
Si tu formulario requiere ingresar un correo electrónico, puedes usar un datalist en HTML para sugerir dominios de correo electrónico comunes, como Gmail, Yahoo, etc.
<label for="email">Correo Electrónico:</label>
<input list="emails" id="email" name="email">
<datalist id="emails">
<option value="gmail.com">
<option value="yahoo.com">
<option value="outlook.com">
</datalist>
Este tipo de implementación mejora la experiencia de usuario al reducir los errores en la entrada de datos.
4. Búsqueda de fechas o rangos de tiempo
Para aplicaciones que requieren ingresar fechas, como reservas o citas, un datalist en HTML puede ser útil para ofrecer sugerencias sobre fechas comunes o rangos de tiempo.
<label for="appointment">Fecha de cita:</label>
<input list="dates" id="appointment" name="appointment">
<datalist id="dates">
<option value="2023-06-01">
<option value="2023-06-15">
<option value="2023-07-01">
</datalist>
Este ejemplo permite al usuario seleccionar fechas rápidamente sin tener que escribir todo el formato.
Aprende más sobre HTML y cómo optimizar tus habilidades en desarrollo web, en el Bootcamp de Desarrollo Web de KeepCoding. En este curso, aprenderás a crear interfaces interactivas, trabajar con formularios y mucho más, todo mientras aplicas tus conocimientos en proyectos reales. ¡No pierdas la oportunidad de avanzar en tu carrera!
