MEJOR SITIO PARA DESARROLLADORES WEB
W3Schools en español. La guía de etiquetas completa

Ua En De Fr

Etiqueta HTML <datalist>


Ejemplo

Una lista de datos con opciones predefinidas (conectadas a un elemento <input>):

<label for="browser">Elija su navegador de la lista:</label>
<input list="browsers" name="browser" id="browser">

<datalist id="browsers">
  <option value="Edge">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>
Try it Yourself »

Definición y uso

La etiqueta <datalist> especifica una lista de opciones predefinidas para un elemento <input>.

La etiqueta <datalist> se utiliza para proporcionar una función de "autocompletar" para los elementos <input>. Los usuarios verán una lista desplegable de opciones predefinidas a medida que ingresan datos.

El atributo id del elemento <datalist> debe ser igual al atributo de lista del elemento <input> (esto los une).


Soporte del navegador

Los números de la tabla especifican la primera versión del navegador que es totalmente compatible con el elemento.

Elemento
<datalist> 20.0 10.0 4.0 12.1 9.5

Atributos globales

La etiqueta <datalist> también soporta los Atributos Globales en HTML.


Atributos del evento

La etiqueta <datalist> también soporta los Atributos de Evento en HTML.


Páginas relacionadas

Referencia HTML DOM: Objeto de Datalist.


Configuración CSS predeterminada

La mayoría de los navegadores mostrarán el elemento <datalist> con los siguientes valores predeterminados:

datalist {
  display: none;
}