O formulário HTML é o único método pelo qual o visitante pode interagir com seus scripts CGI. Sem o formulário, o visitante não pode assinar o livro de registro (guestbook), usar o script CGI de correio eletrônico nem mesmo fazer um pedido de compra de seus produtos.
Os formulários HTML dão ao visitante os meios de interagir com seu site. Ao longo deste Tutorial, construiremos um formulário no qual os visitantes de seu site podem registrar um software que compraram de sua empresa. Para isso, exploraremos os marcadores e atributos HTML necessários para criar um formulário HTML.
Assim como o marcador <HTML>, o marcador <FORM> possui um marcador de abertura e outro de fechamento. É preciso fazer com que o navegador do visitante saiba quais partes de suas páginas são <FORM> e quais são apenas uma outra parte qualquer de seu documento.
O navegador precisa dessa informação pois mais de um formulário pode ser aberto em qualquer página. Para brir um segundo formulário, basta repetir o processo usando na criação do primeiro.
O começo do formulário
O conteúdo do formulário
O Final do formulário
Com o HTML, passamos ao navegador essa informação usando o marcador <FORM>. Os marcadores <FORM> e </FORM> especificam que o conteúdo entre eles é parte do formulário.
Dentro dos marcadores <FORM> é possível usar qualquer marcador HTML, que pode ser <HR>, <PRE> ou </PRE>, exceto outro <FORM>. Acrescentar marcadores HTML adicionais incrementa o layout do formulário, transformando um site sem graça em um com aparência profissional.
Dentro do formulário há marcadores e atributos adicionais, todos eles com suas regras. Esses marcadores indicam ao navegador quando iniciar uma seção e quando parar, e garantem que os itens sejam exibidos exatamente conforme o desejado. Dentro do marcador <FORM> podem-se usar os atributos ACTION, METHOD e ENCTYPE.
Este atributo indica ao servidor quual script CGI deve processar o formulário. O valor do atributo fica entre aspas, o que especifica o URL para o script que deve processar o formulário. Eis alguns exemplos:
Nota: Não é necessário utilizar aspas para designar valores e atributos, a menos que o valor de um atributo contenha um espaço ou algum outro caractere especial. Mesmo assim, deve-se usar aspas porque elas facilitam a leitura de seu HTML.
Se você não atribuir um valor para ACTION, o navegador presume que o URL especificado é aquele no qual você está no momento. Por exemplo, suponha que você esteja olhando para o seguinte URL:
http://www.emota.com.br/register.pl
O formulário então presume que o tipo ACTION é o seguinte:
ACTION="http://www.emota.com.br/register.pl"
Nota: Chamar um script enquanto ele já está sendo visualizador não é muito comum. Muitos scripts produzem documentos HTML, que também podem ser formulários. Os formulários criados pelo script pode, chamá-lo de novo (geralmente quando o script verifica erros de digitação do usuário).
Se optar por chamar um script que já esteja sendo visualizado, cuidado. É muito fácil receber um erro do servidor se usar o tipo METHOD errado ou se seu script não puder lidar com as informações que receber. Além disso, você pode obter um erro se o script criar um formulário que chama novamente o script de maneira errada.
O atributo METHOD especifica o método usando na comunicação com o servidor e com o script. Pode-se usar qualquer método aceito pelo servidor, mas ele provavelmente aceitará apenas os POST e GET. Ao escrever o script, convém fazer com que ele verifique qual tipo de método usado, pois o script precisa obter informações de maneiras diferentes, dependendo do atributo METHOD usando pelo formulário. Eis um exemplo de atribudo <FORM> com cada METHOD:
Se não for especificado o atributo METHOD a usar, o padrão é GET. O método POST provavelmente é o mais versátil atributo METHOD. O método GET tem o limite de 255 caracteres, portanto restringe a quantidade de informação que podemos permitir que o usuário digite. O POST não apresenta essa limitação porque as informações do formulário passam diretamente para o servidor usando STDIN.
Na verdade a CGI não oferece ainda suporte ao atributo ENCTYPE; esta seção trata deste atributo sucintamente, caso você o encontre, já que o ENCTYPE vem se tornando cada vez mais popular com o advento das transferências de arquivo com o navegador Web. Pode-se usar este atributo somente com o método POST. e atualmente ele possui apenas um valor:
application/x-ww-form-urlencoded
Ao usar o método POST, esse valor será sempre o tipo padrão. No futuro, talvez possamos usar o ENCTYPE para especificar o tipo de arquivo que estamos enviando, caso entejamos carregando um arquivo ou coisa parecida. Mas atualmente não podemos fazer realmente coisa alguma com o ENCTYPE.
Cada um deles é válido. Depois de colocar alguns elementos entre os marcadores de abertura e fechamento, é possível apresentá-los aos visitantes de seu site.
Provavelmente o item mais importantes que se pode colocar dentro de <FORM> é o marcador <INPUT> Ao preparar o formulário, você descobrirá que a maioria das infoirmações que deseja fazer o visitante digitar serão colocadas dentro do marcador <INPUT>. Ele não tem um marcador de fechamento como o <FORM> ou o <BODY>. O <INPUT> trabalha como o marcador <IMG>. Dentro do <INPUT> podemos ter vários valores <TYPE> diferentes. Essa variedade de valores TYPE dá ao <INPUT> seu poder e flexibilidade. Os valores TYPE incluem:
text
password
checkbox
radio
sudmit
reset
hidden
As seções seguintes examinam cada um deses valores TYPE com mais detalhes na construção de uma página de registro que permite aos visitantes de seu site registrar seus produtos.
O valor text cria simplesmente uma caixa na qual o visitante pode digitar texto. Geralmente a caixa contém apenas uma linha, apesar de ter sido originalmente projetada para conter mais. Pode-se usá-la para solicitar aos visitantes a digitação de seu nome, endereço, data de nascimento ou qualquer outra informção desejada. Examine as linhas seguintes:
Este código produz uma caixa de texto na qual o usuário pode digitar. Pode-se controlar o tamanho da caixa de texto com o atributo SIZE e especificar o tamanho como SIZE=largura ou SIZE=largura,altura, como nos exemplos abaixo:
SIZE=4
SIZE=12,2
Normalmente não se usa height; se precisar de uma área maior, use o marcador <TEXTAREA> (que discutiremos mais adiante neste Tutorial). Se não especificar o tamanho, o padrão é SIZE=20. Veja alguns exemplos do atributo SIZE.
Tamanho Padrão
Tamanho SIZE=5
Tamanho SIZE=50
Só é possível usar o atributo SIZE com os tipos de input text e password, mas ao controlar o tamanho da caixa de texto, pode-se controlar o aspecto e sentido de sua página. Não há necessidade de uma caixa de texto com 40 caracteres se sua finalidade é conter apenas uma data.
Também é possível usar o atributo VALUE para incluir um valor em uma caixa de texto. Esse atributo permite adicionar um valor padrão à caixa de texto. Eis um exemplo:
<FORM>
<INPUT TYPE="text" SIZE=25 NAME="test3" VALUE="Digite seu endereço">
</FORM>
Definimos o valor-padrão somente se o visitante não digitar coisa alguma. Por exemplo, pode-se fazer com que a página inclua automaticamente a data, maspermitindo que o visitante a altere. Se é possível fornecer as informações necessárias com facilidade, a definição de um padrão pode eximir o visitante da necessidade de digitar aquelas informações.
Finalmente, é possível controlar o número máximo de caracteres que a caixa de texto permite que o visitante digite. Esse controle é útil quando estamos construindo um script no qual desejamos que um campo envie apenas um número específico de caracteres. Eis um exemplo:
Esse exemplo permite que o visitante digite apenas 25 caracteres. Se a definição MAXLENGHT não for especificada, o visitante poderá digitar um número ilimitado de caracteres.
Apesar de o tipo de valor inut text provavelmente ser o valor TYPE usando mais freqüentemente, há outros tipos disponíveis.
Nota: Ao criar script CGI, convém fazer com que ele verifique e assegure que o usuário realmente digitou as informações esperadas. Se essa verificação não for feita, seu script pode se comportar inadequadamente, talvez danificando as informações armazenadas em um banco de dados ou arquivo flat. Procure também outros Programação Sobre Diversos Métodos que podem ser usados para fazer verificação e Questões sobre segurança.
O tipo password é exatamente igual ao tipo text, exceto pelo fato de que tudo o que for digitado pelo visitante é ecoado com um asterisco (*). Esse tipo é útil quando desejamos que o usuário digite uma senha ou qualquer outra informação sem que seja revelada aos que observam a tela. Pode-se até mesmo definir um valor-padrão usando o atributo VALUE, da mesma forma que o tipo de input text. Eis um exemplo do valor password:
Usado quando desejamos que o formulário contenha informações que o visitante nÃo pode alterar. Por exemplo, para criar um formulário que acesse um script de correio eletrônico e permita ao usuário enviar-lhe a resposta, pode-se digitar To: como um campo oculto. Ao usar o tipo de input hidden, o visitante não poderá acessar ou alterar essas informações. Na verdade, ele não poderá nem mesmo vê-las.
Por exemplo, o visitante não pode ver as seguintes informações na tela:
Cuidado: O tipo de input hidden não fica completamente oculto do visitante. Se este usar o navegador para ver o código-fonte, os marcadores hidden aparecem no código-fonte HTML. O tipo de input tem seu valor, mas o usuário pode manipular esse valor se salver o documento HTML como arquivo.
O valor checkbox funciona como um simples interrruptor liga / desliga. Se a checkbox for selecionada, o script receberá o valor da caixa. Se o visitante não ativar a caixa, o atributo NAME é ignorado e não será enviado ao script. Dentro de um tipo de input checkbox é possível ter os seguintes atributos:
Atributo
Descrição
NAME
Assim como o tipo de input TEXT, é preciso definir um valor para o atributo NAME. Seu script recebe esse nome como parte do par nome / valor.
VALUE
Especifica o valor daquilo que foi digitado. O valor padrão é on.
CHECKED
Verifica a checkbox por padrão. Se optar por este atributo, a checkbox é selecionada automaticamente embora o visitante possa desativá-la. É uma boa idéia optar por este padrão em uma checkbox que os visitantes costumam selecionar.
Com relação ao formulário de sua empresa de software, considere o exemplo abaixo:
É possível configurar o formulário para que exiba as checkboxes lado a lado ou sobre a outra. Pode-se até mesmo colocar uma checkbox entre as palavras dentro de um formulário. Eis a demostração do exemplo acima:
Este tipo de input é bastante parecido com a checkbox, exceto que o radio button permite que o visitante selecione um item de uma lista contendo vários itens. O tipo de input radio deve ter o mesmo atributo NAME, mas valores diferentes para o atributo VALUE. Portanto, o usuário pode selecionar apenas um item da lista. Oberserve o exemplo abaixo:
Neste exemplo, o visitante pode selecionar Sim, Não ou Talvez, estando o botão Sim selecionado por padrão. Esse exemplo não permite aos visitantes selecionar duas ou mais opções, como é possível fazer com o tipo checkbox.
Esse tipo de input permite que o visitante redefina totalmente o formulário. Ao fazer isso seu conteúdo é apagado e os valores-padrão são redefinidos. O único atributo usado dentro do tipo reset é VALUE, que exibe o rótulo do botão reset. Se VALUE não for especificado, o rótulo-padrão é "Reset". Examine este exemplo de botão reset:
O visitante pressiona o botão submit depois de preencher o formulário. Isso indica ao navegador que as informações digitadas pelo visitante devem ser enviadas ao servidor; por sua vez, essas informações vão para o script CGI. O único atributo usado com o tipo de input submit é VALUE, que permite alterar o rótulo que aparece no botão. Eis um exemplo:
Eis algumas coisas acerca dos tipos de input usandos em formulários que devem ser lembrados:
Todos os tipos de input para submit e reset precisam ter um atributo NAME definido. O atributo NAME é parte das informações enviadas como par nome / valor.
O atributo VALUE faz parte do par nome / valor enviado ao script. Se VALUE não for enviado com os tipos hidden, text ou password, o script receberá apenas name=. Se não for definido para os tipos checkbox ou radio, o atributo VALUE é completamente descartado e não será enviado ao script.
Pode-se usar o atributo CHECKED somente com os yipos de input checkbox e radio. Por padrão, o tipo de input checkbox permite ao visitante selecionar mais de um item.
Se estiver usando o atributo MAXLENGHT e o valor do atributo SIZE for menor do que o valor de MAXLENGHT, o texto rola à medida que o usuário digita informações em quantidade maior do que a especificada pelo atributo SIZE.
Este marcador permite que o usuário selecione um item de um menu pull-down ou de um menu de rolagem. O atributo <SELECT> tem os marcadores de abertura (<SELECT>) e de fechamento (</SELECT>), entre os quais só pode haver marcadores <OPTION>.
Dentro do marcador <SELECT> é preciso definir um atributo NAME. Também pode-se definir os atributos SIZE e MULTIPLE.
O atributo SIZE permite especificar o número de itens vistos pelo visitante. O valor-padrão é 1. Se deseja exibir mais de um item, as opções disponíveis são exibidas como um atributo SIZE, permite-se ao visitante percorrer a lista em ver de avri-la como um menu pull-down.
É possível usar o atributo MULTIPLE para permitir que o visitante selecione mais de um item do menu; caso contrário, ele só poderá selecionar um item.
Entre os marcadores de abertura e fechamento <SELECT> só é possível inserir o marcador <OPTION>:
<OPTION> Opção
Pode-se incluir quantos marcadores <OPTION> desejar dentro dos marcadores <SELECT>. Dentro de um marcador <OPTION>, entretanto, só é possível usar dois atributos: SELECT e VALUE.
Nesse exemplo a opção Não é exibida ao visitante em primeiro lugar. Ele pode selecionar um outra opção, mais essa é a padrão.
O segundo atributo que é possível definir qual é a opção-padrão. SELECTED é como o atributo CHECKED usado dentro dos tipos de input radio e checkbox. Eis um exemplo:
<FORM>
<SELECT NAME="teste">
<OPTION VALUE="1"> Jan
<OPTION VALUE="2"> Fev
...
<OPTION VALUE="11"> Nov
<OPTION VALUE="12"> Dez
</SELECT>
</FORM>
Exemplo:
Se o visitante selecionar Fev na lista, o valor enviado ao servidor será 2. Se não definirmos um valor dentro do marcador <OPTION>, as informações depois dele (chamadas de display value) serão enviadas como valores de dados.
Suponha que você esteja usando o seguinte código em vez do exemplo anterior:
<FORM>
<SELECT NAME="teste">
<OPTION> Jan
<OPTION> Fev
...
<OPTION> Nov
<OPTION> Dez
</SELECT>
</FORM>
Nesse caso, o script recebe o par nome/valor como teste = Jan e assim por diante. O marcador <SELECT> é útil quando temos uma lista de opções grande, na qual o visitante deve escolher um item. Pode-se fazer com que o visitante selecione o dia do mês além dos meses do ano. Pode-se até mesmo fornecer uma lista de todos os estados.
Para o formulário de sua empresa de software, pode-se perguntar quantos programas o visitante tem e oferecer a lista a seguir para que ele responda:
<FORM>
<SELECT NAME="qtde">
<OPTION> 01-10
<OPTION> 11-20
<OPTION> 21-40
<OPTION> 41-80
<OPTION> 81-200
<OPTION> 200 ou mais
</SELECT>
</FORM>
Suponha que você queira permitir ao visitante digitar uma grande quantidade de informações. A melhor maneira de fazê-lo é criar uma caixa de texto usando o marcador <TEXTAREA>. Com esse marcador é possível definir o tamanho e a largura da caixa, permitindo que o usuário acrescente mais informações do que seria possível se usássemos a caixa de tipo de input text. O atributo <TEXTAREA> precisa ter os marcadores de abertura <TEXTAREA> e de fechamento </TEXTAREA>.
Para usar o marcador <TEXTAREA> é preciso definir um atributo NAME junto com o tamanho da caixa, definido pela quantidade de colunas e linhas. Para definir o número de colunas e linhas use os atributos COLS e ROWS, respectivamente. Examine o exemplo abaixo:
<TEXTAREA NAME="test" COLS=25 ROWS=6>
</TEXTAREA>
Entre os marcadores <TEXTAREA> é possível digitar qualquer texto que se queria exibir no navegador do visitante. Eis um exemplo abaixo:
<TEXTAREA NAME="comments" COLS=60 ROWS=10>
Que lugar legal para comprar !!
</TEXTAREA>
O visitante pode editar as informações colocadas na caixa de texto, além de poder acrescentar informações. Uma barra de rolagem é fornecida para que o usuário possa percorrer o texto para cima ou para baixo e ver as informações dentro da caixa de texto.
Agora que você já está familiarizado com todos os marcadores e com os atributos que acompanham cada um deles, pode construir seu formulário com base no código do exemplo abaixo. Lembre-se de que o formulário serve para permitir que os visitantes registrem o produto comprado de sua empresa de software
<HTML>
<HEAD>
<TITLE> Página de Exemplo de Formulário </TITLE>
</HEAD>
<BODY>
<CENTER> <H1> Página de Exemplo de Formulário </H1> </CENTER>
<P>
<H2> Bem-vindo à nossa página de exemplos! </H2>
Obrigado por comprar o nosso produto. Por favor, preencha o formulário.
Fazendo isto, entemderemos melhor os nossos clientes e poderemos servi-los melhor.
<p>
<FORM ACTION="/cgi-bin/register.pl" METHOD="POST">
<PRE>
Digite seu nome: <INPUT TYPE="text" NAME="name" SIZE=40>
Endereço: <INPUT TYPE="text" NAME="address" SIZE=40>
Cidade: <INPUT TYPE="text" NAME="city" SIZE=20>
Estado: <INPUT TYPE="text" NAME="state" SIZE=14>
CEP: <INPUT TYPE="text" NAME="zip" SIZE=6>
<hr>
Qual o nome do produto que você está registrando? <BR>
<INPUT TYPE="text" NAME="product" SIZE=40 VALUE="Interserv"> <BR>
Qual o número de registro do produto?
<INPUT TYPE="password" NAME="product_id" SIZE=40> <BR>
<INPUT TYPE="hidden" NAME=storename" VALUE="Exemplo">
<HR>
Conte um pouco mais sobre você: <p>
De que tipos de programas você gosta?
<INPUT TYPE="checkbox" NAME="programs1" VALUE="Graphics" CHECKED>Gráficos
<INPUT TYPE="checkbox" NAME="programs2" VALUE="Internet" CHECKED>Internet
<INPUT TYPE="checkbox" NAME="programs3" VALUE="Games">Jogos
<INPUT TYPE="checkbox" NAME="programs4" VALUE="Programming">Programação
<INPUT TYPE="checkbox" NAME="programs5" VALUE="Business">Negócios
<P>
Qual a sua idade?
<INPUT TYPE="radio" NAME="age" VALUE="1-10">1-10
<INPUT TYPE="radio" NAME="age" VALUE="11-30">11-30
<INPUT TYPE="radio" NAME="age" VALUE="31-60">31-60
<INPUT TYPE="radio" NAME="age" VALUE="61 ou mais">61 ou mais
Quantos pessoas residem em sua casa? <SELECT NAME="household">
<OPTION>1
<OPTION>2
<OPTION>3
<OPTION>4
<OPTION>5
<OPTION>6
<OPTION>7 ou mais
</SELECT>
<P>
Quantos programas você possui? <SELECT NAME="programs" SIZE=2>
<OPTION>1-10
<OPTION>11-20
<OPTION>21-30
<OPTION>31-40
<OPTION>41-60
<OPTION>61-80
<OPTION>81 ou mais
</SELECT>
<P>
Comentários adicionais: <BR>
<TEXTAREA NAME="commenst" ROWS=10 COLS=60>
Que lugar legal para comprar !!
</TEXTAREA>
</PRE>
<HR>
Obrigado por preencher o nosso questionário. Para enviá-lo, dê um clique no botão "ENVIAR QUESTIONÁRIO". Para limpar o formulário, dê um clique no botão "Limpa Formulário".
<p>
<INPUT TYPE="submit" VALUE="ENVIA QUESTIONÁRIO"> <BR>
<INPUT TYPE="reset" VALUE="Limpa Formulário">
</FORM>
</BODY>
</HTML>
Página de Exemplo de Formulário
Bem-vindo à nossa página de exemplos!
Obrigado por comprar o nosso produto. Por favor, preencha o formulário.
Fazendo isto, entemderemos melhor os nossos clientes e poderemos servi-los melhor.
Obrigado por preencher o nosso questionário. Para enviá-lo, dê um clique no botão "ENVIAR QUESTIONÁRIO". Para limpar o formulário, dê um clique no botão "Limpa Formulário".
Os formulário são a única interface que o visitante de seu site pode usar para interagir com seus scripts CGI. A especificação dos formulário foi bem pensada e deve fornecer qualquer ferramenta de que sua página precisa para receber uma ampla variedade de entradas de seus visitantes. Neste Tutorial, aprendemos a usar os diversos tipos de input e os marcadores <SELECT> e <TEXTAREA>. Este tutorial deve tê-lo iniciado na criação de seus próprios formulários. Com uma imagem de gundo e outras figuras para dar um toque especial à página e talvez uma tabela para ajuá-lo na formatação, é possível criar uma página de alto nível, com aspecto verdadeiramente profissional.
