Um formulário na Web é quase idêntico a um formulário real, ou seja, ele serve para que você preencha informações e envie. Só que na Web isto é feito instantaneamente, expandindo muito a sua capacidade interativa. O que se deve ter em mente é que projetar formulários é muito fácil, porém, sozinhos, eles não fazem nada. Um formulário precisa de um script de CGI (Common Gateway Interface), que é o método padrão de comunicação entre o browser e o servidor Web.
É no formulário que o usuário digita o texto e efetua seleções e o script de CGI faz o processamento real de dados. Um dos exemplos mais conhecidos de formulários na Web são os livros de visitas.
Existem quatro tags de formulários. São elas:
<FORM> e </FORM> - define o início e fim do formulário
A tag <FORM> tem dois atributos que definem o comportamento de um formulário:
ACTION - define a URL para onde as informações introduzidas serão enviadas, mas para que o envio seja processado corretamente, a URL deve apontar para um script de CGI.
METHOD - define como as informações coletadas serão enviadas à URL de ACTION. Podem ser escolhidas as opções "POST" e "GET", sendo que primeira permite a transmissão de uma quantidade maior de dados. Você deve escolher entre uma ou outra de acordo como foi criado o script de CGI.
Normalmente você usa os dois atributos ao mesmo tempo. Exemplo:
<FORM ACTION='http://www.ufpel.tche.br/cgi-bin/form.sh" METHOD="get">
...
</FORM>
<TEXTAREA> e </TEXTAREA> - permite aos usuários digitarem informações no formato texto livre em um campo de edição.
São permitidos três atributos para <TEXTAREA>:
NAME - define o nome associado com o conteúdo desta área quando o usuário transmitir o formulário.
ROWS e COLS - definem as dimensões com a altura e largura medidas em caracteres.
<SELECT> e </SELECT> - permite ao usuário relacionar itens de uma lista a serem enviados. Os atributos são:
NAME - define o nome que será associado com o valor escolhido pelo usuário.
SIZE - define a altura da lista de opções apresentada ao usuário. Se o valor definido for "1", o usuário verá suas opções sob a forma de um menu instantâneo.
MULTIPLE - define se um determinado grupo de SELECT permite a escolha de várias opções ao mesmo tempo. Se este atributo for omitido, o usuário só poderá fazer uma escolha da lista; se ele for incluído o usuário terá a oportunidade de escolher qualquer número de opções.
OPTION - define cada opção individual. <OPTION> não precisa ser fechado, como a tag <LI>.
Exemplo:
<FORM METHOD="get">
Selecione seu filme preferido:
<SELECT NAME="filme">
<OPTION>Romeu e Julieta
<OPTION>Casamento polonês
<OPTION>O homem que fazia chover
<OPTION>Para Gillian no seu aniversário
<OPTION>Reviravolta
</SELECT>
</FORM>
A tag OPTION possui dois outros atributos:
VALUE - é associado com a opção NAME de SELECT e é usado pelo script de CGI para identificar a opção. Se VALUE for omitido, o valor será, como padrão o texto que segue OPTION.
SELECT - define quais serão as opções selecionadas por padrão quando todas as opções forem exibidas inicialmente. Se SELECT não estiver definido para nenhuma opção, não aparecerá nenhuma delas como padrão.
Exemplo de um formulário de classificação de um site:
<FORM ACTION="cgi-bin/service.sh METHOD="get">
Que nota você daria a este site?
<SELECT NAME="service">
<OPTION VALUE="100"> Excelente
<OPTION VALUE="75"> Bom
<OPTION VALUE="60"> Regular
<OPTION VALUE="50"> Ruim
<OPTION VALUE="30"> Péssimo
</SELECT>
</FORM>
<INPUT> - esta tag lhe oferece a oportunidade de aceitar uma série de tipos diferentes de entradas do usuários. Exemplo:
<INPUT TYPE="tipo_de_caixa" NAME="variável" SIZE="n" MAXLENGTH="n">, onde "n" é um número especificado por você.
Os atributos para INPUT são:
ACCEPT="Internet media type" - fornece uma lista dos tipos MIME (Multipurpose Internet Mail Extensions) separados por vírgula, os quais são reconhecidos pelo servidor que está processando a solicitação.
ALIGN="left, center, right, justify" - alinha o texto conforme especificado.
ALT="texto" - fornece um rótulo alternativo de texto para os browsers que não conseguem renderizar elementos na forma gráfica, tais como botões e imagens.
CHECKED - define uma caixa de verificação ou botão de rádio para ser "selecionado" quando o formulário é carregado.
DISABLED - inutiliza o elemento.
MAXLENGTH="n" - indica o número máximo de caracteres que o usuário pode inserir em um controle de texto.
NAME="texto" - especifica o nome do controle.
READONLY - o conteúdo do controle ou o próprio controle não podem ser modificados pelo usuário.
SIZE="width, height" - especifica o tamanho da janela de entrada (em caracteres).
SRC="url" - especifica o endereço da imagem a ser usada, junto com TYPE="image".
TYPE="text, password, checkbox, radio, submit, reset, file, hidden, image, button" - especifica o tipo de controle a ser usado.
Convém não esquecer que é necessário conhecimentos em CGI para que a comunicação entre o navegador e o servidor seja concretizada. CGI é muito mais que uma página na Web. Embora as páginas normais sejam estáticas e imutáveis, os programas CGI fazem que uma página seja tudo o que você quer que ela seja. Você não precisa saber CGI; entre em contato com o webmaster que poderá lhe dar maiores informações para que seu formulário funcione, mas se quiser aprender, veja na bibliografia livros e sites que tratam do assunto.
Um artifício simples e que você pode ter pensado nele é que ACTION pode aceitar qualquer URL, até mesmo um mailto:
<FORM ACTION="mailto:bira@riogrande-rs.com.br" METHOD="post">
Quando o seu usuário acionar o botão SUBMIT, os resultados do formulário passam a ser encaminhados ao seu endereço de e-mail, e não a um script de CGI. Isso é ótimo se você não tem acesso ao diretório CGI do seu servidor da Web. Porém, existe uma dificuldade - o que fazer com a mensagem de correio eletrônico quando ela chegar à sua caixa de correio, uma vez que a mensagem de correio eletrônico ainda está codificada no formato POST que os formulários utilizam para enviar uma mensagem aos scripts.
O resultado não é nada elegante. Um outro problema é uma extensão do primeiro - você terá de processar todas as mensagens de correio eletrônico a mão.
Além disso, depois que os dados são enviados pelo correio eletrônico, a página simplesmente permanece estática na tela. Você precisa incluir um botão na página, a fim de permitir que os usuários comecem a voltar na hierarquia do site, talvez um ícone que possa ser ativado por um clique.
Veja aqui outros exemplos de como inserir tipos diferentes de formulários na sua página.
