Datalist en HTML
Antes, select forzaba una elección cerrada. Datalist es otro trabajo: escribes en un input normal y el navegador sugiere. Puedes elegir o escribir algo no listado.
Por qué existe datalist
Búsqueda, color y ciudad necesitan respuestas comunes sin prohibir las raras. select rechaza fuera de lista; un input vacío no sugiere. datalist llena el hueco con pistas y texto libre.
Respuesta directa
1) datalist con option value. 2) list en el input = id. 3) label y name en el input — el datalist no envía. 4) Sugerencia o texto propio válidos. 5) Usa select cuando deba ser solo de la lista.
📊 Datalist pieces beginners use
| Piece | Role | Beginner tip |
|---|---|---|
| datalist | Suggestion container | Hidden list of hints; not a visible form control alone |
| option (inside datalist) | One suggestion | Prefer value= for the hinted string |
| list (on input) | Points to datalist | Must equal the datalist’s id |
| id (on datalist) | Hook for list= | Unique on the page |
| input | Typed field that submits | Owns name=; suggestions are optional help |
| label | Accessible name | Still required — list suggestions are not a label |
| name (on input) | Submit key | What posts is whatever is in the input |
Demo de sugerencias de navegador
Campo Browser con Firefox a Safari. Escribir Brave funciona — la lista no lo bloquea.
<label for="browser">Browser</label>
<input id="browser" name="browser" list="browsers" placeholder="Type or choose">
<datalist id="browsers">
<option value="Firefox">
<option value="Chrome">
<option value="Edge">
<option value="Safari">
</datalist>
Leer el demo del navegador
- Quien envía es el input, no el datalist
- list debe coincidir con id
- Cada option value es una sugerencia
- name clave el valor del input
- label nombra el campo
- A diferencia de select, no estás limitado a cuatro nombres
Sugerencias de ciudad con datalist
Segundo fragmento: sugiere ciudades y aún permite un pueblo. Contrasta con el select cerrado anterior.
<form action="/ship" method="post">
<label for="city">City</label>
<input id="city" name="city" list="cities" placeholder="Start typing a city" autocomplete="off">
<datalist id="cities">
<option value="Tehran">
<option value="Isfahan">
<option value="Shiraz">
</datalist>
<button type="submit">Continue</button>
</form>
Leer el demo de ciudad
- Mismo patrón label y name
- list/id enlaza las pistas
- Lo enviado es el texto del input
- autocomplete=off opcional
- Siguiente: accessibility más amplia
Elegir datalist vs select vs input
- Debe ser conjunto fijo: select
- Pistas + texto libre: input + list + datalist
- Sin sugerencias: input simple
- datalist no sustituye label ni name
- No anides datalist en el input; enlaza por id
Práctica — cablear sugerencias
- Quinta option Opera
- Rompe el id a propósito y corrige
- Escribe un nombre personalizado
- Añade Mashhad a ciudades
- Reescribe como select; una frase de diferencia
- Frase: datalist sugiere; select restringe
- Nombrar accesible en la siguiente lección
Errores fáciles
- list e id no coinciden
- Esperar rechazo del texto libre
- Olvidar label
- Olvidar name en el input
- name en el datalist
- option vacío sin value
- Mentalidad solo-select en campo libre
Resumen
- datalist + option value = sugerencias para input
- Empareja list e id
- Escribir fuera de la lista está permitido
- label y name en el input
- Usa select para elección cerrada
- Siguiente: accessibility
🧠 Pon a Prueba tu Conocimiento
Pon a Prueba tu Conocimiento
Ponte a prueba con este cuestionario interactivo y descubre qué tan bien entiendes el tema
📝 Instrucciones
- Lee cada pregunta cuidadosamente
- Selecciona la mejor respuesta para cada pregunta
- Puedes repetir el quiz tantas veces como quieras
- Tu progreso se mostrará en la parte superior