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.
