HTML datalist

HTML datalist

A tag HTML <datalist> é um elemento do HTML5 que define uma lista de valores sugeridos para uma tag <input> . Esses valores sugeridos são listados no controle de entrada como uma lista suspensa e as opções disponíveis serão filtradas conforme o usuário insere dados no controle de entrada.

Veja o exemplo uma lista de dados com opções pré-definidas conectadas a um elemento <input>:

<label for="tutorial">Selecione uma opção:</label>
<input list="frontend" name="tutorial" id="tutorial">

<datalist id="frontend">

  <option value="Html5">
  <option value="Css3">
  <option value="jQuery">
  <option value="JavaScript">
  <option value="Design Responsivo">

</datalist>

Para associar um <datalist> a um controle <input> , você deve especificar um id valor para o <datalist> que corresponda ao atributo list no <input>: ( neste exemplo, o valor “frontend” )

Veja o Resultado!

Selecione uma opção:

Definição 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 “autocomplete” para elementos <input>. Os usuários verão uma lista suspensa de opções predefinidas à medida que inserem dados.

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

Neste artigo abordamos sobre a tag HTML datalist.

Veja outros artigos Relacionados.

HTML Select

HTML colgroup