Volver
Ctrl+Space
◑
Copiar
Descargar
Restaurar
Ejecutar
Ctrl+Enter
<!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <title>datalist</title> </head> <body> <h2>datalist — autocompletado con sugerencias</h2> <h3>Ciudad — texto libre con sugerencias</h3> <label for="ciudad">Ciudad:</label> <input type="text" id="ciudad" name="ciudad" list="ciudades"> <datalist id="ciudades"> <option value="Buenos Aires"> <option value="Córdoba"> <option value="Rosario"> <option value="Mendoza"> <option value="La Plata"> <option value="Mar del Plata"> <option value="Posadas"> </datalist> <p>Empezá a escribir "co" o "ma" y mirá las sugerencias que aparecen.</p> <h3>Color — paleta con opciones predefinidas</h3> <label for="color">Color favorito:</label> <input type="color" id="color" name="color" list="paleta" value="#E34F26"> <datalist id="paleta"> <option value="#E34F26"> <option value="#264DE4"> <option value="#F7DF1E"> <option value="#777BB4"> <option value="#00758F"> </datalist> <h3>Range con marcas</h3> <label for="volumen">Volumen (marcas en 0, 25, 50, 75, 100):</label><br> <input type="range" id="volumen" name="volumen" min="0" max="100" list="marcas" value="50"> <datalist id="marcas"> <option value="0"> <option value="25"> <option value="50"> <option value="75"> <option value="100"> </datalist> <p id="valorVolumen">Valor actual: 50</p> <hr> <p><strong>Diferencia clave:</strong> a diferencia de un <select>, el usuario puede escribir cualquier valor — las opciones del <datalist> son solo sugerencias, nunca obligan a elegir una de la lista.</p> <script> document.getElementById("volumen").addEventListener("input", (e) => { document.getElementById("valorVolumen").textContent = "Valor actual: " + e.target.value; }); </script> </body> </html>