Menu Drop Down e de Caixa de Lista em Formulários HTML: As tags < select > , < option > e < optgroup >

Apostila de HTML completaNeste tutorial de HTML de nossa apostila vamos ensinar a criar um tipo de menu bem utilizado na internet, o menu do tipo drop down, aqueles em que você clica e uma série de opções aparecem para você selecionar uma.

Vamos ver diversas tags e atributos para se trabalhar melhor e manipular esses menus em nossos formulários HTML.


Clique aqui e obtenha o CERTIFICADO do Curso de HTML

O que é um menu drop down

No artigo passado, sobre Campos de Seleção (Radio Buttons e Checkbox), vimos duas importantes maneiras de se exibir uma série de opções para os leitores de seus sites poderem fazer escolhas, ao preencherem formulários.

No geral, aquelas formas de escolha são usadas quando há poucas opções para serem escolhidas, pois se você notar bem, elas sempre aparecem.

Por exemplo, se tiver 10 opções na sua caixa de checagem (checkbox), irão aparecer as 10 opções no seu site. Se tiverem 20, idem. E assim esses campos do formulário vão ficando cada vez maiores e acabam por ocupar um espaço gigantesco no site.

A solução, e mais uma opção de campo de formulário para você usar, são os menus do tipo drop down, que você clica e eles exibem uma série de opções para escolher.

Veja o exemplo:







Como criar um menu drop down em formulários HTML: <select> e <option>

Para criar um menu do tipo drop down nos formulários de seu site, vamos fazer uso da tag <select>, pois esse menu é do tipo seleção, já que devemos escolher apenas um campo, que ficará em evidência.

A sintaxe básica para criar este menu é:

<select>
 <option>Opção 1</option>
 <option>Opção 2</option>
 <option>Opção 3</option>
 <option>Opção 4</option>
</select>

Ou seja, a tag <select> é que define o escopo do menu.

E para cada opção deste que menu que queiramos adicionar, temos que inserir uma tag <option>.
O resultado do código apresentado é:






Os atributos name e value

Mas como dissemos, essa é a sintaxe básica, só para você fazer um teste rápido e criar seu menu drop down. Para criar um site bom, bem feito e robusto, temos que usar alguns atributos já conhecidos nossos: name e value.

É importante que usemos o atributo name para dar nome ao nosso menu.
Ou seja, usamos esse atributo dentro da tag <select>, para definir um nome a este drop down.
Isto é extremamente importante pois é isso que vai identificar o menu no formulário, e se tiver outro menu deste tipo, aí que é obrigatório mesmo dar o nome.

Já o nome que demos na tag <option> serve para o seu leitor ver o que está escrito.
Porém, para o programador que vai receber os dados do formulário o que vai importar de verdade é o que tem no atributo value, que fica dentro de cada tag <option>.

Por exemplo, suponha que você fez um site para uma empresa e no formulário vai perguntar que dia do mês quer que o funcionário receba o pagamento, o código HTML será:

<select name="diaDePagamento">
 <option value="1">1</option>
 <option value="10">10</option>
 <option value="20">20</option>
</select>

E o resultado será:
Que dia do mês deseja receber seu pagamento?


Note que para o usuário não vai fazer diferença alguma, pois ele não vê nem sabe o que são os atributos name e value. Mas quando ele clicar para enviar o formulário para o site, o script responsável por receber as informações vai saber certinho o nome do formulário "diaDePagamento" e vai saber o valor, o número do dia do mês que foi escolhido.

É importante você adquirir o costume de usar esses atributos agora, enquanto aprende HTML, pois isso é essencial em seus estudos de PHP e JavaScript, no futuro.

Agrupando opções: a tag <optgroup> e o atributo label

Uma outra possibilidade que o HTML nos fornece para trabalhar com menus do tipo drop down em formulários, é agrupar algumas opções juntas.

Para isso, temos que usar uma tag chamada <optgroup>, dentro da tag <select>.
Esta tag optgroup tem um atributo especial chamado label (rótulo ou etiqueta, em inglês), que vai nos permitir criar subgrupos dentro do menu, e o nome desses grupos internos é definido no atributo label.

A sintaxe para agrupar elementos em um menu drop down é:
<select name="nomeMenu">
  <optgroup label="Grupo 1">
   <option value="valor1">Opção 1</option>
  <option value="valor2">Opção 2</option>
  <option value="valor3">Opção 3</option>
  </optgroup>
 
        <optgroup label="Grupo 2">
   <option value="valor1">Opção 1</option>
  <option value="valor2">Opção 2</option>
  </optgroup>
</select>

O resultado do código é seguinte menu:


O atributo size: o tamanho visível do menu - Caixa de Lista

Por padrão, ao usar o menu do tipo dropdown, ele exibe apenas uma opção visível.
No exemplo passado, sem clicar no menu vemos apenas "Opção 1".

Mas como costumamos dizer aqui em nossa apostila de HTML, você é o webmaster, então você que manda :)
Assim, existe um atributo da tag <select> que permite você quantas opções (<option>) você dezena que seja exibida, ou seja, quantas linhas do menu, é o atributo size, que recebe um número inteiro como valor.

No exemplo passado, há 5 linhas com as opções e mais 2 linhas com os nomes dos grupo, totalizando um total de 7 linhas no menu.
Vamos colocar o atributo size de modo que exiba todas as 7 linhas do menu.
Nosso código HTML se torna:
<select name="nomeMenu" size="7">
  <optgroup label="Grupo 1">
   <option value="valor1">Opção 1</option>
  <option value="valor2">Opção 2</option>
  <option value="valor3">Opção 3</option>
  </optgroup>
 
        <optgroup label="Grupo 2">
   <option value="valor1">Opção 1</option>
  <option value="valor2">Opção 2</option>
  </optgroup>
</select>

E o resultado é o seguinte menu:

Caso você escolha um número menor de linhas para serem exibidas, o HTML cria automaticamente uma barra de rolagem, vamos colocar size="5", veja o que acontece:


Podemos dizer que este tipo de menu é uma Caixa de Lista.

O atributo multiple: Escolhendo mais de uma opção no menu drop down

Tente marcar mais de uma opção no menu do código passado.
Segure control e vá marcando mais de uma opção.
É, não dá.

Mas e se você quiser que seja possível que o leitor selecione mais de uma opção, como no caso das checkbox ?
Para variar, fazer isso é algo bem simples, basta usar o atributo multiple, da tag <select>.
O valor que este deve receber é "multiple".

Vamos testar no exemplo passado:
<select name="nomeMenu" size="7" multiple="multiple">
  <optgroup label="Grupo 1">
   <option value="valor1">Opção 1</option>
  <option value="valor2">Opção 2</option>
  <option value="valor3">Opção 3</option>
  </optgroup>
 
        <optgroup label="Grupo 2">
   <option value="valor1">Opção 1</option>
  <option value="valor2">Opção 2</option>
  </optgroup>
</select>

O resultado é o seguinte:


Experimente segurar control e clicar em mais de uma opção.
Você verá que é possível selecionar diversas opções.

Exercício sobre menus drop down em HTML

Crie um menu que pergunte quais linguagens o usuário deseja aprender.
Divida essas linguagens em dois grupos: para Desktop e para Web.
O leitor de seu site pode optar por assinalar mais de uma opção.

Código HTML:

<select name="linguagens" size="7" multiple="multiple">
 <optgroup label="Linguagens para Web">
  <option value="html">HTML (linguagem de marcação)</option>
  <option value="css">CSS (linguagem de estilo)</option>
  <option value="js">JavaScript (linguagem de programação)</option>
  <option value="php">PHP (linguagem de programação)</option>
 </optgroup>

 <optgroup label="Linguagens para Desktop">
  <option value="c">C (linguagem de programação)</option>
  <option value="cmm">C++ (linguagem de programação)</option>
  <option value="java">Java (linguagem de programação)</option>
 </optgroup>
</select> 

Resultado do código:

9 comentários:

Web By Eds disse...

Não achei na net.. tem como em um simples menu desse, colocar imagem? Tipo quando o cliente seleciona com o mouse na opção desejada, aparecer uma imagem pequena assim do lado. ? Tem como?

Web By Eds disse...

Tem como colocar uma imagem quando seleciona uma opção? Tipo o cliente coloca o mouse em cima da seleção dele, e aparece uma imagem pequena assim? Tem como?

Daniel Barros disse...

Como eu faço para usar o que foi selecionado... tipo... se eu escolher CSS ele vai para uma outra página html, se eu escolher PHP ele vá para outra página html... como eu faço isso???

Anônimo disse...

Refaço a pergunta do Daniel - Como eu faço para usar o que foi selecionado... tipo... se eu escolher CSS ele vai para uma outra página html, se eu escolher PHP ele vá para outra página html... como eu faço isso???

fagner oliveira disse...

ta certo, mais aonde coloca o links para quando selecionar uma cidade?

Anônimo disse...

Como faço para quando o usuário selecionar uma opção do ComboBox, uma Label do lado receber uma informação diferente de acordo com sua seleção?

Sérgio Marinho disse...

a propriedade value tem o valor da reposta, dai é só testar a condição

Mauro Neves disse...

Selecionei duas opções em: "Resultado do código:" e dei .
Porque não mostrou ou nem saíram as opções da tela? Ficou travado praticamente!

Zica Zicado disse...

bom dia,
será que alguém poderia me ajudar? eu esotu começando em php e mysqul então não sou expert, mas tenho boas noções. já fiz meu formulário e está tudo ok. porém, por exemplo, tem o campo "Estado" - tipo Combobox - que a pessoa pode escolher um dentre os 26 (acre, ceará, rio de janeiro, etc.), como posso tornar esse campo obrigatório? tem outro campo que é do tipo "checkbox", também quero torná-lo de preenchimento obrigatório. depois disso, quero que estes dados também apareçam na minha tabela do myadminPHP (ex. qual estado foi escolhido e se a pessoa clicou efetivamente no "checkbox"). tem como? algém pode me ajudar com os códigos? obrigado.