Etiqueta HTML <datalist>

Definição e uso

<datalist> A tag Elemento <input>definir uma lista de opções pré-definidas.

<datalist> A tag é usada para <input> O elemento oferece funcionalidade de "autocompletar". Quando o usuário inserir dados, ele verá uma lista suspensa com opções pré-definidas.

<datalist> O atributo id do elemento deve ser igual a <input> do elemento Atributo list（Isso os ligará juntos）.

Veja também:

Manual de Referência do DOM HTML:Objeto Datalist

Exemplo

Lista de dados pré-definida (conectada ao elemento <input>):

<label for="browser">Por favor, selecione seu navegador da 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>

Experimente você mesmo

Atributos globais

<datalist> A etiqueta também suporta Atributos globais no HTML.

Atributos de evento

<datalist> A etiqueta também suporta Atributos de evento no HTML.

Configurações CSS padrão

A maioria dos navegadores usará os seguintes valores padrão para exibir <datalist> Elemento:

datalist {
  display: none;
}

Suporte do navegador

Os números na tabela indicam a versão do navegador que suportou o elemento pela primeira vez.

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