Tag select HTML

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)

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>

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:

1. Defina a primeira <option> com value="".
2. Adicione os atributos disabled e selected a essa opção.
3. 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>

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>

✅ 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:

E se você gosta do nosso conteúdo, não deixe de contribuir adquirindo os serviços e produtos dos nossos apoiadores e empresas que somos associados: