HTML5 viene con muchas mejoras y nuevos componentes, aun esta en previo desarrollo la nueva tecnologia de HTML5 y ya esta cobrando muchos votos a su favor.
En esta ocasion daremos un paseo por el componente <datalist></datalist> que viene de la mano con los input, para este ejemplo usaremos:
- input[type=range]
- input[type=text]
La funcion del elemento datalist es dar al input una serie de valores predefinidos, en el caso de que esto sea relevante.
El primer ejemplo que haremos sera con el elemento range y apartir de ahi veremos como trabajar con datalist.
<input type="range" value="0" min="0" max="400" list="numeros" />
<datalist id="numeros">
<option>20</option>
<option>40</option>
<option>80</option>
<option>160</option>
<option>320</option>
</datalist>
y como resultado obtendremos un elemento range(rango) asi :
Lo que hemos hecho ha sido insertar un elemento range que : inicialmente apunte al valor 0 -> value =»0″, que su valor minimo sea 0 -> min=»0″ , que su valor maximo sea 400 -> max=»400″, y ademas lo hemos enlazado a una lista llamada numeros -> list=»numeros».
Esta lista de esta lista obtendremos los valores pre definidos, en este caso 20,40,80,160 , que tal como se muestra en la imagen, son las divisiones que estan en la parte inferior del elemento range.
En cuanto a la declaracion de la lista se usa la etiqueta <datalist> y su correspondiente etiqueta de cierre </datalist>, para crear el enlace entre el input y el datalist : el valor que hay en el parametro list del input debe ser el mismo valor en el id del datalist.
Ahora que hemos visto el funcionamiento del datalist en el elemento range, vamos a ver como funciona el datalist con elemento tipo texto, para ello usaremos la misma sintaxis que en el elemento range, solo omitiremos los datos de value,min y max, para este ejemplo usaremos :
<input type="text" list="nombres">
<datalist id="nombres">
<option value="abel"></option>
<option value="abigail"></option>
<option value="adrian"></option>
<option value="airan"></option>
<option value="alberto"></option>
<option value="claudio"></option>
<option value="clemente"></option>
<option value="samuel"></option>
<option value="sergio"></option>
</datalist>
Y como resultado :
Apesar de que se puede escribir cualquier valor, hemos obtenido un eficiente sistema de sugerencias a puro HTML. Observar que en este caso usamos el parametro value=»valor» para especificar el valor que tendra la opcion del datalist, pero es irrelevante se puede hacer de esta forma o de la forma anterior, dara el mismo resultado.
Hasta la Proxima !!
