<select> e <optgroup> em HTML

Este guia abrangente mergulha nos elementos <select> e <optgroup> em HTML,

essenciais para criar menus suspensos (dropdowns) eficazes e organizados em seus formulários
web. Exploraremos desde os fundamentos até técnicas avançadas, com exemplos práticos e
exercícios para solidificar seu conhecimento.

1. O Essencial do <select>:

O elemento <select> é a base dos menus suspensos. Ele apresenta ao usuário uma lista
de opções pré-definidas, permitindo a seleção de uma ou várias opções, dependendo dos
atributos utilizados. Isso simplifica a entrada de dados, reduz erros e garante consistência nas
informações enviadas ao servidor.

2. Atributos do <select>:

 name: Nome do campo, vital para o envio dos dados. Para seleções múltiplas, use
name="campo[]" para criar um array (Matéria que ainda vamos abordar, sequencialmente a
esta aula).

 Id ou Class: Identificador para o elemento, usado para estilização (CSS).

 multiple: Habilita a seleção de múltiplas opções (segurando Ctrl/Cmd).

 size: Número de linhas visíveis. Valor 1 (ou omitido) cria um dropdown tradicional. Valores
maiores exibem uma lista com scroll.

 required: Torna o campo obrigatório.

 disabled: Desativa o elemento, impedindo interação.

 autofocus: Foca o elemento automaticamente ao carregar a página.

3. <option>: Definindo as Opções:

Dentro do <select>, o elemento <option> define cada opção individualmente. Seus

atributos chave são:

 value: Valor enviado ao servidor quando a opção é selecionada. Essencial para

processamento back-end.
  selected: Pré-seleciona a opção. Útil para definir valores padrão.

 disabled: Desativa uma opção específica.

 label: Fornece um rótulo descritivo, especialmente útil para acessibilidade. Se omitido, o

texto dentro da tag <option> será usado como rótulo.

4. Organização com <optgroup>:

Para menus extensos, o <optgroup> agrupa opções relacionadas, melhorando a clareza e

a usabilidade. Seu único atributo obrigatório é:

 label: Define o nome do grupo exibido no menu.

Exemplo de <select> com <optgroup>:

5. Exemplos Práticos Completos:

 Dropdown Simples com Opção Pré-selecionada:

 Seleção Múltipla com Várias Linhas Visíveis:

6. Exercícios Práticos:

1. Cadastro de Usuário: Crie um formulário de cadastro com <select> para:

o País (com <optgroup> por continente).

o Estado/Província

o Múltiplas áreas de interesse.

2. Configurações de Conta: Crie um formulário com <select> para:

o Idioma (com opção pré-selecionada).

o Notificações (seleção múltipla: email, SMS, push).

o Tema (claro, escuro).

3. Formulário de Endereço Detalhado: Crie um formulário para coletar o endereço

completo do usuário. Use <select> para:

o País (com <optgroup> por continente).

o Estado/Província (com opções relevantes para o país selecionado – crie opções

fixas para alguns países como exemplo).

o Cidade (com opções relevantes para o estado/província selecionado – crie opções

fixas para alguns estados como exemplo).

o Tipo de logradouro (Rua, Avenida, Praça, etc.).

4. Seleção de Configurações de Sistema (Complexo): Imagine um software com diversas

opções de configuração. Crie um formulário com vários <select> para configurar:

o Idioma (com <optgroup> por família linguística, como "Românicas", "Germânicas",

etc.).
 o Unidades de medida (Métricas, Imperiais).

o Formato de data (DD/MM/AAAA, MM/DD/AAAA, AAAA/MM/DD, etc.).

o Moeda (com <optgroup> por continente ou bloco econômico).

o Zona horária (com <optgroup> por região).

Este exercício explora a organização de diferentes tipos de configurações em um formulário

complexo.

5. Pesquisa Avançada (Simulada): Crie um formulário simulando uma pesquisa avançada.

Use <select> para:

o Categoria da pesquisa (Produtos, Notícias, Artigos, etc.).

o Período (Última semana, Último mês, Último ano, etc.).

o Ordenação (Relevância, Data, Popularidade, etc.).

o Filtros adicionais (dependendo da categoria selecionada – crie opções fixas para

algumas categorias como exemplo).

6. Formulário de Feedback Detalhado: Crie um formulário para coletar feedback detalhado

sobre um produto ou serviço. Use <select> para:

o Avaliação geral (Excelente, Bom, Regular, Ruim, Péssimo).

o Aspectos específicos a avaliar (Qualidade, Preço, Atendimento, etc. - utilize

<optgroup> para agrupar aspectos relacionados).

o Para cada aspecto, um <select> com opções de avaliação (Excelente, Bom,

Regular, Ruim, Péssimo).

o Motivo da avaliação (se a avaliação geral for Ruim ou Péssimo - crie um <select>
com opções de motivos).

7. Catálogo de Produtos Extenso: Imagine uma loja online com um vasto catálogo.
o Crie um <select> para navegar pelas categorias e subcategorias de produtos.
o Use <optgroup> para organizar as categorias principais (Eletrônicos, Roupas,
Livros, etc.) e, dentro de cada categoria, crie subcategorias usando mais
<optgroup> aninhados (ex: dentro de Eletrônicos, tenha subcategorias como
Smartphones, TVs, Notebooks, etc.).
o Preencha com pelo menos 3 categorias principais e, dentro de cada uma, pelo
menos 3 subcategorias com pelo menos 3 produtos em cada.
o Este exercício foca na organização complexa de um menu com múltiplos níveis de
aninhamento.