DataList en HTML5

01/Feb/2012 HTML5 , 2 Comentarios

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.

  1. <datalist id="lista">
  2. <option value="0">
  3. <option value="2">
  4. <option value="4">
  5. <option value="6">
  6. <option value="8">
  7. <option value="10">
  8. </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.

  1. <datalist id="listaurls">
  2. <option value="http://www.ayudaenlaweb.com" label="Ayuda en la Web">
  3. <option value="http://lineadecodigo.com" label="Línea de Código">
  4. <option value="http://www.dudasprogramacion.com" label="Dudas de Programación">
  5. </datalist>

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:

  1. <input type="range" min="0" max="10" value="3" step="1" id="mislider" list="lista">

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

  1. <input type="url" id="misurl" list="listaurls" size="100">

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?

Responder a Juanjo Cancelar respuesta

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

*

*