En este post veremos como veremos como crear una lista de valores predeterminados en un campo de formulario. Básicamente, para esto debemos emplear el elemento datalist, un elemento que se introduce con el estándar HTML5.
Este elemento permite desplegar una lista de opciones que se mostrarán cuando el usuario comienza a escribir en un campo del formulario, con lo cual se facilita el autocompletado del mismo. Si el usuario pulsa dos veces dentro del campo del formulario el navegador mostrará todas las opciones disponibles.
El elemento <datalist> actúa como un contenedor, esto significa que las sugerencias se deben definir con otro elemento, en este caso, elemento <option>.
Para vincular un elemento <datalist> con un campo de formulario debemos asegurarnos de que el valor en el atributo id del datalist coincida con el valor del atributo list del campo de formulario, de lo contrario el navegador no podrá mostrar la lista de valores sugeridos..
Veamos un ejemplo básico, en el cual solicitamos al usuario que introduzca un deporte que le gusta.
<label for="deporte">Selecciona un deporte:</label>
<input list="listaDeportes" id="deporte" name="introducir_deporte" />
<datalist id="listaDeportes">
<option value="Natacion">
<option value="Ciclismo">
<option value="Baseball">
<option value="Futbol">
<option value="Tenis">
</datalist>En el código de arriba definimos un campo de entrada de datos mediante el elemento input. Dentro de la etiqueta de apertura agregamos el atributo list cuya función es la de definir los valores predeterminados de la lista de sugerencias que mostrará el navegador.
Luego agregamos un elemento <datalist> que a su vez contiene varios elementos option con los valores de la lista de sugerencias.
Y este es el resultado en el navegador:
See the Pen Insertar lista de opciones predefinidas en un campo de formulario by simplicitytree (@simplicitytree) on CodePen.
Fíjate que si comienzas a escribir el nombre de algún deporte en el campo de entrada de datos, automáticamente el navegador mostrará una sugerencia debajo del input. Obviamente, si el nombre del deporte que escribiste no se encuentra definido en la lista el navegador simplemente lo ignorará.
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.
- Los mejores Frameworks CSS: una guía completa para desarrolladores - septiembre 14, 2024
- Qué es una página web estática, cómo funciona y cómo crearla - septiembre 2, 2024
- Números en JavaScript - agosto 2, 2024
