0Pricing
HTML Academy · Aula

Menus pendentes select e option

Crie menus suspensos de seleção com select e option.

Menus pendentes select e option é uma aula grátis de HTML Academy no CoddyKit. Esta é a aula 1 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de HTML Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de HTML Academy inclui 4 aulas no total.

O elemento select

O elemento <select> cria um menu suspenso:

<label for="country">Country</label>
<select id="country" name="country">
  <option value="us">United States</option>
  <option value="gb">United Kingdom</option>
  <option value="de">Germany</option>
</select>

Valor da opção versus texto

Cada <option> tem um value (enviado ao servidor) e um texto exibido:

<select name="color">
  <option value="">-- Select a color --</option>  <!-- placeholder -->
  <option value="#ff0000">Red</option>
  <option value="#00ff00">Green</option>
  <option value="#0000ff">Blue</option>
</select>
<!-- value="#ff0000" is submitted; "Red" is displayed -->

Atributo selected

Selecione previamente uma opção com o atributo selected:

<select name="plan">
  <option value="free">Free</option>
  <option value="pro" selected>Pro (Recommended)</option>
  <option value="enterprise">Enterprise</option>
</select>

optgroup para opções categorizadas

Agrupe opções relacionadas com <optgroup>:

<select name="language">
  <optgroup label="Frontend">
    <option value="html">HTML</option>
    <option value="css">CSS</option>
    <option value="js">JavaScript</option>
  </optgroup>
  <optgroup label="Backend">
    <option value="python">Python</option>
    <option value="node">Node.js</option>
  </optgroup>
</select>

Atributo de seleção múltipla

Permita selecionar várias opções com o atributo multiple:

<label for="skills">Select your skills (Ctrl+Click for multiple)</label>
<select id="skills" name="skills" multiple size="5">
  <option value="html">HTML</option>
  <option value="css">CSS</option>
  <option value="js">JavaScript</option>
  <option value="python">Python</option>
</select>
<!-- size controls how many options are visible -->
<!-- Submitted as multiple values: skills=html&skills=css -->

Atributo de tamanho

O atributo size controla quantas opções ficam visíveis:

<!-- size=1 (default): dropdown -->
<select size="1">...</select>

<!-- size>1: list box -->
<select size="4">
  <option>HTML</option>
  <option>CSS</option>
  <option>JavaScript</option>
  <option>Python</option>
</select>

Opções e grupos desativados

Desative opções individuais ou grupos inteiros:

<select name="plan">
  <option value="free">Free</option>
  <option value="pro">Pro</option>
  <option value="enterprise" disabled>Enterprise (Contact Sales)</option>
</select>

<select>
  <optgroup label="Legacy (deprecated)" disabled>
    <option value="v1">Version 1</option>
  </optgroup>
</select>

Estilização de select

A estilização do <select> nativo é limitada — veja o que funciona:

select {
  appearance: none;   /* remove native dropdown arrow */
  -webkit-appearance: none;
  width: 100%;
  padding: 0.5rem 2.5rem 0.5rem 0.75rem;
  border: 1px solid #ddd;
  border-radius: 4px;
  background-image: url("arrow-down.svg");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 1rem;
  cursor: pointer;
}

Menus suspensos personalizados versus select nativo

Veja os compromissos envolvidos ao considerar um componente de menu suspenso personalizado:

  • Select nativo — acessível por padrão, adequado para dispositivos móveis e funciona sem JavaScript
  • Menu suspenso personalizado — oferece controle total da estilização, mas exige uma implementação completa de ARIA e do controle pelo teclado

Prefira o <select> nativo na maioria dos casos de uso.

Lendo o valor selecionado em JavaScript

Obtenha ou defina o valor selecionado com JavaScript:

const select = document.getElementById('country');

// Get selected value:
console.log(select.value);  // e.g. 'us'

// Get selected option text:
console.log(select.options[select.selectedIndex].text);

// Set selected value:
select.value = 'de';

// Listen for changes:
select.addEventListener('change', () => {
  console.log('Selected:', select.value);
});

Padrão de opção de preenchimento

Crie uma opção de preenchimento que não possa ser selecionada:

<select name="role" required>
  <option value="" disabled selected>-- Select your role --</option>
  <option value="dev">Developer</option>
  <option value="designer">Designer</option>
  <option value="pm">Product Manager</option>
</select>
<!-- disabled + selected: shows as placeholder
     value="" + required: fails validation if not changed -->

Verificação rápida

Qual elemento agrupa opções relacionadas dentro de um menu suspenso select?

Recapitulação: select e option

Essenciais dos menus suspensos:

  • <select> + <option> — menu suspenso
  • value em option — o que é enviado ao servidor
  • selected — seleciona previamente uma opção
  • <optgroup label> — agrupa opções relacionadas
  • multiple — permite várias seleções
  • size — exibe N opções sem menu suspenso

Perguntas Frequentes

A aula “Menus pendentes select e option” é grátis?

Sim — o texto completo de “Menus pendentes select e option” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de HTML Academy, atualize para CoddyKit PRO. O curso de HTML Academy inclui 4 aulas no total.

O que vou aprender em “Menus pendentes select e option”?

Crie menus suspensos de seleção com select e option. Você pratica HTML Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar HTML Academy?

Nenhuma experiência prévia é necessária. HTML Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 1 de 4.

Quanto tempo leva a aula “Menus pendentes select e option”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de HTML Academy?

Sim. Cada aula de HTML Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

  1. Menus pendentes select e option
  2. Textarea para entrada de várias linhas
  3. Grupos de caixas de seleção e botões de opção
  4. Datalist para preenchimento automático
← Voltar para HTML Academy