Adicione Caixas de Seleção aos Formulários HTML

Também conhecidas como Combo Boxes ou Menu Select, as Caixas de Seleção são controles usados para facilitar o preenchimento de Formulários HTML pois os internautas escolhem a opção desejada através de cliques (sem precisar digitar).


Para criar uma Caixa de Seleção, usamos a Tag <select>. Além disso, devemos usar uma Tag <option> para cada opção.

Para entender melhor, preparei um exemplo simples.Pintei a Tag <select> de azul e as Tags <option> de vermelho apenas para facilitar o aprendizado. Confira o código:
<html>
<head>
<title>Qual o seu Time do Coração?</title>
</head>
<body>
<h1>Qual o seu Time do Coração?</h1>
<form method="post" action="cadastrar-enquete.php">
<select name="time">
<option value="bota">Botafogo</option>
<option value="fla">Flamengo</option>
<option value="flu">Fluminense</option>
<option value="vasco">Vasco da Gama</option>
</select>
<input type="submit" value="Enviar" />
<input type="reset" value="Cancelar" />
</form>
</body>
</html>
Observe o resultado:
Caixa de Seleção (Combo Box)

Repare que dessa forma, a Caixa de Seleção é uma alternativa ao uso de Botões de Radio.

Criando uma Caixa de Seleção Múltipla

É possível também permitir que os internautas selecionem mais de uma opção. Para isso, devemos utilizar os parâmetros size e multiple na Tag <select>. O primeiro serve para aumentar a altura da Caixa de Seleção e o segundo, permite a seleção de duas ou mais opções pressionando as Teclas Shift ou Ctrl.

Veja um exemplo:
<html>
<head>
<title>Informe seu conhecimento em Informática</title>
</head>
<body>
<h1>Informe seu conhecimento em Informática</h1>
<form method="post" action="cadastrar-dados.php">
<select name="info[]" size="3" multiple>
<option value="win">Windows</option>
<option value="woird">Word</option>
<option value="excel">Excel</option>
<option value="net">Internet</option>
</select>
<br /><br />
<input type="submit" value="Enviar" />
<input type="reset" value="Cancelar" />
</form>
</body>
</html>
Observe o resultado:
Caixa de Seleção Múltipla

Repare que dessa forma, a Caixa de Seleção é uma alternativa ao uso de Caixas de Verificação (Checkboxes).

Nota: Em breve publicarei um post que explica como o PHP recebe valores de Caixas de Seleção. Mais a frente, explicarei o mesmo em outras linguagens.

Dica: Se você quiser que uma ou mais opções da Caixa de Seleção já apareça marcada ao carregar a página, basta adicionar o atributo selected nas Tags <option> desejadas conforme abaixo:
<option value="fla" selected>Flamengo</option>

EDITADO:
Como não é possível adicionar tags aos comentários aqui no blog, segue a resposta da pergunta feita pelo Moisés. Aliás, uma ótima pergunta.

Ele quer saber como fazer a Caixa de Seleção funcionar como um menu de navegação rápida, ou seja, ao selecionar uma opção disponível, ser direcionado automaticamente para uma outra página.

Para isso, teremos que usar Javascript. Observe o exemplo abaixo:
<select onchange="location.href=this.value">
     <option value="#">Selecione</option>
     <option value="http://www.botafogo.com.br">Botafogo</option>
     <option value="http://www.flamengo.com.br">Flamengo</option>
     <option value="http://www.fluminense.com.br">Fluminense</option>
     <option value="http://www.vasco.com.br">Vasco da Gama</option>
</select>

Observe que coloquei os endereços dos sites no parâmetro value do option de cada clube e adicionei o parâmetro onchange à tag select chamando o javascript:

location.href=this.value;

Ou seja, ao alterar (escolher uma opção do select), eu direciono o usuário para o value selecionado.

Abraço amigos!

28 comentários:

  1. Pode ter certeza que este post estará ajudando muita gente na rede,HTML é um conhecimento adquirido para quem tem dom,pois é muito complicado,mesmo quem ja tem conhecimento fica quebrando cabeça com tantos códigos.
    Att,Márcio Roberto, Nova Serrana (MG)

    ResponderExcluir
  2. Me ajudou muito no meu trabalho da escola

    ResponderExcluir
  3. rapaz me ajudou bastante no site que estou fazendo, apenas gostaria de saber como se faz para quando o usuario fizer uma escolha ele ir para uma nova pagina no caso a opção escolhida

    Sávio
    Juazeiro do Norte/Ce.

    ResponderExcluir
    Respostas
    1. Fala aí Sávio,

      Expliquei isso no post:
      http://denecir.blogspot.com.br/2010/09/receber-dados-formulario-php.html

      Dá uma olhada lá e se não entender, posta aí!

      Abraço!

      Excluir
  4. ola gostaria de saber como linkar as opções por exemplo clicar em botafogo e ir para a pagina do botafogo clickar em flamengo e tbm ir para a pagina do flamengo , como faço isso ? como colocar link nas opções da caixa de seleção?

    ResponderExcluir
    Respostas
    1. Boa pergunta Moises,

      Adicionei um exemplo ao post para responder a sua pergunta.

      Espero ter ajudado!

      Abraço amigo!

      Excluir
  5. bom dia gostaria de saber como faço uma caixa de seleção com 3 opções ( Vitoria - Empate - Derrota ) para que a opção escolhida receba valor 1 e os outros dois 0 no banco de dados valeu abraços muito bom teu blog

    ResponderExcluir
    Respostas
    1. Faz assim:

      No arquivo html, dentro da tag select, coloque os três options com os parâmetros "value" com os valores 1, 2 e 3. Onde 1 é vitória, 2 é empate e três é derrota.

      Depois, no arquivo PHP que recebe as informações do formulário, faz assim:

      $status = $_POST['status'];
      $vitoria = $empate = $derrota = 0;

      if($status == 1) $vitoria = 1;
      else if($status == 2) $empate = 1;
      else if($status == 3) $derrota = 1;


      Considerando que o select do arquivo html contém o parâmetro "name" com o valor "status". Repare que na segunda linha, criei três variáveis ($vitoria, $empate e $derrota) com o valor zero em todas.

      Depois, dependendo do valor dessa variável passada, eu defino o valor 1 para uma das variáveis criadas.

      Por fim, crio o SQL para gravar no banco assim:

      $query = "INSERT INTO jogos(adversario, vitoria, empate, derrota) VALUES('Vasco da Gama', {$vitoria}, {$empate}, {$derrota});";

      No exemplo acima, considerei que você quer registrar jogos de um clube específico (Flamengo por exemplo). Aí, gravo o adversário e a situação da partida.


      Espero que responda a pergunta.

      Abraço!

      Excluir
  6. Utilizei algo parecido, associado com PHP pra efetuar uma opção em uma sistema de pesquisa, apos rodar a pesquisa, como eu posso fazer para manter a ultima opção escolhida? tem uma ideia?

    ResponderExcluir
  7. Fala Titino,

    Bem, é possível sim. Aliás, faço sempre isso.

    Primeiro crio uma função (ou método) chamado "carregarSelect" conforme abaixo:

    function carregarSelect($lista, $marcado = "")
    {
    $retorno = "";
    foreach($lista AS $chave => $valor)
    {
    if($chave == $marcado)
    {
    $retorno = "[option value='{$chave}' selected]{$valor}[/option]";
    }
    else
    {
    $retorno = "[option value='{$chave}']{$valor}[/option]";
    }
    }
    $retorno = str_replace('[', '<', $retorno);
    $retorno = str_replace(']', '>', $retorno);
    // tive que fazer esses replaces pois o comentário aqui do blogger nao aceita tag
    }



    Repare que a função recebe dois parâmetros (um array e uma string ou inteiro) sendo o segundo opcional. Um loop foreach varre alista e se o segundo parâmetro da função for igual à chave do array, adiciono o parâmetro selected.

    Funciona assim, primeiro crio o array para carregar o select:

    $clubes['bota'] = "Botafogo";
    $clubes['fla'] = "Flamengo";
    $clubes['flu'] = "Fluminense";
    $clubes['vasco'] = "Vasco da Gama";


    Depois, crio uma variável que recebe o valor do select:

    $time = isset($_POST['time']) ? $_POST['time'] : '';

    Aí, no mesmo arquivo você deve conter uma tag form com o parâmetro "action" apontando para ele mesmo.

    Além disso, você deve chamar a função "carregarSelect" dentro da tag select para carregar os options:

    carregarSelect($clubes, $time);


    Entendeu?

    Abraço!

    ResponderExcluir
  8. Boa noite, como consigo fazer um buttão drop down list, como tem este site "http://www.imobiliariaducati.com.br/site/content/home/". Ou seja colocar o bottão parecido ao pesquisar pela Cidade.
    Se me souberem indicar, agradeço.
    Nota: É para blogger esse bottao :)

    ResponderExcluir
    Respostas
    1. Tem que usar um plugin do jquery. Dá uma olhada nesse link:
      http://www.jquery4u.com/plugins/10-jquery-selectboxdrop-down-plugins/

      Abraço!

      Excluir
  9. Ola, sabe como eu poderia criar um botão multipla escolha porem com o modo de seleção checkbox?

    ResponderExcluir
    Respostas
    1. Olá Benhur Külzer,

      É relativamente simples, basta criar dentro de uma tag FORM elementos do tipo checkbox com o mesmo parâmetro NAME seguido de abre/fecha colchetes. Exemplo: name="opcao[]". Outro detalhe é que cada checkbox deve ter um valor diferente na propriedade VALUE.

      Depois disso, no seu script que recebe as informações deste formulário, você deve receber essas informações como um ARRAY. Veja o exemplo em PHP:

      $opcoes = $_POST['opcao'];
      for($i = 0; $i < count($opcoes); $i++)
      {
      gravarOpcao($opcoes[$i]);
      }

      Nota: no pseudo código acima, considerei que você definiu uma função chamada "gravarOpcao" e a mesma faria a gravação em um banco de dados por exemplo.

      Espero ter ajudado!

      Abraço!

      Excluir
  10. Olá muito legal o post me ajudou bastante, mas gostaria de saber se consigo adaptar este script em um formulário de contato e fazer com que a mensagem seja enviada para o e-mail do departamento escolhido. por exemplo: botafogo vai para botafogo@qualquercoisa... vasco vai para vasco@ ...
    Obrigado

    ResponderExcluir
    Respostas
    1. Fala alê, boa noite!

      Até fiz um exemplo pra você mas o blogger não permite que eu insira tags aqui nos comentários.

      Me passa seu e-mail que eu te mando o exemplo que eu fiz.


      Abraço!

      Excluir
  11. Boa noite Denecir, muito boa sua postagem.
    Estou terminando um site de uma ONG que estamos iniciando para ajudar crianças com Câncer... preciso de uma ajuda referente a um formulário.
    No formulário ira conter Nome, email, telefone, mensagem e também um select com o valor das doações, no caso R$ 10,00, R$ 20,00, R$ 30,00, R$ 50,00 e R$ 100,00.
    Minha duvida é, como enviar esses dados (Nome, email, telefone, Mensagem e o select que a pessoa escolheu) por email e com isso já abrir o link de doação, já tenho os links com as devidas doações.

    Ficaria grato por sua ajuda. Meu email: thiago@souamigodoisaac.com.br

    ResponderExcluir
    Respostas
    1. Olá Thiago!

      Muito boa essa sua iniciativa! Minha esposa já trabalhou em um hospital que trata de crianças com leucemia (Hemorio) e lembro muito bem como as crianças sofrem. As vezes, quando estou com algum problema, lembro disso e me dou conta que não tenho problema algum.

      Bem vamos a sua questão. Para mandar um e-mail com PHP, basta utilizar a função "mail". Ela tem a seguinte estrutura:

      mail(destinatario, assunto, mensagem, cabeçalho);

      Onde:
      - destinatario: e-mail da pessoa que receberá o e-mail;
      - assunto: assunto da mensagem
      - mensagem: texto que será enviado no corpo do e-mail;
      - cabeçalho: uma série de instruções para definir o formato da mensagem (texto ou html) e outros itens como FROM, CC, CCO, Arquivos anexos, etc. Este parâmetro é opcional.

      Veja um exemplo em:
      http://wiki.locaweb.com.br/pt-br/PHP_Mail_-_Como_enviar_e-mails_utilizando_a_fun%C3%A7%C3%A3o_Mail_nativa_do_PHP

      Espero ter ajudado!

      Abraço amigão!

      Excluir
  12. Opção de clicar na caixa e ir para um link éra exatamente o que eu estava procurando, ótima página!! showww

    ResponderExcluir
  13. Obrigada pela partilha. Foi mesmo muito útil.
    é possível indicar-me como consigo editar o tamanho da caixa de texto e da letra?

    ResponderExcluir
    Respostas
    1. Claro,

      Tudo é possível usando CSS. Por exemplo:

      input type="text" style="width:600px;font-size:20pt;"

      Espero ter ajudado!

      Excluir
  14. Esse site é muito bom! Parabéns...

    ResponderExcluir
  15. gostei muito, continue assim !!!

    ResponderExcluir

O que você achou do post? Faça um comentário.

Aprenda a receber dados de Formulário com PHP

Existem três arrays associativos que podemos usar para receber dados de Formulários HTML em PHP. São eles: $_GET , $_POST e $_REQUEST . O...