acerca de HTML

Referencia de etiquetas

Etiqueta datalist en HTML: sugerencias para input

La etiqueta <datalist> en HTML contiene opciones sugeridas para un <input> asociado mediante el atributo list. Sirve para facilitar la escritura de valores habituales, como ciudades o nombres de cursos, cuando también quieres permitir respuestas que no aparecen en la lista.

<label for="ciudad">Ciudad</label>
<input id="ciudad" name="ciudad" list="ciudades">
<datalist id="ciudades">
  <option value="Puebla"></option>
  <option value="Mérida"></option>
</datalist>

El usuario ve la etiqueta «Ciudad» y un campo de texto. En un navegador compatible, Puebla y Mérida se ofrecen como sugerencias al interactuar con el campo. También puede escribir «Toluca». La lista no aparece como una lista de texto permanente ni es un control independiente.

Sintaxis y contexto válido

list="ciudades" apunta al <datalist id="ciudades"> del mismo documento. El id="ciudad" del campo tiene otra función: permite que <label for="ciudad"> le dé un nombre visible y accesible. No intercambies estas dos asociaciones. El estándar define cómo list identifica la fuente de sugerencias.

Escribe <datalist> y </datalist>: sus etiquetas no pueden omitirse. Puede colocarse donde se admita contenido de frase, por ejemplo dentro de un formulario. Su modelo permite contenido de frase como alternativa, o una secuencia de elementos <option> y elementos de apoyo a scripts. Para una lista sencilla, utiliza opciones directas como en el ejemplo. El HTML Living Standard fija este modelo de contenido.

Solo cuentan como sugerencias las opciones habilitadas cuyo valor no esté vacío. Si cambias Puebla por otra ciudad en value, cambia la sugerencia. Si retiras todo el <datalist>, el campo permanece y acepta texto, pero pierde esas sugerencias.

Atributos: id, list, value y label

<datalist> no tiene atributos específicos. Admite los globales, como id y class; el identificador id debe ser único en el documento. list pertenece a <input>, mientras que value y el atributo label pertenecen a <option>.

En <option value="HTML básico" label="Curso introductorio"></option>, value es el texto que se introduce al elegir la sugerencia. label aporta una descripción; según el navegador, esta puede mostrarse sola o junto al valor. No confundas ese atributo con el elemento <label> que nombra el campo. Consulta las reglas de los atributos de <option>.

Una propiedad CSS como font-size cambia la presentación del campo; no establece sus opciones. En JavaScript, campo.value lee el texto escrito y campo.list permite consultar el elemento asociado. Ninguna de esas propiedades valida que el texto pertenezca a la lista.

Datalist frente a select: sugerencias y opciones obligatorias

¿Datalist impide escribir otros valores? No. Si necesitas elegir exclusivamente entre tres niveles de un curso, usa <select> con sus <option>. Si buscas cursos y admites cualquier término, usa un <input> con sugerencias.

required exige que el campo no quede vacío, pero no obliga a elegir una sugerencia. Otras restricciones, como el formato de type="email" o un pattern aplicable, pueden rechazar una entrada por sus propias reglas. Añadir <datalist> no cambia esas reglas ni crea una validación de pertenencia. En un formulario real, el servidor también debe validar los datos recibidos.

Ejemplo práctico: buscador local de cursos

Guarda este documento como cursos.html en UTF-8 y ábrelo en un navegador. Incluye tres sugerencias y una lista visible de cursos. No necesita servidor, CSS ni archivos adicionales. JavaScript filtra esa lista; las sugerencias las proporciona el navegador.

<!doctype html>
<html lang="es">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Buscar cursos</title>
  </head>
  <body>
    <h1>Cursos disponibles</h1>
    <label for="datalist-busqueda">Buscar un curso</label>
    <p id="datalist-ayuda">
      Puedes elegir una sugerencia o escribir cualquier término.
    </p>
    <input
      type="search"
      id="datalist-busqueda"
      list="datalist-cursos"
      aria-describedby="datalist-ayuda"
    >
    <datalist id="datalist-cursos">
      <option value="HTML básico"></option>
      <option value="CSS para formularios"></option>
      <option value="JavaScript inicial"></option>
    </datalist>
    <p id="datalist-estado" aria-live="polite">
      Hay tres cursos. Sin JavaScript, puedes consultar la lista completa.
    </p>
    <ul id="datalist-resultados">
      <li>HTML básico</li>
      <li>CSS para formularios</li>
      <li>JavaScript inicial</li>
    </ul>

    <script>
      const campo = document.getElementById("datalist-busqueda");
      const estado = document.getElementById("datalist-estado");
      const cursos = [
        ...document.querySelectorAll("#datalist-resultados li")
      ];

      function filtrar() {
        const termino = campo.value.trim().toLocaleLowerCase("es");
        let coincidencias = 0;

        cursos.forEach((curso) => {
          const nombre = curso.textContent.toLocaleLowerCase("es");
          curso.hidden = !nombre.includes(termino);
          if (!curso.hidden) coincidencias += 1;
        });

        estado.textContent = coincidencias === 0
          ? "No hay cursos que coincidan con ese término."
          : `Cursos encontrados: ${coincidencias}.`;
      }

      campo.addEventListener("input", filtrar);
      filtrar();
    </script>
  </body>
</html>
  1. Al abrirlo con JavaScript, aparecen los tres cursos y «Cursos encontrados: 3.».
  2. Escribe «CSS»: queda visible «CSS para formularios». La búsqueda ignora mayúsculas y minúsculas, pero distingue letras con y sin acento.
  3. Elige una sugerencia si el navegador la ofrece: el campo recibe su valor y la lista se filtra. Escribe después «accesibilidad», que no es una sugerencia: el texto se acepta y aparece el mensaje de ausencia de coincidencias.
  4. Vacía el campo para recuperar los tres cursos. Desactiva JavaScript y recarga: el campo y las sugerencias compatibles permanecen, pero la lista completa ya no se filtra.

Retira list="datalist-cursos" para simular la ausencia de sugerencias: el buscador sigue aceptando texto y el filtrado con JavaScript funciona. Retirar todo el <datalist> produce el mismo resultado. Cambiar solo una opción modifica las sugerencias, pero no los cursos del <ul>; mantén ambos conjuntos coherentes al adaptar el ejemplo.

La búsqueda solo modifica esta página. No consulta una base de datos, no envía información y no guarda el término al recargar. Si conviertes este caso en una inscripción con cursos cerrados, elige <select> y valida la selección en el servidor.

Accesibilidad y compatibilidad

Conserva una etiqueta visible y las instrucciones fuera de <datalist>. En el buscador, aria-describedby asocia la ayuda al campo y aria-live="polite" permite comunicar el recuento sin mover el foco. Los cursos permanecen escritos en la página para poder consultarlos aunque no haya sugerencias.

Prueba Tab para llegar al campo, escribe una parte del nombre y comprueba las sugerencias con las flechas y Enter cuando el navegador permita esa interacción; Escape debe permitir cerrar el desplegable. Verifica también zoom, contraste y la combinación de navegador y tecnología asistiva de tu público. No añadas roles redundantes ni prometas anuncios idénticos.

Consulta del 3 de octubre de 2026: MDN advierte limitaciones de accesibilidad, como opciones que no aumentan de tamaño con el zoom, poca capacidad de estilizar el desplegable y combinaciones de lector de pantalla y navegador que no anuncian sus opciones. El CSS del campo no garantiza controlar esa interfaz.

Los datos de compatibilidad de MDN, consultados en esa fecha, registran implementación parcial en Firefox para Android desde la versión 79: no aparece el desplegable de opciones. También separan el soporte según el tipo de <input>. Que funcionen las sugerencias con text o search no demuestra que funcionen con fechas, colores o rangos. Por eso <datalist> no sustituye universalmente a <select>.

¿Por qué no aparecen las sugerencias?

Comprueba estas causas en orden:

  • list no coincide exactamente con el id del <datalist>, o hay un id duplicado que apunta primero a otro elemento.
  • Las opciones están deshabilitadas, tienen valores vacíos o incompatibles con el tipo de campo.
  • El texto escrito no coincide con las sugerencias que el navegador decide mostrar. Vacía el campo y vuelve a interactuar con él.
  • El tipo no admite list, como password, o la combinación de tipo y navegador tiene soporte limitado. Prueba un campo type="text" para aislar el problema.

autocomplete="on" no crea esta asociación: el autocompletado del navegador y las sugerencias de <datalist> son mecanismos distintos. Tampoco utilices el texto de una opción como único lugar para explicar qué debe introducirse.

Las etiquetas relacionadas cumplen tareas propias: <input> recoge el valor, <label> nombra el campo, <option> define cada sugerencia y <select> ofrece una selección cerrada. Consulta sus guías para ampliar esos detalles y elige según la necesidad de entrada libre y la accesibilidad comprobada en tu entorno.