Elemento datalist

Si no sabes lo que es un elemento o cómo debes usarlo, te recomiendo leer el tutorial "Tags y atributos en HTML" que puedes encontrar en la sección de tutoriales HTML.

Descripción

El elemento datalist representa una lista de opciones predefinidas que pueden ser utilizadas para proveer sugerencias en muchos controles de formularios (form). Estas opciones pueden ser provistas por el navegador en una lista o como una referencia de autocompletado, dependiendo del navegador y el control con el cual este elemento está relacionado. Un datalist nunca es representado por sí mismo.

Mientras que el elemento datalist actúa como un contenedor, las sugerencias son definidas con el elemento option. El contenido de este elemento será mostrado como una sugerencia cuando el navegador lo considere apropiado (como por ejemplo, cuando el usuario comienza a escribir en un campo de texto).

Para mejorar la compatibilidad, un datalist puede contener a las opciones dentro de un control select, con el fin de proveer una mejor experiencia de usuario en navegadores que no lo soporten.

Para enlazar un datalist a un control, el valor en el atributo id del datalist debe coincidir con el valor del atributo list del control.

Si un valor en el datalist es inválido para el control enlazado, el navegador simplemente lo ignorará. Los autores debería revisar los valores provistos, especialmente en relación con atributos como pattern, min, max, step, etc.

El soporte provisto por los navegadores para el elemento datalist es incompleto. Los autores no deberían confiar en su funcionalidad para características importantes, hasta que el soporte crezca.

Examples

El primer ejemplo muestra un uso básico del elemento datalist. Aquí, un control de texto es enlazado al datalist para esteblecer un conjunto de sugerencias para el control. Este enlace se logra haciendo coincidir el atributo id del datalist con el atributo list del control. Las opciones son provistas con el elemento option.

<p>Formato de imagen: <input type="text" name="formatoimagen" list="listaformatosimagen"></p>
<datalist id="listaformatosimagen">
  <option>PNG</option>
  <option>JPEG</option>
  <option>GIF</option>
  <option>TGA</option>
</datalist>

Formato de imagen:

Los autores deben considerar que los valores provistos por los ítems en un datalist pueden no cumplir con los requerimientos del control asociado. En tales casos, los navegadores simplemente ignorarán los valores de la lista que no cumplen con el formato requerido. Para prevenir que una situación como esta suceda, los autores deberían revisar cuidadosamente los valores provistos en el elemento datalist en relación con el contro asociado y los atributos de éste que acotan el rango de valores aceptados, como pattern, min, max, step, etc.

En el siguiente ejemplo, proveeremos un conjunto de sugerencias no válidas a un campo numérico que serán excluidas por no cumplir con los requerimientos de: el mismo elemento (el valor no es un número), el atributo min (el valor es menor al límite) y el atributo step (el valor tiene más decimales que los permitidos).

<p>Peso del compuesto: <input type="number" name="pesocompuesto" min="2" step="0.01" list="listapesos"></p>
<datalist id="listapesos">
  <option>Muy pesado</option>
  <option>0.57</option>
  <option>0.0215</option>
  <option>4.62</option>
</datalist>

Peso del compuesto:

Por último, proveeremos las opciones de un datalist dentro de un control select, como una forma de mejorar la experiencia de usuario en navegadores que no soportan al elemento. Nota que los navegadores que sí lo soportan, a diferencia de los que no, no mostrarán los contenidos del elemento datalist.

<p><label>Ingresa un nombre para tu mascota: <input type="text" name="nombremascota" list="listamascotas"></label></p>
<datalist id="listamascotas">
  <label>O elige uno de la siguiente lista</label>
    <select name="nombremascota">
      <option>Bela</option>
      <option>Luna</option>
      <option>Daisy</option>
      <option>Brisa</option>
    </select>
  </label>
</datalist>

Atributos

Atributos globales

Para más información acerca de los atributos globales refiérete a esta lista de atributos gloables en HTML5.

Eventos

Eventos globales

Para más información acerca de los eventos globales refiérete a esta lista de eventos globales en HTML5.