Tag <datalist>

Definições e uso

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

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

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

Exemplos


<label for="browser">Escolha o seu navegador na 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>


<!DOCTYPE html>
<html>
<body>

<h1>Tag datalist</h1>

<label for="browser">Escolha o seu navegador na 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>

</body>
</html>

Resultado

Atributos

Essa tag suporta apenas Atributos Globais.