HTML SELECT: Guia Pr�tico

<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.

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.

HTML SELECT: Criando uma lista de sele��o

Nesta documentação de HTML falaremos sobre a tag select e como ela pode ser utilizada para criar uma lista de seleção. Veremos como permitir que o usuário escolha uma ou mais opções em uma lista de dados limitados.