Formulrios

Permitem a um usurio do Web submeter informaes para o provedor do

servio.
Existem vrios tipos de campos de entrada, como:
campos de entrada de texto ;
menus de mltipla escolha ou escolha nica ;
botes sim-ou-no ;
botes para submisso ou limpeza de formulrio.
Cada uma destes campos tem funcionalidade prpria e voc vai aprender em
que situao utiliz-los em seus formulrios.
Para melhor compreender a notao utilizada nos formulrios, voc primeiro
precisa se familiarizar com HTML (Hypertext Markup Language).
Se voc j conhece HTML, as marcaes utilizadas em formulrios seguem a
mesma conveno, e portanto, ser fcil aprender.
Contudo, formulrios HTML sempre seguem um padro:
<TITLE>Ttulo do Documento</TITLE>

No incio e o restante do documento a seguir.

Alm disto, as marcaes que definem o formulrio precisam ser iniciadas e
finalizadas, como estas marcaes de listas.
<UL>
<LI>Primeiro item da lista
<LI>Segundo item da lista
</UL>
<FORM>
contedo do formulrio...
</FORM>

Uma ltima observao: voc pode ter mltiplos formulrios em um nico

hiperdocumento. Apenas certifique-se de que os blocos <FORM></FORM> no se
sobrepem.

Codificao bsica

Como vimos, um formulrio comea com a marcao <FORM> e termina com

</FORM>. Outros itens devem ser especificados:
Primeiro, o formulrio precisa saber como enviar a informao para o servidor.
Existem dois mtodos, GET e POST.

METHOD="GET"
A maioria dos documentos HTML so recuperados a partir da requiso de uma
nica URL ao servidor. Assim, um formulrio que utilize este mtodo, envia toda
sua informao ao final da URL ativada.

METHOD="POST"
Este

mtodo

transmite

toda

informao

fornecida

via

formulrio,

imediatamente aps a URL ativada. Ou seja, quando o servidor recebe uma

ativao de um formulrio utilizando POST ele sabe que precisa continuar
"ouvindo" para obter a informao. Este o melhor mtodo.
Segundo, o formulrio precisa saber para onde enviar a informao. Esta a
URL sendo ativada a partir do formulrio, e ela referenciada atravs da
marcao ACTION. Esta URL, em geral, aponta para um script CGI que ir
receber e decodificar os resultados. Lembre-se de que se voc est
referenciando um script que reside no mesmo servidor do formulrio, voc no
precisa incluir a URL completa.
ACTION="/cgi-bin/post-query" para um script no seu servidor
ACTION="http://www.cr-df.rnp.br/cgi-bin/post-query" para um script no servidor do CR/DF

Aps voc construir estas marcaes, seu formulrio geralmente ter a seguinte
estrutura:
<FORM METHOD="POST" ACTION="/cgi-bin/post-query">
Marcaes de campos de entrada e HTML em geral
</FORM>

Observe que este formulrio utiliza o mtodo POST e envia as informaes

digitadas para um script local chamado post-query no diretrio /cgi-bin do servidor.
Outra informao importante: cada marcao de entrada em um formulrio tem
uma opo NAME associada, de tal forma que o script saiba qual o nome, isto , como

chamar cada valor digitado. Certamente voc pode definir mais de um campo de entrada
textual ou menu dentro de um formulrio, mas certifique-se de que cada um possui um
nome diferente.

Texto
Entrada de texto comum - TEXT
A forma mais simples de campo de entrada a marcao text. Este campo
permite a digitao de uma nica palavra ou linha de texto, e possui uma largura default
de 20 caracteres.

Opes:
VALUE="" OPCIONAL
Utilizando a marcao VALUE voc especifica que texto aparecer no campo
quando o formulrio for exibido.

SIZE="" OPCIONAL
Esta marcao altera o tamanho deste campo exibido na tela.
Obs.: o usurio sempre poder digitar mais caracteres do que o tamanho do
campo na tela, pois o texto ir se deslocar esquerda dentro do campo.

MAXLENGTH="" OPCIONAL
Se voc deseja limitar o nmero de caracteres que o usurio pode digitar, basta
usar esta marcao. O formulrio ir emitir um bip de erro se o usurio tentar digitar alm
do permitido em MAXLENGTH.
<FORM METHOD="POST" ACTION="/cgi-bin/post-query">
Qual o seu primeiro nome?
<INPUT

TYPE="text"

MAXLENGTH="15">
</FORM>

NAME="primeiro_nome"

VALUE="carlos"

SIZE="10"

Figura 82 Campo texto

Obs.:
O valor informado em NAME deve utilizar sublinhado em vez de espaos em
branco. Inserir espaos em branco nestes nomes pode causar problemas no
servidor na decodificao dos valores informados.
Se seu formulrio possui apenas um campo de entrada textual, ao teclar
ENTER neste campo o formulrio ser submetido, como se o usurio tivesse
acionado o boto SUBMIT.
Entrada de texto protegido, senha - PASSWORD
Marcaes de entrada do tipo password so idnticas aos campos do tipo text,
exceto pelo fato de todos os caracteres serem exibidos como asteriscos ( *).

Opes:
VALUE="" OPCIONAL
A marcao VALUE especifica um valor default para este campo.
SIZE="" OPCIONAL
Esta troca o tamanho do campo de password exibido na tela.
MAXLENGTH="" OPCIONAL
Limita o nmero de caracteres que o usurio pode informar como password.

<FORM METHOD="POST" ACTION="/cgi-bin/post-query">

Informe sua senha de acesso (8 caracteres):
<INPUT

TYPE="password"

MAXLENGTH="8">
</FORM>

VALUE="xpto"

NAME="sua_senha"

SIZE="8"

Figura 83 Campo senha

Obs.:
Se voc pretende utilizar MAXLENGTH para limitar o nmero de caracteres
informados, tenha certeza de especificar um SIZE com o mesmo tamanho, para
fornecer ao usurio o sentimento de qual a largura do campo. Esta regra no foi
utilizada no primeiro exemplo, que possui SIZE igual a 10, mas MAXLENGTH
de 15, o que faz o campo se deslocar nos ltimos 5 caracteres caso o valor
informado possua mais do que 10 caracteres.
Mesmo que o valor default VALUE esteja representado por asteriscos, o usurio
pode visualizar o seu valor atravs da recuperao do fonte do hiperdocumento
em HTML (uma opo comum na maioria dos clientes WWW).
Entrada oculta - HIDDEN
Alm da marcao PASSWORD com um valor VALUE default, possvel
"esconder" informao passada dentro de blocos FORM com uma marcao HIDDEN.
Esta informao recebida pelo script de decodificao no servidor, mas no
diretamente exibida ao usurio no formulrio.

Opes:
VALUE="" OBRIGATRIO
Atravs da marcao VALUE, voc deve especificar o texto oculto a ser enviado
ao script processador do formulrio.
<FORM METHOD="POST" ACTION="/cgi-bin/post-query">
Voc no pode visualizar nada aqui embaixo.
<INPUT TYPE="hidden" NAME="nome_oculto" VALUE="form12">
</FORM>

Figura 84 Campo oculto/controle

Obs.: Mesmo que o valor especificado em HIDDEN VALUE no seja exibido no

formulrio, o usurio pode v-lo atravs da operao de visualizao do fonte do
hiperdocumento, da mesma forma como no campo PASSWORD.

Entrada de vrias linhas de texto - TEXTAREA

A marcao TEXTAREA no utiliza o formato convencional INPUT TYPE="text"
dos exemplos anteriores. Ao contrrio, uma marcao <TEXTAREA> delimita o seu
incio e a marcao </TEXTAREA> o seu fim.
Opes:
ROWS="" OBRIGATRIO
Especifica o nmero de linhas da entrada textual.

COLS="" OBRIGATRIO
Especifica o nmero de colunas da entrada textual.

Texto default OPCIONAL

Se voc deseja que um texto seja exibido no campo textual ao abrir o formulrio,
simplesmente coloque este texto entre as marcaes de incio e fim da TEXTAREA.
<FORM METHOD="POST" ACTION="/cgi-bin/post-query">
Por favor, escreva aqui suas sugestes, dvidas e crticas:<BR>
<TEXTAREA NAME="critica" ROWS="3" COLS="40">
Gostaria de obter mais informaes sobre
este servidor. Grato.

</TEXTAREA>
</FORM>

Figura 85 Campo de texto

Obs.: O usurio dispe de Scrollbars para digitar alm do nmero de linhas e colunas
definidas em ROWS e COLS.

Menus
Menus com opes - SELECT

Menu de opo nica

A marcao SELECT segue a mesma convenco de TEXTAREA. Ou seja, as
opes de menu ficam entre a marcao de incio <SELECT> e a de fim </SELECT>.

Opes:
OPTION OBRIGATRIO
Especifica uma opo presente no menu.

VALUE="" OPCIONAL
Especifica o valor da opo retornada ao servidor. Se no for definido, o nome da
opo enviado ao servidor.

SELECTED OPCIONAL
Por default, a primeira OPTION exibida no menu. Esta marcao estabelece
uma opo de menu a ser exibida inicialmente, quando no se deseja que seja a primeira
OPTION.

<FORM METHOD="POST" ACTION="/cgi-bin/post-query">

Onde voc pretende fazer turismo nas frias?
<SELECT NAME="lugares_para_ver">
<OPTION>Fortaleza
<OPTION VALUE="sul">Florianpolis ou Porto Alegre
<OPTION>Rio de Janeiro
<OPTION SELECTED>Braslia
<OPTION VALUE="amazonia">Manaus
</SELECT>
</FORM>

Figura 86 Campo de seleo

Obs.:
Se voc possui mais do que 3 ou 4 opes de escolha e o usurio s pode
selecionar uma, ento este elemento de entrada o melhor. As pessoas
frequentemente utilizam vrios RADIOBUTTONS, que veremos a seguir.
O script decodificador, no servidor, provavelmente apreciar uma nica palavra
para VALUE, em vez de mltiplas palavras. Voc sempre pode utilizar
sublinhado para separar expresses compostas.

Listas paginveis - SELECT com SIZE

A nica diferena entre este elemento de entrada e o anterior SELECT a
introduo da opo SIZE. Ela especifica quantas linhas com opes de menu sero
exibidas na janela.

Opes:
MULTIPLE OPCIONAL

Especifica que mltiplas opes podem ser selecionadas, em oposio ao

exemplo anterior do SELECT, onde apenas uma opo pode ser selecionada no menu.

SIZE="" OBRIGATRIO
Nmero de linhas (opes de menu) exibidas na janela.

OPTION OBRIGATRIO
Especifica uma opo da lista.

VALUE="" OPCIONAL
Especifica o valor da opo retornada ao servidor.
Se no for definido, o nome da opo enviado ao servidor.

SELECTED OPCIONAL
Esta opo determina uma OPTION default para ser selecionada.
<FORM METHOD="POST" ACTION="/cgi-bin/post-query">
Que facilidades de acomodao voc deseja?<BR>
<SELECT NAME="opcional" MULTIPLE SIZE="5">
<OPTION>Televiso
<OPTION VALUE="casal" SELECTED>Cama de Casal
<OPTION>Ar Condicionado
<OPTION>Fax
<OPTION SELECTED>Modem V.34
<OPTION>Sauna
<OPTION>Lavanderia
<OPTION>Frigo-Bar
</SELECT>
</FORM>

Figura 87 Campo de menu

Obs.:
Este elemento de entrada bom para listas com muitas opes, porque
possvel controlar quantas sero exibidas por vez.
Em alguns clientes WWW, necessrio teclar simultaneamente as teclas
CONTROL ou SHIFT para selecionar mltiplos itens.

Botes
Botes sim ou no - CHECKBOX
Retornando ao formato de INPUT TYPE="", a marcao CHECKBOXES
perfeita para escolher entre duas opes.

Opes:
VALUE="" OPCIONAL
Especifica o valor da opo enviado ao servidor. Se no for definido, o valor "on"
enviado ao script decodificador.

CHECKED OPCIONAL
Esta marcao define a opo selecionada por default.
<FORM METHOD="POST" ACTION="/cgi-bin/post-query">
<INPUT TYPE="checkbox" NAME="boletim" CHECKED>Sim, eu desejo receber o
boletim de notcias.
<P>
<INPUT TYPE="checkbox" NAME="info">Sim, eu gostaria de receber mais informaes
tursticas.
</DL>

</FORM>

Figura 88 Campo de caixa

Obs.:
Este elemento funciona melhor para respostas do tipo "sim/no" ou "on/off".
Voc pode simular uma lista SELECT MULTIPLE criando CHECKBOXES com o
mesmo NAME, mas diferentes VALUES

Botes com opes - RADIO

RADIOBUTTONS utilizam uma notao similar a de CHECKBOXES, contudo,
apenas uma opo pode ser escolhida.

Opes:
VALUE="" OBRIGATRIO
Especifica o valor da opo a ser enviado para o servidor.
Se no for definido, um valor "on" enviado ao script decodificador.

CHECKED RECOMENDADO
Esta marcao especifica qual boto estar selecionado por default.
Uma vez que uma seleo precisa ser feita, melhor prover uma opo preselecionada.

<FORM METHOD="POST" ACTION="/cgi-bin/post-query">

Suas preferncias na viagem:
<DL>
<DD>Classe do Bilhete:

<INPUT TYPE="radio" NAME="classe" VALUE="eco">econmica

<INPUT TYPE="radio" NAME="classe" VALUE="exe">executiva
<INPUT TYPE="radio" NAME="classe" VALUE="pri" CHECKED>primeira
<DD>Localizao:
<INPUT TYPE="radio" NAME="local" VALUE="frente">rea fumante
<INPUT TYPE="radio" NAME="local" VALUE="tras">rea no fumante
</DL>
</FORM>

Figura 89 Campo radio

Obs.:
Como j foi mencionado, RADIOBUTTONS no so boa escolha para listas
com muitos itens, porque o cliente tem problemas para exibir muitos botes.
melhor utilizar o menu SELECT.
Uma vez que um boto selecionado, ele no pode ser desmarcado sem
selecionar outro boto que possua o mesmo NAME. A seleo default pode ser
restaurada com a utilizao do boto RESET, introduzido a seguir.
Se voc utiliza vrios RADIOBUTTONS com o mesmo NAME e nenhum
VALUES, o servidor no ser capaz de dizer que boto foi selecionado, uma
vez que o valor "on" ser retornada para qualquer um deles.

Botes de submisso e limpeza - RESET E SUBMIT

Em vez do usurio corrigir cada INPUT, um boto RESET pode ser utilizado para
restaurar todos os campos a seus valores default, como se nenhuma informao
houvesse sido digitada.
E finalmente, o FORM precisa de uma opo para enviar toda a informao
digitada para o servidor, uma vez que o usurio terminou de preencher todos os campos

de entrada. O boto SUBMIT transfere toda a informao para a URL especificada no

elemento ACTION.

Opes:
VALUE="" OPCIONAL
Especifica o texto a ser exibido no boto.
Se no for especificado, os textos default "Reset" e "Submit Query" sero
colocados nos botes RESET e SUBMIT, respectivamente.

NAME="" OPCIONAL
Se NAME for definido em um boto SUBMIT, o formulrio ir transmitir o valor do
contedo do elemento VALUE, permitindo que voc tenha mltiplos botes SUBMIT
numa espcie de verso simplificada de um RADIOBUTTONS.

<FORM METHOD="POST" ACTION="/cgi-bin/donothing">

Qual o seu primeiro nome? <INPUT TYPE="text"><BR>
Aperte este boto: <INPUT TYPE="radio" NAME="nada"><BR>
<INPUT TYPE="reset" VALUE="Limpa campos">
<INPUT TYPE="submit">
</FORM>

Figura 90 Campo enviar

Obs.:
Normalmente, o script decodificador retorna um hiperdocumento aps ele
processar a informao do formulrio.
Nem todos os clientes suportam mltiplos botes SUBMIT. melhor utilizar

apenas um nico boto SUBMIT para transmitir a informao digitada no

formulrio.

I. Sobre este Tutorial

Neste tutorial, vamos ver uma facilidade ainda no "sacramentada" para os
HTMLeiros , mas que promete vir por a. a possibilidade de se dividir um hipertexto em
mltiplas janelas (frames).
Agora, ateno por que at esse exato momento, janeiro 1996 s conheo um
browser que l essa facilidade. o Netscape, a partir da versao 2.0. Ento, muito
cuidado! recomendvel que voc crie sempre uma opo de navegao para quem
estiver usando um browser que no enxerga frames. Vamos ver como faz-lo.
Uma ltima observao antes de partirmos para a festa. Aqui importante que
voc j conhea HTML - Hypertext Markup Language. Se no conhece, sem problema
tambm, d uma lida cuidadosa nos nossos outros tutoriais sobre HTML, disponveis em
http://www.cr-df.rnp.br/hipertextos/cr-df/cursos/ .
Este tutorial faz parte de um conjunto de mdulos destinados a quem deseja
publicar/prover informao na Internet, atravs de servio do tipo WWW (World Wide
Web).
Atualmente - janeiro de 1996 - este conjunto compreende 7 mdulos:
1. Introduo Geral a Internet
2. HTML Bsico
3. Tabelas em HTML
4. Formulrios em HTML
5. Mltiplas Janelas - Frames
6. Manipulao de Imagens
7. Guia de Estilo

Informaes adicionais podem ser solicitadas a webmaster@cr-df.rnp.br