Formulario: datalist

 Esse código cria um campo onde a pessoa pode digitar ou escolher um sabor sugerido.

<div></div>

→ Bloco usado para organizar essa parte do formulário.

<label for="flavor"> Escolha o sabor: </label>

→ Texto explicando o campo.
→ for="flavor" liga o label ao campo com id="flavor".

→ <select> cria um menu suspenso.

<input type="text" list="flavors" name="flavor">

→ Campo de texto comum.

→ type="text" = permite digitar.

→ list="flavors" conecta com a lista de sugestões.

→ name="flavor" = nome enviado no formulário.

<option value="Chocolate">

<option value="Baunilha">

<option value="Morango">

<option value="Pistache">

→ Sugestões mostradas ao usuário.

→  <option> são as respostas disponíveis.

→  value="" = valor enviado ao sistema.

Como funciona:

A pessoa começa digitando:

Ch...

→ O navegador sugere:

Chocolate

Diferença para select:

• select = só escolhe opções prontas.
• datalist = escolhe ou digita outro valor.

Campo livre com sugestões automáticas.