Listas suspensas: select, option e optgroup

Além dos campos de texto e das caixas de seleção/botões de rádio, muitas vezes precisamos que o usuário escolha uma ou mais opções de uma lista extensa. Para isso, o HTML oferece as tags <select>, <option> e <optgroup>, que juntas criam listas suspensas (dropdowns) ou caixas de seleção com múltiplas opções.

A tag <select>: o contêiner da lista

A tag <select> é o contêiner principal para a lista suspensa. Ela define o campo de seleção e agrupa todas as opções.

Atributos importantes de <select>:

• id: Identificador único para o campo (importante para o label).
• name: Nome do campo que será enviado ao servidor.
• required: Torna a seleção de uma opção obrigatória.
• size: Define o número de opções visíveis ao mesmo tempo. Se size > 1, a lista se torna uma caixa de rolagem em vez de um dropdown.
• multiple: Um atributo booleano que, se presente, permite que o usuário selecione várias opções da lista (geralmente segurando Ctrl/Cmd e clicando). Quando multiple é usado, o name deve terminar com [] (ex: name="frutas[]") para que o servidor receba um array de valores.

Exemplo básico de <select>:

<form>
  <label for="cidade">Selecione sua cidade:</label><br>
  <select id="cidade" name="cidade_usuario" required>
    <!-- Opções virão aqui -->
  </select>
</form>

A tag <option>: as opções da lista

A tag <option> representa uma opção individual dentro de uma lista <select>.

Atributos importantes de <option>:

• value: O valor que será enviado ao servidor se esta opção for selecionada. É crucial que este valor seja significativo para o backend.
• selected: Um atributo booleano que, se presente, faz com que esta opção venha pré-selecionada por padrão. Em uma lista de seleção única, apenas uma <option> pode ter selected.
• disabled: Desabilita esta opção específica, impedindo que o usuário a selecione.

Exemplo de <select> com <option>:

<form>
  <label for="fruta">Escolha sua fruta favorita:</label><br>
  <select id="fruta" name="fruta_favorita" required>
    <option value="">-- Selecione uma fruta --</option> <!-- Opção de placeholder -->
    <option value="maca">Maçã</option>
    <option value="banana" selected>Banana</option> <!-- Banana virá pré-selecionada -->
    <option value="laranja">Laranja</option>
    <option value="uva" disabled>Uva (indisponível)</option>
  </select>
</form>

A tag <optgroup>: agrupando opções

A tag <optgroup> é usada para agrupar opções relacionadas dentro de uma lista <select>. Ela melhora a organização e a usabilidade, especialmente para listas longas.

Atributos importantes de <optgroup>:

• label: O texto que será exibido como o título do grupo.
• disabled: Desabilita todas as opções dentro deste grupo.

Exemplo de <select> com <optgroup>:

<form>
  <label for="continente">Selecione um país:</label><br>
  <select id="continente" name="pais_selecionado" required>
    <option value="">-- Selecione um país --</option>
    <optgroup label="América do Sul">
      <option value="br">Brasil</option>
      <option value="ar">Argentina</option>
      <option value="cl">Chile</option>
    </optgroup>
    <optgroup label="Europa">
      <option value="pt">Portugal</option>
      <option value="es">Espanha</option>
      <option value="fr">França</option>
    </optgroup>
    <optgroup label="Ásia" disabled>
      <option value="jp">Japão</option>
      <option value="cn">China</option>
    </optgroup>
  </select>
</form>

Seleção múltipla com multiple

Quando o atributo multiple é adicionado à tag <select>, o usuário pode selecionar várias opções.

<form>
  <label for="interesses">Selecione seus interesses (segure Ctrl/Cmd para múltiplas opções):</label><br>
  <select id="interesses" name="interesses_usuario[]" multiple size="4">
    <option value="programacao">Programação</option>
    <option value="design">Design</option>
    <option value="marketing">Marketing</option>
    <option value="fotografia">Fotografia</option>
    <option value="musica">Música</option>
  </select>
</form>

Importante: Note o [] no name="interesses_usuario[]". Isso é uma convenção comum em muitas linguagens de programação backend (como PHP) para indicar que múltiplos valores serão enviados para o mesmo nome de campo, facilitando o tratamento como um array.

Conectando label e <select>

Assim como nos campos <input>, é essencial conectar cada <label> ao seu <select> correspondente usando os atributos for e id para melhorar a acessibilidade.

<label for="estado">Estado:</label>
<select id="estado" name="estado_residencia">
  <!-- Opções -->
</select>

Resumindo

• <select>: O contêiner principal para a lista suspensa.
  • name: Nome do campo para o servidor.
  • required: Torna a seleção obrigatória.
  • size: Número de opções visíveis.
  • multiple: Permite seleção de várias opções (use name="[]").
• <option>: Uma opção individual dentro do <select>.
  • value: O valor enviado ao servidor.
  • selected: Pré-seleciona a opção.
  • disabled: Desabilita a opção.
• <optgroup>: Agrupa opções relacionadas dentro do <select>.
  • label: Título do grupo.
  • disabled: Desabilita o grupo inteiro.
• Sempre conecte o <label> ao <select> usando for e id para acessibilidade.