Tag HTML <datalist>


Exemplo

Uma lista de dados com opções pré-definidas (conectadas a um 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>

Definição e uso

A <datalist>tag especifica uma lista de opções predefinidas para um elemento <input>.

A <datalist>tag é usada para fornecer um recurso de "autocomplete" para elementos <input>. Os usuários verão uma lista suspensa de opções predefinidas à medida que inserem dados.

O <datalist>atributo id do elemento deve ser igual ao atributo list do elemento <input> (isso os une).


Suporte ao navegador

Os números na tabela especificam a primeira versão do navegador que suporta totalmente o elemento.

Element
<datalist> 20.0 10.0 4.0 12.1 9.5

Atributos Globais

A <datalist>tag também suporta os Atributos Globais em HTML .


Atributos do evento

A <datalist>tag também suporta os atributos de evento em HTML .


Páginas relacionadas

Referência HTML DOM: objeto Datalist


Configurações padrão de CSS

A maioria dos navegadores exibirá o <datalist>elemento com os seguintes valores padrão:

datalist {
  display: none;
}