HTML: Como Criar Listas Suspensas com a Tag Option

Introdução

A tag HTML <option> é usada para definir as opções em uma lista suspensa em um formulário HTML. Ela está anexada à tag <select> e suas variantes, como <datalist> e <optgroup>. Esta tag ajuda os usuários a fazer uma seleção a partir de uma lista de escolhas. Este laboratório irá guiá-lo através dos passos para implementar uma lista suspensa HTML usando a tag <option>.

Nota: Você pode praticar a codificação em index.html e aprender Como Escrever HTML no Visual Studio Code. Por favor, clique em 'Go Live' no canto inferior direito para executar o serviço web na porta 8080. Em seguida, você pode atualizar a aba Web 8080 para visualizar a página web.

Criar um elemento `<form>`

Crie um arquivo HTML chamado index.html no seu editor de texto preferido.

Comece criando um formulário HTML básico:

<form></form>

Criar um elemento `<select>` e adicionar opções

Dentro do elemento <form>, adicione um elemento <select>, que criará uma lista suspensa.

<form>
  <select>
    <option value="option1">Option 1</option>
    <option value="option2">Option 2</option>
    <option value="option3">Option 3</option>
  </select>
</form>

Aqui, adicionamos três tags <option> dentro das tags <select> com o atributo value definido como "option1", "option2" e "option3".

Adicionar um prompt

Vamos adicionar um texto de prompt. Dentro da tag <select>, adicione o seguinte código:

<select>
  <option value="" disabled selected>Select an option</option>
  <option value="option1">Option 1</option>
  <option value="option2">Option 2</option>
  <option value="option3">Option 3</option>
</select>

Aqui, adicionamos uma nova tag <option> com os seguintes atributos:

value="" que define o valor para uma string vazia.
disabled que desabilita a opção de ser selecionada.
selected que é usado para indicar a escolha padrão para a lista suspensa.
O texto dentro da tag <option> que atua como um prompt.

Adicionar um botão de envio (submit)

Precisamos de um botão de envio para submeter o formulário. Adicione o seguinte código após a tag <select>:

<form>
  <select>
    <option value="" disabled selected>Select an option</option>
    <option value="option1">Option 1</option>
    <option value="option2">Option 2</option>
    <option value="option3">Option 3</option>
  </select>

  <br /><br />

  <input type="submit" value="Submit" />
</form>

Salve o arquivo e execute-o em um navegador web para ver a lista suspensa em ação.

Resumo

Neste laboratório, aprendemos como usar a tag HTML <option> para criar uma lista suspensa. Começamos criando um formulário HTML, depois adicionamos um elemento <select>, adicionamos opções dentro dele com o atributo value e adicionamos um texto de prompt. Finalmente, adicionamos um botão de envio para submeter o formulário. A tag <option> desempenha um papel crucial na criação de formulários HTML dinâmicos.

Opção de Lista de Seleção HTML