HTML: Criar Campo com Lista em Formulário

Se você trabalha com desenvolvimento web, irá chegar diversos momentos em que será necessário criar campo (input) com lista em um formulário HTML e isso é tão importante que decidir registrar como faço nesse blog.

Com campos com listas, ou inputs do tipo lista, permitem que usuários selecionem uma opção dentre várias possíveis. Isso facilita muito a coleta de informações e ajuda a garantir que os dados fornecidos sejam consistentes. Sim, consistentes porque, a depender do tipo (input), o usuário será forçado a usar apenas os itens da lista, não terão a opção de digitar qualquer coisa. São opções pré-definidas, como seleção de categorias, países, estados, entre outros.

Dica: clique aqui e veja outros posts relacionados a esse.

Criando uma lista com select

No exemplo a seguir mostro uma lista usando o elemento select do HTML:

<label for="lang">Linguagens de programação</label>
      <select name="languages" id="lang">
        <option value="javascript">JavaScript</option>
        <option value="php">PHP</option>
        <option value="java">Java</option>
        <option value="golang">Golang</option>
        <option value="python">Python</option>
        <option value="c#">C#</option>
        <option value="C++">C++</option>
        <option value="erlang">Erlang</option>
      </select>

Nesse exemplo, o usuário não tem liberdade de digitar, ele é forçado a escolher um item existente.

E se quiser usar um placeholder? Um valor de exibição? O elemento <select> não possui um atributo de “placeholder” como o <input>. Mas, podemos adicionar uma opção adicional no início do seu <select> que funcione como um “placeholder”:

<select name="selecao">
  <option value="" disabled selected hidden>Selecione uma opção</option>
  <option value="opcao1">Opção 1</option>
  <option value="opcao2">Opção 2</option>
  <option value="opcao3">Opção 3</option>
</select>

Criando uma lista com input do tipo list

Abaixo posto um exemplo e em seguida explico sobre ele:

<input list="browsers" name="browser" id="browser">
<datalist id="browsers">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Google Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>

um elemento <input> com um atributo list, que cria uma caixa de seleção de texto, mas permite que o usuário insira texto livremente ou escolha de uma lista pré-definida. Aqui está a explicação detalhada:

1. <input list="browsers" name="browser" id="browser">:
   • list="browsers": Este atributo list faz referência ao elemento <datalist> pelo seu ID, neste caso, “browsers”.
   • name="browser": Define o nome do campo, que será enviado como parte de um formulário quando o formulário for enviado.
   • id="browser": Define um identificador único para o elemento.
2. <datalist id="browsers">:
   • id="browsers": Este atributo id fornece um identificador único para o elemento <datalist>, que é referenciado pelo atributo list do <input>.
3. <option value="Internet Explorer">, <option value="Firefox">, …:
   • <option>: Define uma opção dentro do elemento <datalist>.
   • value="...": Define o valor associado a cada opção.