DataList en HTML5

01/Feb/2012 HTML5 , 2 Comentarios
Ejemplos de Artículos sobre HTML5

Un DataList en HTML5 es una lista de opciones predefinidas que le podemos pasar al elemento INPUT le podemos aplicar un DataList en HTML5. Pues podemos aplicarlo al tipo text o aun tipo URL o al tipo range. Es decir, de HTML5. Es decir, el agente de usuario o navegador propocionará esa lista como posibles opciones.

Pero, a qué tipos del elemento INPUT le podemos aplicar un DataList en HTML5. Pues podemos aplicarlo al tipo text o aun tipo URL o al tipo range. Es decir, sobre una caja de text o sobre un slider. En el primer caso el DataList serán las opciones propuestas y predefinidas que se le darán al usuario y en el caso del slider serán diferentes puntos dentro del slider.

Pero lo primero será definir la lista de opciones del DataList. El elemento es datalist.


 

Como vemos, la lista tiene un identificador denotado por el atributo id y una lista de opciones. Cada una de las opciones de la lista la definimos mediante un elemento option.

Si queremos podemos dar a los valores de la lista un texto alternativo. Para ello utilizaremos el atributo label.


 

Como podemos comprobar la estructura de la lista es realmente sencilla. El siguiente paso será el asociar la lista al elemento INPUT. Para ello utilizamos el atributo list del INPUT, el cual deberá de hacer referencia al id de la lista.

Así si creamos un input que haga referencia a la primera lista sería:

y si creamos una referencia desde un tipo URL a la segunda lista sería:

Ya solo nos queda ver el efecto que produce el elemento DataList y su comportamiento de opciones por defecto en nuestro navegador. Eso sí, de momento solo el navegador web Opera da soporte a los DataList de HTML5.

Vídeos sobre HTML5


2 comentarios en “DataList en HTML5”

Víctor Cuervo

Víctor Cuervo

@Juanjo,

El atributo list apunta a un ID de un DATALIST. Es por eso que el input apunta al ID «lista». ¿Dónde crees que está el error?

Gracias.

Víctor Cuervo

Juanjo

Creo que el ejemplo del campo input debería ser:

Ahora lo que tienes es list=»lista»

¿verdad?

¿Algo que nos quieras comentar?

Déjanos tu comentario, no te preocupes que tu email no será publicado

*

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.