Artigos HTML e CSS HTML SELECT: Criando uma lista de seleção

<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>
Código 1. Exemplo de uma lista de seleção feita com 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>
Código 2. Uso do name

required

O atributo required indica que esse campo é obrigatório, e portanto, a opção selecionada não deve ter valor vazio.

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.

size

Utilizada em conjunto com o atributo multiple para definir quantos itens devem aparecer por vez na lista de seleção.

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:

Exemplo 2

Aqui temos um exemplo de uma lista um pouco maior, utilizando required para impedir uma seleção com valor vazio:

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:

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.