En un post anterior vimos el elemento datalist que sirve para definir opciones predeterminadas para un campo de formulario de entrada de datos (elemento input).
Para que ambos elementos se vinculen es necesario añadir el atributo list al elemento input que define el campo de formulario, y luego agregar un atributo id al elemento datalist que será el contenedor de las sugerencias que los usuarios seleccionarán para autocompletar el campo de entrada de datos.
Es importante que el valor en el atributo id del datalist coincida con el valor del atributo list del campo de formulario, o lo contrario el navegador no podrá mostrar la lista de valores sugeridos.
<form action="datos.php" method="POST">
<label for="mascotaFavorita">Mascota favorita:</label><br>
<input type="text" name="lista_mascota" list="mascotaFavorita">
<datalist id="mascotasFavorita">
<option value="Perro">
<option value="Gato">
<option value="Serpiente">
<option value="Tortuga">
</datalist>
</form>En el código anterior los atributos id y list tienen el mismo valor, en este caso “mascotaFavorita”, y esto permite que el elemento datalist se asocie al input, con lo cual el navegador podrá mostrar la lista de valores sugeridos mientras el usuario escribe en el campo de formulario.
Inicialmente me formé como Técnico en Anális y Diseño de sistemas. Luego ingresé a la escuela de negocios, hice una licenciatura en Administración y obtuve una especialización (Post-grado) en Alta Dirección Empresarial. Desde el año 2007 me dedico a la creación de sitios web, lo cual combino con la consultoría y la capacitación de tecnologías de Internet.
- TypeScript vs. JavaScript: ¿Cuál es mejor para tus proyectos? - octubre 31, 2024
- Optimización de imágenes: clave para un diseño web eficiente - septiembre 28, 2024
- Objetos en JavaScript - septiembre 21, 2024
