Artigo original: HTML Select Tag – How to Make a Dropdown Menu or Combo List
Você usa a tag select do HTML para criar menus suspensos para que os usuários selecionem os valores que eles querem. É uma funcionalidade essencial na coleta de dados a serem enviados para um servidor.
A tag select normalmente é usada dentro de um elemento de formulário (form), com os itens a serem escolhidos ficando dentro de outra tag, <option>. Ela também pode ser usada como um elemento sozinho, que ainda estaria associado com um formulário por meio de um de seus atributos especiais, form.
Neste tutorial, vou mostrar como criar um menu suspenso com a tag select para que você possa começar a coletar dados nos seus projetos de programação. Também vou mostrar um pouco sobre como estilizar a tag select, pois ela é notoriamente difícil de estilizar.
Aqui temos um Scrim interativo sobre como fazer um menu suspenso ou lista de opções em HTML (inglês)
Atributos da tag select
Antes de me aprofundar em como criar um menu suspenso com a tag select, precisamos discutir os atributos que a tag select recebe.
Os atributos são:
name: você precisa atribuir um nome para cada elemento do formulário pois é usado para referenciar o dado depois que for submetido ao servidor.multiple: esse atributo deixa o usuário selecionar múltiplas opções do menu suspenso.required: esse é tipicamente usado para validação. Com ele, o formulário não será submetido a menos que o usuário selecione pelo menos uma opção do menu suspenso.disabled: esse atributo impede o usuário de interagir com as opções (deixando-as desabilitadas).size: expresso em números, o atributo size (tamanho) é usado para especificar quantas opções poderão ser vistas ao mesmo tempo.autofocus: esse atributo é usado em todos campos de entrada de formulário, incluindo a tag select, para especificar qual campo de entrada deverá estar focado quando a página carregar.
Como criar um menu suspenso com a tag select
Para criar um menu suspenso com a tag select, você primeiro precisará de um elemento de formulário (tag form). Isso ocorre porque você também terá um botão de envio nele (no elemento de formulário) para enviar os dados para o servidor.
<form action="#">
<label for="lang">Language</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>
<input type="submit" value="Submit" />
</form>
Eu adicionei um CSS simples para centralizar o menu suspenso e o botão, e dar um fundo cinza claro para o corpo da página (body):
body {
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto;
height: 100vh;
background-color: #f1f1f1;
}
input {
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto;
}
Para torná-lo mais elaborado e acessível, você também pode anexar a caixa de seleção a um elemento de rótulo (label), para que fique focado quando o rótulo for clicado. Você pode fazer isso com este código:
<form action="#">
<label for="lang">Language</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>
<input type="submit" value="Submit" />
</form>
Eu coloquei o símbolo da cerquilha (#) como valor do atributo action para você não receber um 404 ao clicar no botão de enviar.
Agora, porém, temos que fazer uma pequena alteração no CSS:
body {
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto;
height: 100vh;
background-color: #f1f1f1;
}
input {
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto;
}
label {
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto;
}
select {
margin-bottom: 10px;
margin-top: 10px;
}
No final, este é o resultado:
Não termina aqui. Um dos itens do menu suspenso aparece por padrão e será selecionado se o usuário clicar no botão de enviar assim que acessar a página.
Essa, no entanto, não é uma boa experiência para o usuário. Você pode se livrar disso colocando "Select a language" (selecione uma linguagem) como o primeiro elemento do menu.
<form action="#">
<label for="lang">Language</label>
<select name="languages" id="lang">
<option value="select">Select a language</option>
<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>
<input type="submit" value="Submit" />
</form>
Quando o usuário clicar para selecionar um item, o menu suspenso cobrirá o botão de enviar – outra coisa que afeta negativamente a experiência do usuário.
Você pode alterar isso com o atributo size (tamanho), que mostrará um certo número de itens por padrão e adicionará uma rolagem para os outros itens do menu.
Isso também deixa você remover o primeiro item falso, pois alguns itens estarão visíveis para o usuário automaticamente.
<form action="#">
<label for="lang">Language</label>
<select name="languages" id="lang" size="4">
<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>
<input type="submit" value="Submit" />
</form>
Com o atributo multiple (múltiplo), você pode permitir que o usuário selecione vários itens do menu.
<form action="#">
<label for="lang">Language</label>
<select name="languages" id="lang" multiple>
<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>
<input type="submit" value="Submit" />
</form>
Isso faz com que 4 itens estejam visíveis por padrão. Para selecionar mais de um item, o usuário precisa segurar a tecla Shift ou Control e, então, selecionar com o mouse.
Você pode fazer mais ainda com as tags <select> e <option>. Você também pode fazer uma caixa de seleção com agrupamentos com o elemento <optgroup> dentro da tag <select>.
Você pode converter o menu que já foi feito para ter agrupamentos assim:
<form action="#">
<label for="lang">Language</label>
<select name="languages" id="lang">
<optgroup label="first-choice">
<option value="select">Select a language</option>
<option value="javascript">JavaScript</option>
<option value="php">PHP</option>
<option value="java">Java</option>
<option value="golang">Golang</option>
</optgroup>
<optgroup label="second-choice">
<option value="python">Python</option>
<option value="c#">C#</option>
<option value="C++">C++</option>
<option value="erlang">Erlang</option>
</optgroup>
</select>
<input type="submit" value="Submit" />
</form>
Como estilizar o elemento select
Estilizar o elemento select geralmente é confuso e renderizado de maneira inconsistente entre os navegadores. Você, contudo, sempre pode tentar o seguinte:
<form action="#">
<label for="lang">Language</label>
<select name="languages" id="lang">
<option value="select">Select a Language</option>
<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>
<input type="submit" value="Submit" />
</form>
select {
margin-bottom: 10px;
margin-top: 10px;
font-family: cursive, sans-serif;
outline: 0;
background: #2ecc71;
color: #fff;
border: 1px solid crimson;
padding: 4px;
border-radius: 9px;
}
Nesse exemplo de código CSS acima, eu dei ao texto na caixa de seleção a seguinte aparência:
- uma família de fonte cursiva e cor branca,
- um contorno (outline) de 0 para remover o contorno feio quando está em foco,
- um fundo esverdeado,
- uma borda carmesim (vermelha) de 1 pixel,
- um raio de borda de 4 pixels para obter uma borda ligeiramente arredondada em todos os lados
- e um preenchimento de 4 pixels para espaçar um pouco as coisas.
A caixa de seleção agora parece melhor:
Conclusão
A tag select é muito útil quando você está fazendo menus suspensos ou listas de opções (pré-definidas) em HTML. É como um botão de opção (radio button, em inglês) e uma caixa de seleção (checkbox, em inglês), tudo em um único lugar.
Lembre-se de que, com o botão de opção, você só consegue selecionar um item de uma lista. Com a caixa de seleção, porém, você pode selecionar vários itens. Select é mais flexível, pois você consegue configurá-lo para que aceite um único item ou diversos itens.
Um problema com a tag select é a grande dificuldade para estilizá-la. Uma solução razoável é utilizar uma biblioteca do CSS que ofereça ótimas classes utilitárias para estilizar um formulário junto com o elemento select.
Eu espero que este tutorial tenha deixado você mais familiarizado com a tag select para que você possa começar a usá-la em seus projetos.
Obrigado pela leitura e continue programando.