Etiqueta HTML <lista de datos>


Ejemplo

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

<label for="browser">Choose your browser from the list:</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>

Definición y uso

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

La <datalist>etiqueta 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 <datalist>atributo id del elemento debe ser igual al atributo list del elemento <input> (esto los une).


Compatibilidad con navegador

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

Element
<datalist> 20.0 10.0 4.0 12.1 9.5

Atributos globales

La <datalist>etiqueta también es compatible con los atributos globales en HTML .


Atributos de eventos

La <datalist>etiqueta también es compatible con los atributos de eventos en HTML .


páginas relacionadas

Referencia HTML DOM: objeto de lista de datos


Configuración predeterminada de CSS

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

datalist {
  display: none;
}