Caixa de seleção no documento HTML

Formulários / Tutorial HTML5

O que é uma caixa de seleção?

Uma caixa de seleção, ou selectbox, é um elemento de formulário que permite ao usuário escolher uma opção de uma lista suspensa. É útil para limitar as escolhas do usuário a um conjunto predefinido de opções.

Para adicionar uma caixa de seleção em HTML, utiliza-se a tag <select> junto com a tag <option> para definir cada uma das opções:

<select>
  <option value="opcao1">Opção 1</option>
  <option value="opcao2">Opção 2</option>
  <option value="opcao3">Opção 3</option>
</select>

Como agrupar as opções da caixa de seleção?

Para agrupar opções dentro de uma caixa de seleção, utiliza-se a tag <optgroup>. Isso é útil para categorizar opções relacionadas, facilitando a navegação do usuário.

Exemplo de uso do <optgroup>:

<select>
  <optgroup label="Frutas">
    <option value="maca">Maçã</option>
    <option value="banana">Banana</option>
  </optgroup>
  <optgroup label="Vegetais">
    <option value="cenoura">Cenoura</option>
    <option value="brocolis">Brócolis</option>
  </optgroup>
</select>

Para selecionar múltiplas opções em uma caixa de seleção com o atributo multiple, o usuário deve manter pressionada a tecla Ctrl (ou Cmd no Mac) enquanto clica nas opções desejadas. Isso permite que várias opções sejam destacadas e selecionadas simultaneamente.

Como definir um valor padrão na caixa de seleção?

Para definir um valor padrão em uma caixa de seleção, utilize o atributo selected na tag <option> correspondente. Isso faz com que a opção especificada seja selecionada automaticamente quando a página é carregada.

Exemplo de caixa de seleção com valor padrão:

<select>
  <option value="opcao1">Opção 1</option>
  <option value="opcao2" selected>Opção 2</option>
  <option value="opcao3">Opção 3</option>
</select>

Como adicionar uma legenda na caixa de seleção?

Para adicionar uma legenda (uma opção sem valor) em uma caixa de seleção, utilize uma tag <option> sem o atributo value. Isso é útil para fornecer uma instrução ou descrição dentro da lista de opções.

Exemplo de caixa de seleção com legenda:

<select>
  <option>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>

Como adicionar múltipla escolha na caixa de seleção?

Para permitir que o usuário selecione múltiplas opções em uma caixa de seleção, adiciona-se o atributo multiple à tag <select>. Com isso, o usuário pode selecionar mais de uma opção ao mesmo tempo.

Exemplo de caixa de seleção com múltipla escolha:

<select multiple>
  <option value="opcao1">Opção 1</option>
  <option value="opcao2">Opção 2</option>
  <option value="opcao3">Opção 3</option>
</select>

Para controlar o tamanho da caixa de seleção, utilize o atributo size. Este atributo define o número de opções visíveis na lista suspensa. Por exemplo, para mostrar 4 opções visíveis:

<select multiple size="4">
  <option value="opcao1">Opção 1</option>
  <option value="opcao2">Opção 2</option>
  <option value="opcao3">Opção 3</option>
  <option value="opcao4">Opção 4</option>
  <option value="opcao5">Opção 5</option>
</select>

Principais atributos do <select>:

  • name: Define o nome do elemento, utilizado para identificar o dado quando o formulário é enviado.
  • multiple: Permite a seleção de múltiplas opções.
  • size: Define o número de opções visíveis na lista suspensa.
  • disabled: Desabilita a caixa de seleção, impedindo a interação do usuário.
  • autofocus: Define que a caixa de seleção deve receber foco automaticamente ao carregar a página.
  • required: Indica que o campo deve ser preenchido antes de enviar o formulário.
  • id: Define um identificador único para o elemento, utilizado para associar o <select> a um <label> ou para manipulação via JavaScript.

Exemplo de uso dos atributos:

<select name="frutas" multiple size="4" disabled required id="frutasSelect">
  <option value="maca">Maçã</option>
  <option value="banana">Banana</option>
  <option value="laranja">Laranja</option>
  <option value="uva">Uva</option>
</select>