El elemento datalist en HTML5

- Andrés Cruz

In english
El elemento datalist en HTML5

Ver ejemplo Descargar fuente

El elemento <datalist> provisto en HTML5 permite crear un conjunto de opciones viables para establecer como valor en otros elementos de tipo input; en otras palabras, el elemento <datalist> ofrece una lista de opciones predefinidas a través de los elementos <option>; su uso común es establecer elementos inputs de variados tipos con un conjunto de opciones a través del <datalist>:

Navegador preferido 

¿Cómo utilizar los <datalist> en conjunto con los inputs?

Para emplear los <datalist> en conjunto con los inputs se debe establecer algún identificador en el <datalist> a través del atributo id; además se deben de establecer un conjunto de </opcion> como posibles opciones establecidos en el <datalist>:

     <datalist id="navegadores">
     <option value="Internet Explorer">
     <option value="Firefox">
     <option value="Chrome">
     <option value="Opera">
     <option value="Safari">
     </datalist>

Con el valor del identificador anterior, se establece a través del atributo list en el input:

<input list="navegadores" type="text">

También podemos colocar un atributo label a los elementos <option> en conjunto con un texto alternativo:

<datalist id="urls">
	<option value="http://www.google.com" label="Google">
	<option value="http://www.bing.com" label="Bing">
	<option value="http://www.yahoo.com" label="Yahoo">
</datalist>

Buscadores: 

Ver ejemplo Descargar fuente

Andrés Cruz

Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter

Andrés Cruz en Udemy

Acepto recibir anuncios de interes sobre este Blog.