El elemento datalist en HTML5

01-12-2014 - Andrés Cruz

El elemento datalist en HTML5 In english

Este material forma parte de mi curso y libro completo; puedes adquirirlos desde el apartado de libros y/o cursos.

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.

Conozca nuestros cursos sobre Laravel, CodeIgniter, Flutter, Electron, Django, Flask y muchos más!

Ver los cursos
¡Hazte afiliado en Gumroad!

!Cursos desde!

4$

En Academia

Ver los cursos

!Libros desde!

1$

Ver los libros
!Web Alojada en Hostinger!