LIÇÃO 7

Formulários

      Os formulários em uma página WEB permitem recolher informações das pessoas que visitam a página. através de algumas directivas especiais, podemos definir as literais e o formato dos objectos de resposta. Também definimos que será tomada assim que o formulário for preenchido.

      Para criar um formulário é necessário o uso da tag <FORM> onde serão incluídos os elementos desse formulário. Essa tag contém dois atributos: METHOD e ACTION.

      1) O atributo METHOD pode ter o valor GET ou POST, que determina a maneira como os dados do formulário serão enviados para processamento. A diferença entre os dois é a forma que cada um "empacota" esses dados.

      2) O atributo ACTION é um ponteiro que indica o script que processa as informações que se obtém a partir do formulário. Deve conter a URL completa do programa que irá receber dados do formulário. Por exemplo http://cgi07.Freedback.com/mail.pl.
      Também tem o atributo TARGET que é opcional e só é necessário quando se utiliza frames, ele indica onde aparecerá a página de confirmação do formulário.

      A tag <INPUT> indica um elemento de formulário simples e possui dois atributos que são TYPE e NAME.
      1) As opções que o atributo TYPE oferece são:

      2) O atributo NAME, na maioria dos casos, define o nome do campo.
      3) O atributo VALUE (valor), neste caso, pode ser usado se quiser, ele define um valor prévio para cada campo, de tal forma que quando a página seja carregada este valor já esteja preenchido podendo ser alterado pelo visitante.
      4) O atributo SIZE define o tamanho do campo e é definido no número de caracteres. Se você quiser um campo de 40 caracteres, você deverá definir como SIZE=40. Mas note que esse valor não limita o campo em 40 caracteres, ele define o tamanho que será mostrado na página.
      5) O atributo MAXLENGHT (comprimento máximo) define o número máximo de caracteres que podem ser digitados nos campos.
      6) O atributo CHECKED é usado para marcar as opções RADIO e CHECKBOX. Lembrando que a opção RADIO só pode ter um elemento seleccionado de cada vez.

      Agora vamos ver alguns exemplos:

 
Botões de escolha
<INPUT TYPE=Radio NAME=sexo VALUE=Mas CHECKED>Masculino
<INPUT TYPE=Radio NAME=sexo VALUE=Fem>Feminino
Masculino Feminino
O atributo NAME, neste caso, deve ser igual para todos os campos.
O atributo VALUE deve conter o valor deste campo, este será o valor processado e passado ao programa. <\TD>

 
Botões de Opção
Na sua casa tem:<BR>
<INPUT TYPE=Checkbox NAME=eletro1 VALUE=TV>Televisão<BR>
<INPUT TYPE=Checkbox NAME=eletro2 VALUE=Radio>Rádio<BR>
<INPUT TYPE=Checkbox NAME=eletro3 VALUE=Vidio>Vídeo Cassete<BR>
Na sua casa tem:
Televisão
Rádio
Vídeo Cassete
O atributo NAME, neste caso, deve ser diferente para cada campo.
O atributo VALUE deve conter o valor deste campo, este será o valor processado e passado ao programa. <\TD>

 

      
     A tag <SELECT> ... <SELECT> permite que você defina uma lista de opções para a selecção do visitante. O atributo NAME define o nome desta lista e SIZE define quantos elementos irão aparecer na página. Caso ele seja omitido, aparece somente uma opção de cada vez. Cada opção da lista recebe uma tag <OPTION>, e o atributo VALUE deste elemento irá definir o valor de cada opção, que será a informação fornecida ao programa de acordo com a selecção feita.

      Agora vamos ver um exemplo:

 
Selecção
Qual a cidade onde mora ???<BR>
<SELECT NAME=Cidade>
<OPTION VALUE=Lisboa>Lisboa
<OPTION VALUE=Porto>Porto
<OPTION VALUE=Coimbra>Coimbra
<OPTION VALUE=Outro>Outro
</SELECT>
Qual a cidade onde mora ???
Se você colocar SIZE=2 então fica assim:

Qual o estado que você mora ???

      As tags <TEXTAREA> ... <TEXTAREA> (área de texto) permitem definir um campo de texto com várias linhas. Os atributos ROWS e COLUMNS definem o tamanho da área em que o visitante vai escrever, ROWS define o número de linhas da caixa de texto e COLUMNS o número de colunas, e o atributo COLS define quantos caracteres cada linha possui. O atributo NAME define o nome da caixa de texto. Se você incluir o atributo WRAP=hard a sua caixa de texto não irá possuir uma barra de scroll horizontal.

      Agora vamos ver um exemplo:

 
Caixa de Texto
<TEXTAREA NAME=comentarios ROWS=3 COLUMNS=37>
Aqui coloca o seu comentário
</TEXTAREA>

 


Envio e limpeza de dados:

      <INPUT TYPE=Reset Value=...>
      O valor RESET no atributo TYPE define um botão que limpa todos os campos, colocando os valores existentes quando a página foi carregada. No atributo VALUE pode-se definir o que estará escrito no botão, por exemplo, "Limpar". Caso nenhum valor seja definido aparecerá "Reset".

      <INPUT TYPE=Submit NAME=... Value=...>
      O valor SUBMIT (submeter) no atributo TYPE define um botão de envio de informações, ou seja, um botão que ao ser accionado executa o programa associado ao formulário (aquele que foi definido em ACTION no tag FORM), passando para ele os dados preenchidos. Assim como no tipo RESET, o atributo VALUE define o que estará escrito no botão. O NAME é opcional.

      <INPUT TYPE=Image NAME=... SRC=... ALT=...>
      Uma outra alternativa para o tipo SUBMIT seria o uso de uma imagem em seu lugar. Para isso, existe o tipo IMAGE. Neste caso, passam a existir os atributos SRC e ALT normalmente usados em elementos que define uma imagem.

      <INPUT TYPE=Hidden NAME=... Value=...>
      O valor HIDDEN (escondido) define dados que devem ser passados ao programa, mas não devem aparecer para quem está vendo a sua página. Neste caso, NAME identifica o dado e VALUE define o seu valor. 

 

      Para fazer um formulário tem que ser usado o script gratuito (ex.:http://cgi07.Freedback.com/mail.pl) e este script precisa de alguns comandos:

  • AnyFormMode -     Deve ser preenchido com o valor "MAIL";
  • AnyFormDisplay -  Pode ser preenchido com "SHORT", "STANDARD", com uma URL (endereço) da página que será mostrada após os dados serem enviados ou com "NONE";
  • to -                          Deve conter o e-mail no qual será enviado as informações do formulário;
  • AnyFormFrom -     Deve conter o e-mail de quem está preenchendo o formulário;
  • AnyFormSubject - Deve conter o assunto do formulário para quando receber o e-mail contendo as informações preenchidas do formulário poder identificar.

      Alguns destes elementos são normalmente definidos no elemento INPUT com o atributo TYPE e o valor HIDDEN:
<INPUT TYPE=Hidden NAME=to VALUE="rsalema@netc.pt">


Nota:     O script acima utilizado é apenas um dos exemplos a seguir. É sempre possível invocar outros 
                scripts e parametrizá-los devidamente. Se testar este exemplo, abaixo descrito, deve substituir o
                e-mail rsalema@netc.pt pelo seu, para poder receber o formulário na sua caixa de correio. 
                É possível incluir mais elementos num formulário ou até armazenar os dados numa base de dados
                para um posterior tratamento da informação, esses exemplos, de momento, ainda não constam
                neste Curso de HTML.

Código de um formulário (exemplo completo):

<B>Preencha o formulário e clique no botao ok.:</B>
<P>
<FORM ACTION="http://cgi07.Freedback.com/mail.pl" METHOD="POST">
<INPUT TYPE="hidden" NAME="AnyFormDisplay" VALUE=NONE>
<INPUT TYPE="hidden" NAME="AnyFormMode" VALUE="mail">
<INPUT TYPE="hidden" NAME="AnyFormSubject" VALUE="e-mails da minha HomePage">
<INPUT TYPE="hidden" NAME="to" VALUE="rsalema@netc.pt">
<TABLE BORDER="0">
<TR>
<TD>Email.:</TD>
<TD><INPUT TYPE="text" SIZE="40" NAME="AnyFormFrom"></TD>
</TR><TR>
<TD>Nome.:</TD>
<TD><INPUT TYPE="text" SIZE=35 NAME="Nome.:"></TD>
</TR><TR>
<TD>Idade.:</TD>
<TD><INPUT TYPE="text" SIZE=3 NAME="Idade.:"></TD>
</TR><TR>
<TD>Sexo.: </TD>
<TD>
<INPUT TYPE="Radio" NAME=sexo VALUE=Mas CHECKED>Masculino
<INPUT TYPE="Radio" NAME=sexo VALUE=Fem>Feminino
</TD>
</TR><TR>
<TD>Localidade.:</TD>
<TD><INPUT TYPE="text" SIZE=20 NAME="Localidade.:"></TD>
</TR><TR>
<TD>Cidade.:</TD>
<TD>
</SELECT>
<SELECT NAME=Cidade>
<OPTION VALUE=Lisboa>Lisboa
<OPTION VALUE=Porto>Porto
<OPTION VALUE=Coimbra>Coimbra
<OPTION VALUE=Outro>Outro
</SELECT>
</TD>
</TR><TR>
<TD>País.:</TD>
<TD><INPUT TYPE="text" SIZE=20 NAME="País.:"></TD>
</TR><TR>
<TD>Mensagem.:</TD>
<TD><TEXTAREA NAME="Mensagem" ROWS="4" COLS="35"></TEXTAREA></TD>
</TR><TR>
<TD></TD>
<TD><INPUT TYPE="image" SRC="http://planeta.clix.pt/rsal/curso_html/images/ok.gif"></TD>
</TABLE>
</FORM>

 

      Agora veja como ficou este formulário:

 
Preencha o formulario e clique no botao ok.:

 

Email.:
Nome.:
Idade.:
Sexo.: Masculino Feminino
Localidade.:
Cidade.:
País.:
Mensagem.:

 

Introdução| Lição 1| Lição 2| Lição 3| Lição 4| Lição 5| Lição 6| Lição 7| Lição 8| Lição 9