HTML: Menus suspensos

Quando existem várias opções e não é interessante exibir todas de uma vez, o select permite criar um menu suspenso.

<select>
  <option value="html">HTML</option>
  <option value="css">CSS</option>
  <option value="javascript">JavaScript</option>
</select>

O <select> cria a caixa de seleção, enquanto cada <option> representa uma opção da lista. O value define o valor que será enviado quando aquela opção for escolhida.

Alguns atributos ajudam a controlar o comportamento das opções:

• selected — define uma opção como selecionada ao carregar a página;
• disabled — impede que a opção seja escolhida;
• hidden — oculta a opção da lista;
• required — exige que uma opção seja escolhida antes de enviar o formulário.

Essa combinação é útil, por exemplo, para criar uma opção inicial que funciona apenas como orientação:

<select required>
  <option value="" selected disabled hidden>Selecione uma opção</option>
  <option value="html">HTML</option>
  <option value="css">CSS</option>
  <option value="javascript">JavaScript</option>
  <option value="python">Python</option>
</select>

Assim, o usuário vê uma instrução clara antes de escolher e não consegue enviar o formulário sem selecionar uma opção válida.

Veja como fica na prática:

Ao clicar na caixa, as opções são exibidas em um menu suspenso:

E este é o código responsável por criar esses campos:

<h1>Escolha uma opção</h1>

<div class="formulario">
  <label for="tecnologia">Qual você quer aprender?</label>

  <select id="tecnologia" name="tecnologia" required>
    <option value="" selected disabled hidden>Selecione uma opção</option>

    <option value="html">HTML</option>
    <option value="css">CSS</option>
    <option value="javascript">JavaScript</option>
    <option value="python">Python</option>
  </select>
</div>

Com o label e o required juntos, o menu fica mais claro pra quem preenche e mais seguro pra quem recebe os dados.