Como fazer um lista suspensa em HTML

Escrito por kay daniels | Traduzido por aline fernandes martins
  • Compartilhar
  • Tweetar
  • Compartilhar
  • Pin
  • E-mail
Como fazer um lista suspensa em HTML
Como criar uma lista suspensa em HTML (drop image by Zbigniew Nowak from Fotolia.com)

Ao criar uma página da web ou um site completo em HTML, você pode precisar de uma lista suspensa. Se você ainda não está familiarizado com essas caixas, eles são aqueles pequenos campos elegantes (normalmente encontrados em formulários HTML) que permitem que você selecione um item em uma lista clicando em uma seta, e depois descendo para encontrar a opção que você quer nessa lista que aparece abaixo da seta. Seja utilizando um editor HTML ou fazendo o código à mão, é fácil criar uma lista suspensa.

Nível de dificuldade:
Fácil

Outras pessoas estão lendo

Instruções

  1. 1

    Crie um formulário HTML para abrigar a sua lista suspensa. Dentro do formulário, você pode usar uma lista suspensa para tudo, desde permitir que o usuário indique suas preferências no envio de um formulário até criar um redirecionamento automático baseado na opção na lista que o usuário clicar.

  2. 2

    Escolha uma tag "Select" se você está usando um editor HTML, ou se você está escrevendo o código. Digite o seguinte:

    <select> <option></option> </select>

  3. 3

    Usando a tag "Option" dentro da sua tag "Select". Adicione todos os itens que você precisa que apareça na lista suspensa. Adicione um valor para cada item na lista, assim o seu script de formulário será capaz de interpretar a seleção do usuário. Você pode adicionar quantas tags "Option" você precisar. Após completar esse passo, a sua tag HTML deve parecer com algo assim:

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

    Tudo o que digitar entre a abertura e fechamento da tag "Option" será o que vai aparecer na lista suspensa. O valor do atributo é para uso de seu próprio formulário.

  4. 4

    Dê a sua tag "Select" um nome, especialmente se você estiver usando diversas listas suspensas dentro de um formulário. O seu formulário pode pedir que a tag "Select" tenha um nome. A sua tab "Select" de abertura deve ficar parecido com isso:

    <select name="My Select Box">

  5. 5

    Defina um atributo de tamanho na sua tag "Select" se você quiser que mais de um item fique visível na lista quando o usuário carregar a página. Por exemplo, para mostrar três itens na página, mude a sua tag assim:

    <select name="My Select Box" size="3">

  6. 6

    Conclua todos os ajustes de programação para o script que você pretende usar com o formulário, e adicione as referências apropriadas em seu arquivo HTML. Os requisitos exatos variam com base no que você pretende fazer com o seu formulário. Mas se você estiver usando JavaScript para causar um redirecionamento de página com a sua lista suspensa, você pode precisar adicionar um atributo onchange para sua tag "Select", que aponta para a localização do seu script. Além disso, o script terá de conter instruções dizendo para qual página redirecionar em cada opção na sua lista suspensa.

Dicas & Advertências

  • Se você quer que um dos itens da sua lista fique pré selecionada quando o usuário carregar a página, adicione essa instrução na tag "Option" desse item: selected="selected".
  • Para permitir que o usuário selecione mais de um item na lista, como em um envio de formulário, adicione a seguinte instrução na tag "Select": multiple="multiple"
  • É sempre uma boa ideia testar as páginas da web em múltiplos navegadores para se certificar que eles são compatíveis com diversas plataformas.

Não perca

Recursos

Filtro:
  • Geral
  • Artigos
  • Slides
  • Vídeos
Mostrar:
  • Mais relevantes
  • Mais lidos
  • Mais recentes

Nenhum artigo disponível

Nenhum slide disponível

Nenhum vídeo disponível