Etiqueta HTML <datalist>
La etiqueta HTML <datalist> crea una lista de opciones predefinidas para <input>. Aprende a usarla con ejemplos prácticos.
La etiqueta <datalist> es uno de los elementos HTML5. Proporciona una lista de sugerencias predefinidas para un campo <input>, ofreciendo un menú desplegable de autocompletado mientras el usuario puede seguir escribiendo cualquier valor que desee. A medida que el usuario empieza a escribir, el navegador filtra las sugerencias y muestra las que coinciden.
Esto es lo que diferencia a <datalist> de un menú <select>: un <select> limita al usuario a un conjunto fijo de opciones, mientras que <datalist> solo sugiere valores — el campo sigue siendo de texto libre.
Las opciones predefinidas se encierran en elementos <option> anidados.
Cómo se conectan las tres partes
Un datalist funcional siempre implica tres partes que se enlazan mediante un id:
- Un elemento
<input>con un atributolist. - Un elemento
<datalist>cuyoidcoincide con ese valor delist. - Uno o más elementos
<option>dentro del<datalist>que contienen las sugerencias.
<input list="ice-cream-flavors" />
<datalist id="ice-cream-flavors">
<option value="Chocolate"></option>
<option value="Vanilla"></option>
<option value="Strawberry"></option>
</datalist>El enlace se hace exclusivamente por nombre: el valor de list en el input ("ice-cream-flavors") debe ser idéntico al id del <datalist>. Si no coinciden exactamente, no aparecerán sugerencias. El propio <datalist> no se muestra en la página — solo sus opciones se muestran en el menú desplegable del input.
Los elementos hijo <option>
Cada sugerencia es un único elemento <option>. Hay dos formas de proporcionar su texto:
- Atributo
value— el texto que se inserta en el input cuando se elige la opción. - Etiqueta visible — texto entre las etiquetas de apertura y cierre, mostrado al usuario.
Si solo estableces value, esa misma cadena se muestra e inserta a la vez:
<option value="Firefox"></option>También puedes combinar un valor técnico con una descripción más legible usando el atributo label (o texto de etiqueta), que algunos navegadores muestran junto al valor:
<option value="FF" label="Firefox"></option>En este caso el input recibe FF, mientras que el desplegable puede mostrar el más legible Firefox. La representación de pares valor/etiqueta separados varía entre navegadores, por lo que en la mayoría de los casos mantener value legible para humanos es el enfoque más sencillo y fiable.
<datalist> vs. <select>
Ambos presentan una lista de opciones, pero resuelven problemas distintos:
<datalist> | <select> | |
|---|---|---|
| Entrada del usuario | Texto libre — puede escribir cualquier cosa | Restringido a las opciones listadas |
| Papel de la lista | Sugerencias / autocompletado | Los únicos valores permitidos |
| Escritura para filtrar | Sí, filtra mientras escribes | Limitado |
| Valor enviado | Lo que hay en el campo | Siempre una de las opciones |
| Úsalo cuando | Quieres pistas pero permites valores personalizados (buscador, dominio de correo, ciudad) | La respuesta debe ser uno de un conjunto fijo (código de país, nivel de plan) |
Elige <datalist> cuando las sugerencias ayudan pero un valor personalizado sigue siendo válido; elige <select> cuando solo los valores ofrecidos son aceptables.
Sintaxis
La etiqueta <datalist> va en pares. El contenido se escribe entre las etiquetas de apertura (<datalist>) y cierre (</datalist>).
Ejemplo de la etiqueta HTML <datalist>:
Etiqueta HTML <datalist>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<label for="browser">Choose browser</label>
<input list="browsers" id="browser" />
<!-- The list attribute value matches the datalist id -->
<datalist id="browsers">
<option value="Opera"></option>
<option value="Safari"></option>
<option value="Firefox"></option>
<option value="Google Chrome"></option>
<option value="Maxthon"></option>
</datalist>
</body>
</html>Usar un <label> real (en lugar de un <div> simple) y apuntar su atributo for al id del input conecta el título con el campo, de modo que los lectores de pantalla lo anuncian y al hacer clic en la etiqueta se enfoca el input.
Ejemplo: un selector de país
Un datalist funciona bien para inputs con muchos valores conocidos donde aún se quiere permitir texto libre — como elegir un país dentro de un formulario:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<form>
<label for="country">Your country</label>
<input list="countries" id="country" name="country" />
<datalist id="countries">
<option value="Argentina"></option>
<option value="Brazil"></option>
<option value="Canada"></option>
<option value="France"></option>
<option value="Germany"></option>
<option value="Japan"></option>
<option value="United States"></option>
</datalist>
<button type="submit">Submit</button>
</form>
</body>
</html>Compatibilidad con navegadores
<datalist> es compatible con todos los navegadores de escritorio modernos. Ten en cuenta las advertencias en móviles: la compatibilidad en iOS Safari ha sido históricamente incompleta o inconsistente entre versiones, y algunos navegadores más antiguos o menos comunes ignoran el elemento por completo. Dado que el campo es simplemente un input de texto normal, los navegadores que no renderizan las sugerencias muestran un input simple — por lo tanto usa <datalist> como una mejora progresiva, no como tu única forma de indicar los valores válidos.
Atributos
La etiqueta <datalist> no tiene atributos específicos del elemento. Todo su funcionamiento se realiza a través del id (referenciado por el atributo list del input), y las sugerencias viven en sus elementos hijo <option>. Sí admite los Atributos globales y los Atributos de evento.