Etiqueta HTML <datalist>

Definición y uso

<datalist> La etiqueta <label> se utiliza para Elemento <input>definir una lista de opciones predefinidas.

<datalist> La etiqueta se utiliza para <input> El elemento ofrece la función de "completar automáticamente". Cuando el usuario ingrese datos, verá una lista desplegable con opciones predefinidas.

<datalist> El atributo id del elemento debe ser igual a <input> del elemento Atributo list(esto los unirá juntos)。

Vea también:

Manual de Referencia del DOM HTML:Objeto Datalist

Ejemplo

Lista de datos con opciones predefinidas (conectada al elemento <input>):

<label for="browser">Por favor, seleccione 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>

Prueba personalmente

Atributos globales

<datalist> La etiqueta también admite Atributos globales en HTML.

Atributos de eventos

<datalist> La etiqueta también admite Atributos de eventos en HTML.

Configuración CSS por defecto

La mayoría de los navegadores mostrarán los siguientes valores por defecto <datalist> Elemento:

datalist {
  display: none;
}

Compatibilidad del navegador

Los números en la tabla indican la versión del navegador que primero admitió este elemento.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
20.0 10.0 4.0 12.1 9.5