Curso de CGI

Apresentando as Opções do Produto

Agora é preciso apresentar aos visitantes a lista dos produtos que eles podem comprar. É provável que você necessite incluir também outras opções. Por exemplo, uma florista que vende rosas deveria dar ao cliente a opção de escolha de cor, tamanho etc.

No exemplo deste tutorial, estamos vendendo carros, logo convém dar ao consumidor várias opções de modelo, cor, ano e algumas características adicionais. Com relação ao modelo, oferecemos as opções Tortoise, yena, Aphid e Diamond Black:

modelo = Tortoise, Hyena, Aphid, Diamond Black

Neste exemplo, modelo NAME e Tortoise, Hyena, Aphid e Diamond Black são os valores. Pode-se deixar o usuário selecionar um modelo pelo marcador <SELECT> ou usar o tipo de input radio. Neste Tutorial, usaremos o marcador <SELECT>. Quanto às opções de cores, temos verde, roxo, marrom e azul:

Cor = verde, roxo, marrom, azul

A seguir oferecemos ao cliente as opções para os modelos dos anos de 1995, 1996, 1997 e 1998:

Ano = 1995, 1996, 1997, 1998

Para fornecer essas opções no código, o exemplo abaixo usa <SELECT> para modelo e ano e o tipo de input radio para cor:

Aqui está, sua chance de escolher alguns carros de alta qualidade!
Modelo/Ano: <SELECT NAME=”model”>
<OPTION> Tortoise
<OPTION> Hyena
<OPTION> Aphid
<OPTION> Diamond Black
</SELECT><SLECT NAME=”year”>
<OPTION> 1995
<OPTION> 1996
<OPTION> 1997
<OPTION> 1998
</SELECT>
Cor: </PRE>
<INPUT TYPE=”radio” NAME=”color” VALUE=”Roxo”> Roxo
<INPUT TYPE=”radio” NAME=”color” VALUE=”Verde”> Verde
<INPUT TYPE=”radio” NAME=”color” VALUE=”Marrom”> Marrom
<INPUT TYPE=”radio” NAME=”color” VALUE=”Azul”> Azul

Nota:

Observe que o marcador <PRE> foi temporariamente removido para que os botões sejam exibidos lado a lado. Se fôssemos incluir o marcador <PRE>, seria preciso colocar todas as quatro cores em uma linha, e como a largura do monitor é limitada, não conseguimos ver nem metade das informações. Sem o marcador <PRE>, as opções são colocadas lado a lado (o HTML não reconhece espaços).

Agora apresentamos as opções adicionais: airbag do lado do passageiro, desembaçador no vidro traseiro, calotas de plásticos e um estepe. Atribua a cada uma destas opções seu próprio valor.
Use também o tipo de input checkbox para que, caso o cliente não selecione uma opção, você não tenha de se preocupar com isso dentro do script. O script simplesmente verifica se o usuário selecionou o checkbox e em caso positivo, reage do modo apropriado.

Airbag do lado do passageiro = iarbag
Calotas de plástico = pcaps
Desembaçador no vidro traseiro = rdefrost
Estepe = stire