A linguagem HTML também permite que o cliente (navegador) interaja com o servidor, preenchendo campos, clicando em botões e passando informações. Por exemplo, eu tenho um Guest Book (formulário) em meu site onde eu peço a todos os visitantes que dêem suas opiniões. Essas informações, devem ser tratadas por programas, denominados scripts, que podem armazená-las para uma posterior utilização. Os scripts podem ainda retornar um outro documento HTML, uma URL, ou algum outro tipo de dado para o cliente.
O elemento FORM, da linguagem HTML, é justamente o responsável por tal interação. Ele provê uma maneira agradável e familiar para coletar dados do usuário através da criação de formulários com janelas de entrada de textos, botões, etc.
É preciso ter em mente que o FORM coleta dados, mas não os processa. São os scripts que entendem os dados, como mencionado. É aí que entra a necessidade da interface CGI. Tal interface, permite que o servidor se comunique com o script que vai atuar sobre essas informações, retornando os resultados para o navegador.
A confecção de scripts exige que se aprenda uma linguagem de programação chamada PERL. Abaixo temos alguns endereços que processará os dados para você, e os retornará via e-mail. Aqui estão as referências:
Para fazer formulário, você tem que colocar as TAGs <FORM> </FORM>. Todos os outros comandos, devem ficar dentro dessas TAGs. Ok?!
6.2 - ATRIBUTOS PARA FORM
O elemento FORM pode conter dois atributos que determinaram para onde será mandada a entrada do FORM. Vejam como eles são:
6.2.1 - GET
Esse atributo indica totalmente como o dado é passado para o script ou programa definido no atributo ACTION.
6.2.2 - POST
Passa os dados para a entrada padrão dos sistema operacional.
Vale a pena lembrar, que será mostrado, abaixo, um exemplo completo, de como fazer sua página com formulários. Também será dado um endereço, de um servidor, que processa os dados e os retorna via e-mail. Aí poderá ser lido normalmente. Agora será explicado como colocar os campos de dados, mas se não estiver entendendo, copie o exemplo, e só altere os dados, com o seu nome, e suas informações.
6.2.3 - INPUT
A TAG <INPUT> especifica uma variedade de campos editáveis dentro de um formulário. Ele pode receber diversos atributos que definem o tipo de mecanismo de entrada (botões, janelas de texto, etc.), o nome da variável associada com o dado da entrada, o alinhamento e o campo do valo mostrado. O atributo mais importante do INPUT é o NAME. Ele associa o valor da entrada do elemento. Por exemplo, quando você for receber os dados, já, processados, irá vir o name : =resposta dada pelo visitante. Outro atributo importante é o TYPE. Ele determina o campo de entradas de dados. Veja como se usa este atributo:
<INPUT TYPE="TEXT" NAME="nome">
Para mudar o tamanho, da janela padrão, você tem que colocar o comando SIZE. Por exemplo:
<INPUT TYPE"TEXT" NAME="nome" SIZE=8>(ou número desejado)
Outro comando importante é o VALUE. Ele acrescenta uma palavra digitada no comando à janela.
Por exemplo:
<INPUT TYPE"TEXT" NAME="nome" SIZE=8 VALUE="texto.">
Olhe como ficaria:
6.2.3.1 - TIPOS DE ELEMENTOS TYPE
Você pode fazer várias coisas com o elemento TYPE. Por exemplo, para ser um campo de senha, que quando digitado, apareça o símbolo "*", ao invés das letras, você deve escrever o seguinte:
<INPUT TYPE"PASSWORD" NAME="nome" SIZE=8>
6.2.3.1.1 - TYPE="RADIO"
Quando o usuário deve escolher uma resposta em uma única alternativa, de um conjunto, utiliza-se o RADIOButtons. Um exemplo típico do uso de tais botões, é cuja resposta pode ser SIM ou NÃO. É preciso que todos os rádios buttons es um mesmo grupo, ou seja, referentes a mesma pergunta, tenham o mesmo atributo NAME. Para esse tipo de entrada, os atributos NAME e VALUE, são necessários.
Veja a seguir:
<INPUT TYPE="RADIO" NAME="você gostou dessa home page?" VALUE="sim">sim<p>
<INPUT TYPE="RADIO" NAME="você gostou dessa home page?" VALUE="nao">não<p>
Repare:
sim
não
6.2.3.1.2 - TYPE="PASSWORD"
Este comando serve para fazer uma campo de senhas! Quando a pessoa digitar, aparecerá o sinal de "*"! O comando é:
<INPUT TYPE="PASSWORD" NAME="SENHA" MAXLENGHT=6>
Olhe como ficaria:
6.2.3.1.3 - TYPE="CHECKBOX"
Esse comando é válido quando apenas uma resposta, é esperada. Mas nem sempre está é a situação...O tipo CHECKBOX provê outros botões através dos quais mais de uma alternativa, pode ser escolhida.
Definição dos checkboxs:
<INPUT TYPE="CHECKBOX" NAME="netscape" VALUE="net">Netscape<p>
<INPUT TYPE="CHECKBOX" NAME="Explorer" VALUE="exp">Internet Explorer<p>
<INPUT TYPE="CHECKBOX" NAME="Mosaic" VALUE="mos">Mosaic<P>
<INPUT TYPE="CHECKBOX" NAME="Hot Java" VALUE="hot"> Hot Java<P>
Veja o resultado:
Netscape
Internet Explorer
Mosaic
Hot Java
6.2.3.1.4 - TYPE="SUBMIT"
Esse é o botão que submete os dados do formulário quando pressionados, ou seja, possibilitam, o envio, dos dados para o script que vai tratá-los. Veja como se adiciona o botão:
<INPUT TYPE="SUBMIT" VALUE="enviar">
Veja como ficará:
6.2.3.1.5 - TYPE="RESET"
No caso dos botões RESET, quando o botão é clicado, ele automaticamente limpa todos os campos já preenchidos no formulário, voltando à situação inicial.
<INPUT TYPE="RESET" VALUE="Limpar">
Veja como ficará:
6.2.4 - TEXTAREA
Para se limitar o tamanho do campo mostrado na tela, faz-se o uso dos atributos COLS e ROWS que especificam, respectivamente, o número de colunas e linhas que se deseja mostrar para o usuário. O atributo NAME é obrigatório, e especifica o nome da variável, que será associadaa à entrada do cliente (navegador)O atributo value não é aceito nesse elemento, mas você pode colocar já um texto da seguinte maneira. Veja como ele é colocado:
<TEXTAREA NAME="nome" COLS=20 ROWS=3>texto</TEXTAREA>
Veja como ficará:
6.2.5 - SELECT
Embora os usuários não precisem digitar sempre suas respostas, mostrar cada opção através de botões consegue um bom espaço, e facilidade. Veja como ele funciona:
<SELECT>
<OPTION>opção1
</SELECT>
Veja o resultado:
6.3 - EXEMPLO COMPLETO
Abaixo, temos um exemplo completo de uma página com um formulário.
<form action="http://www.uki.edu/cgi-bin/AnyForm.cgi" method="post">
<input type="Hidden" name="AnyFormModle" value="Mail">
<input type="Hidden" name="AnyFormDisplay" value="http://www.gun.com.br">
<input type="Hidden" name="AnyFormTo" value="gun@gun.com.br">
<input type="Hidden" name="AnyFormSubject" value="Dados do Formulário de HTML">
Qual o seu nome?<input type="Text" name="Nome" size="40"><br>
Qual o seu E-mail?<input type="Text" name="E-mail" size="40"><p>
Você gostou da minha Home Page?<input type="Radio" name="Gostou" value="Sim">sim <input type="Radio" name="Gostou" value="Mais ou Menos"CHECKED>
Mais ou Menos <input type="Radio" name="Gostou" value="Não">Nem um pouco!<P>
Qual a página que você mais gostou?<select name="Melhor Página"><option value="Interface">Interface</option>
<option value="Imagens, som, etc.">Imagens, som, cores, comandos básicos, etc.</option>
<option value="Frames">Frames</option>
<option value="Ferramentas">Ferramentas</option>
<option value="Formulários">Formulários</option>
<option value="CGI">CGI</option>
<option value="JAVA">JAVA</option>
<option value="Java Script"<Java Script</option>
<option value="VRML">VRML</option>
<option value="CHAT">CHAT</option>
<option value="Onde colocar">Onde colocar</option>
<option value="Onde divulgar">Onde Divulgar</option>
<option value="Bombas em Java Script">Bombas em Java Script</option>
<option value="Contadores de Acesso">Contadores de Acesso</option>
<option value="Organizando às informações">Organizando às informações</option>
</select><P> Deixe seus comentários sobre a minha Home Page:<textarea name="Comentários" cols="28" rows="5"></textarea><br>
O que está faltando? <input type="Text" name="O que está faltando?"Value="o que falta?"><br>
Essa Home Page lhe ajudou?<input type="Radio" name="Ajudou?" value="sim">Sim <input type="Radio" name="Ajudou?" value="Não!"&lgt;Não!<p>
<input type="Submit" value="Enviar ">
<input type="Reset" value="Limpar Dados">
Veja como ficou: