Adicione Caixas de Seleção aos Formulários HTML
Autor: Denecir da Silva Pereira | Publicado: 2010-09-14T07:29:00-07:00

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 &lt;select&gt;. Além disso, devemos usar uma Tag &lt;option&gt; para cada opção.

Para entender melhor, preparei um exemplo simples.Pintei a Tag &lt;select&gt; de azul e as Tags &lt;option&gt; de vermelho apenas para facilitar o aprendizado. Confira o código:

&lt;html&gt;

&lt;head&gt;

&lt;title&gt;Qual o seu Time do Coração?&lt;/title&gt;
&lt;/head&gt;

&lt;body&gt;

&lt;h1&gt;Qual o seu Time do Coração?&lt;/h1&gt;
&lt;form method="post" action="cadastrar-enquete.php"&gt;


&lt;select name="time"&gt;

&lt;option value="bota"&gt;Botafogo&lt;/option&gt;
&lt;option value="fla"&gt;Flamengo&lt;/option&gt;
&lt;option value="flu"&gt;Fluminense&lt;/option&gt;
&lt;option value="vasco"&gt;Vasco da Gama&lt;/option&gt;

&lt;/select&gt;
&lt;input type="submit" value="Enviar" /&gt;
&lt;input type="reset" value="Cancelar" /&gt;
&lt;/form&gt;
&lt;/body&gt;
&lt;/html&gt;
Observe o resultado:



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 &lt;select&gt;. 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:

&lt;html&gt;

&lt;head&gt;

&lt;title&gt;Informe seu conhecimento em Informática&lt;/title&gt;
&lt;/head&gt;

&lt;body&gt;

&lt;h1&gt;Informe seu conhecimento em Informática&lt;/h1&gt;
&lt;form method="post" action="cadastrar-dados.php"&gt;


&lt;select name="info[]" size="3" multiple&gt;

&lt;option value="win"&gt;Windows&lt;/option&gt;
&lt;option value="woird"&gt;Word&lt;/option&gt;
&lt;option value="excel"&gt;Excel&lt;/option&gt;
&lt;option value="net"&gt;Internet&lt;/option&gt;

&lt;/select&gt;
&lt;br /&gt;&lt;br /&gt; 
&lt;input type="submit" value="Enviar" /&gt;
&lt;input type="reset" value="Cancelar" /&gt;
&lt;/form&gt;
&lt;/body&gt;
&lt;/html&gt;
Observe o resultado:



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 &lt;option&gt; desejadas conforme abaixo:

&lt;option value="fla" selected&gt;Flamengo&lt;/option&gt;

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:


&lt;select onchange="location.href=this.value"&gt;

&nbsp; &nbsp; &nbsp;&lt;option value="#"&gt;Selecione&lt;/option&gt;

&nbsp; &nbsp; &nbsp;&lt;option value="http://www.botafogo.com.br"&gt;Botafogo&lt;/option&gt;

&nbsp; &nbsp; &nbsp;&lt;option value="http://www.flamengo.com.br"&gt;Flamengo&lt;/option&gt;

&nbsp; &nbsp; &nbsp;&lt;option value="http://www.fluminense.com.br"&gt;Fluminense&lt;/option&gt;

&nbsp; &nbsp; &nbsp;&lt;option value="http://www.vasco.com.br"&gt;Vasco da Gama&lt;/option&gt;

&lt;/select&gt;



Observe que coloquei os endereços dos sites no parâmetro value&nbsp;do option de cada clube e adicionei o parâmetro onchange&nbsp;à 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!


Leia mais:

Veja agora como Adicionar Áreas de Texto em Seus Formulários HTML;
Aprenda a Adicionar Botões de Rádio em seus Formulários HTML; 
Agrupe Controles de seus Formulários HTML;
Entenda pra que serve a Tag &lt;label&gt;;
Quer ir mais longe? Leia Introdução ao PHP; 

Não sabe nada de HTML? Comece com Introdução ao HTML;