La etiqueta <datalist> se utiliza para proporcionar la función de autocompletar en los archivos HTML. Se puede usar con una etiqueta de entrada para que los usuarios puedan completar fácilmente los datos en los formularios usando seleccionar los datos.
Sintaxis:
<datalist> ... </datalist>
Ejemplo 1: El siguiente código explica la etiqueta de la lista de datos.
HTML
<!DOCTYPE html> <html> <body> <form action=""> <label>Your Cars Name: </label> <input list="cars"> <!--datalist Tag starts here --> <datalist id="cars"> <option value="BMW"/> <option value="Bentley"/> <option value="Mercedes"/> <option value="Audi"/> <option value="Volkswagen"/> </datalist> <!--datalist Tag ends here --> </form> </body> </html>
Producción:
Ejemplo 2: Se puede acceder fácilmente al objeto de etiqueta <datalist> mediante un tipo de atributo de entrada.
HTML
<!DOCTYPE html>
<html>
<body>
<form action="">
<label>Your Cars Name: </label>
<input list="cars" id="carsInput" />
<!--datalist Tag starts here -->
<datalist id="cars">
<option value="BMW" />
<option value="Bentley" />
<option value="Mercedes" />
<option value="Audi" />
<option value="Volkswagen" />
</datalist>
<!--datalist Tag ends here -->
<button onclick="datalistcall()" type="button">
Click Here
</button>
</form>
<p id="output"></p>
<!-- Will display the select option -->
<script type="text/javascript">
function datalistcall() {
var o1 = document.getElementById("carsInput").value;
document.getElementById("output").innerHTML =
"You select " + o1 + " option";
}
</script>
</body>
</html>
Producción:
Navegadores compatibles:
- Google Chrome 20.0 y superior
- Borde 12.0 y superior
- Internet Explorer 10.0 y superior
- Firefox 4.0 y superior
- Ópera 9.5 y superior
- Safari 12.1 y superior
Publicación traducida automáticamente
Artículo escrito por bilal-hungund y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA