<select>
Nesta documentação de HTML veremos como utilizar a tag <select> para construir listas de seleção.
Apresentaremos aqui a tag <select>.
<select>: na prática
<label>Disponível para Viajar?</a>
<select name="viagem">
<option value="sim">Sim</option>
<option value="nao">Não</option>
</select>
<select>: Atributos
A tag <select> possui atributos que são utilizados para o seu funcionamento e até mesmo para modificar o seu comportamento. Veremos alguns desses atributos neste tópico.
name
O atributo name é essencial quando vamos utilizar o select dentro de um formulário, pois é através dele que o valor será recebido no back-end, como mostra a Código 2.
<form>
<select name="plataforma">
<option value="">Escolha uma plataforma de jogos</option>
<option value="xbox">Xbox Series</option>
<option value="ps5">PS5</option>
<option value="nsw">Nintendo Switch</option>
<option value="pcg">PC Gaming</option>
</select>
</form>
required
O atributo required indica que esse campo é obrigatório, e portanto, a opção selecionada não deve ter valor vazio.
See the Pen Required by Eduardo Soares (@eduscxbox) on CodePen.
Nesse exemplo, o usuário não conseguirá enviar o formulário se a opção selecionada possuir valor vazio.
multiple
Modifica a lista de seleção para que o usuário possa escolher mais de uma opção.
Para selecionar múltiplos itens o usuário segura a tecla CTRL e clique com o mouse nas opções que deseja selecionar.
See the Pen Multiple by Eduardo Soares (@eduscxbox) on CodePen.
size
Utilizada em conjunto com o atributo multiple para definir quantos itens devem aparecer por vez na lista de seleção.
See the Pen Size by Eduardo Soares (@eduscxbox) on CodePen.
Exemplos de select
Abaixo você pode conferir alguns outros exemplos de uso de select no HTML.
Exemplo 1
Uma lista de seleção simples, com duas opções, e apenas uma possibilidade de escolha:
See the Pen Exemplo 1 by Eduardo Soares (@eduscxbox) on CodePen.
Exemplo 2
Aqui temos um exemplo de uma lista um pouco maior, utilizando required para impedir uma seleção com valor vazio:
See the Pen Exemplo 2 by Eduardo Soares (@eduscxbox) on CodePen.
Exemplo 3
Por fim, temos um exemplo de uma lista de seleção múltipla, onde o usuário pode escolher quantas opções preferir:
See the Pen Exemplo 3 by Eduardo Soares (@eduscxbox) on CodePen.
Através do uso de select podemos permitir ao usuário escolher uma ou mais opções dentro de uma lista com conteúdo pré-definido.
