Tag select HTML

Tempo de leitura: 4 minutos

Tag select HTML: O elemento <select> é a forma padrão de oferecer aos usuários uma escolha a partir de uma lista pré-definida de opções. É amplamente utilizado em formulários para coletar dados padronizados (como país, estado, categoria), garantindo que a entrada do usuário seja consistente.

Neste artigo, vamos detalhar a tag <select>, o papel crucial dos elementos <option> e <optgroup>, e como utilizar os atributos para controlar a seleção e a acessibilidade.

1. Estrutura Básica: `<select>` e `<option>`

A tag <select> define o controle, mas o envio de dados e as escolhas são definidos pelas tags aninhadas.

A. A Tag `<select>` (O Contêiner)

Atributo	Função	Importância
`name`	Nome que identifica o dado para o servidor.	Obrigatório para envio de formulário.
`id`	Identificador único.	Crucial para vincular com a tag `<label>`.
`required`	Exige que o usuário selecione uma opção válida (não o placeholder).	Validação nativa.
`multiple`	Permite que o usuário selecione várias opções (aparece como uma caixa de lista, e não um dropdown).	Altera o comportamento de seleção.
`size`	Define o número de opções visíveis por vez.	Usado junto com `multiple`.

B. A Tag `<option>` (A Escolha)

O texto entre as tags <option> é o que o usuário vê. O atributo value é o que o servidor recebe.

Atributo value: O valor real que será enviado. Se omitido, o texto visível é enviado.
Atributo selected: Define a opção que estará pré-selecionada quando a página carregar.
Atributo disabled: Impede que a opção seja selecionada (útil para placeholders).

Exemplo Básico:

HTML

<label for="paises">Selecione o País:</label>
<select id="paises" name="pais_origem">
  <option value="brasil" selected>Brasil</option>
  <option value="argentina">Argentina</option>
  <option value="uruguai">Uruguai</option>
</select>

Selecione o País:

2. Acessibilidade e UX: Opção Padrão (Placeholder)

Para que o atributo required funcione corretamente e para guiar o usuário, é uma boa prática criar uma opção inicial que não seja selecionável e que tenha um valor vazio.

Técnica de Placeholder:

Defina a primeira <option> com value="".
Adicione os atributos disabled e selected a essa opção.
Adicione o atributo required ao <select>.

HTML

<label for="estado">Estado:</label>
<select id="estado" name="uf" required>
  <option value="" disabled selected>-- Escolha um Estado --</option> 
  <option value="sp">São Paulo</option>
  <option value="rj">Rio de Janeiro</option>
</select>

Estado:

3. `<optgroup>`: Agrupando Opções Grandes

Em listas extensas (como fusos horários ou produtos), a tag <optgroup> é essencial para a usabilidade e acessibilidade. Ela agrupa opções relacionadas sob um rótulo.

Atributo label: O texto que será exibido como título do grupo. O grupo não pode ser selecionado.

Exemplo de Agrupamento Semântico:

HTML

<select name="continente_pais">
  <optgroup label="América do Sul">
    <option value="br">Brasil</option>
    <option value="ar">Argentina</option>
  </optgroup>
  <optgroup label="Europa">
    <option value="es">Espanha</option>
    <option value="fr">França</option>
  </optgroup>
</select>

4. Seleção Múltipla (`multiple`)

Adicionar o atributo multiple muda drasticamente o comportamento do <select>:

Ele deixa de ser um dropdown e se torna uma caixa de lista rolável.
O usuário pode selecionar múltiplos itens segurando Ctrl/Cmd ou Shift.
É recomendável usar o atributo size junto com multiple para definir quantos itens ficarão visíveis.
Atenção ao name: Para que o servidor receba um array de valores, adicione colchetes ([]) ao atributo name (ex: name="hobbies[]").

Exemplo de Seleção Múltipla:

HTML

<label for="skills">Selecione suas Habilidades:</label>
<select id="skills" name="habilidades[]" multiple size="4">
  <option value="html">HTML</option>
  <option value="css">CSS</option>
  <option value="js">JavaScript</option>
  <option value="python">Python</option>
</select>

Selecione suas Habilidades:

✅ Conclusão Tag select HTML

A tag <select> é a maneira mais limpa e eficiente de limitar a entrada do usuário a um conjunto específico de valores. Ao garantir a vinculação correta com o <label>, utilizar a técnica de placeholder com value="", e empregar o <optgroup> em listas longas, você cria formulários que são rápidos de preencher, fáceis de usar e totalmente acessíveis.

Toda jornada tem um início, e o início para se tornar um desenvolvedor web é dominar as seguintes tecnologias, que você encontra aqui mesmo: