AULA 19: Construção de formulários
NESTA AULA
Nesta aula vamos aprender a utilizar formulários numa página web.
Os formulários estão espalhados por todo o lado, quer em papel, quer na
Internet. Eles fazem parte do que muitas vezes chamamos "papelada" ou
"burocracia", dados para preencher, perguntas para responder, opções a
assinalar.
Mas os formulários na Internet para além de mais fáceis de "preencher" são
também muito mais úteis, porque permitem ao criador de um web site obter
informação do utilizador que pode até, em certos casos, passar por um 'cgi'
(programa que reside no servidor) especial para tratar a informação de uma dada
forma.
Em muitos sites os seus criadores pedem a opinião dos utilizadores através de um
formulário, ou permitem obter informações específicas sobre um dado tema ou
produto recorrendo a esta forma de interagir com o utilizador.
Um formulário pode ser colocado em qualquer local de uma página web, tal como
qualquer imagem ou pedaço de texto pode ser incluído em qualquer lugar na
página. O 'tag' do formulário é o <form> com o correspondente </form>. Um
formulário em html pode conter "caixas" para escrever texto livre, "radio
buttons" para seleccionar uma entre várias opções, "check boxes" para
seleccionar uma ou mais entre várias opções, "drop down menus" que permite
seleccionar uma opção em formato de "menu" que abre quando se clica num botão
com uma pequena seta.
Vamos começar por criar um formulário simples. Para isso crie uma página html
com os seguintes tags :
-------------
<html>
<head>
<title>Um formulário simples</title>
</head>
<body>
<form enctype="text/plain" method=post action="mailto:meunome@servidor.com">
País<br><br>
<SELECT NAME="Pais"><br>
<OPTION> ----
<OPTION> Portugal
<OPTION> Brasil
<OPTION> Estados-Unidos
<OPTION> Outro
</SELECT>
<br><br>
Nome : <br>
<INPUT TYPE=TEXT NAME="Nome" VALUE="" SIZE=50>
<br><br>
<INPUT TYPE="SUBMIT" VALUE="Enviar">
</form>
</body>
</html>
-------------
Aqui o formulário tem início com o tag '<form>' que tem alguns atributos.
Tal como já foi ensinado em aulas anteriores, um atributo é incluído dentro do
tag da forma <tag atributo=valor atributo2=valor>.
O atributo 'enctype' tem o valor 'text/plain' que diz que os resultados deste
formulário devem ser tratados como texto puro e simples.
O atributo 'method' indica qual o método de enviar os resultados; aqui
escolhemos 'post' que faz com que os dados introduzidos pelo utilizador sejam
enviados por este método (na maior parte dos casos utiliza-se o 'post'. Não vale
a pena entrar em muito detalhe acerca deste atributo).
O atributo 'action' especifica para onde devem ser enviados os resultados
introduzidos; aqui decidimos que eles devem ser enviados por e-mail (indicado
pelo mailto:) para o endereço de e-mail indicado.
Repare também que o formulário acaba com o tag '</form>'
Entre o <form> e o </form> incluimos os tags específicos para formulários que
permitem definir o tipo de 'caixas' e 'menus' para o utilizador escrever as suas
respostas e escolher opções.
O tag <select> permite ao utilizador seleccionar uma opção entre as que são
apresentadas de uma forma semelhante a um "menu" que são utilizados por muitos
programas do windows.
Mais uma vez recorremos a um atributo para o tag <select> neste caso o atributo
'name' que define o nome do menu (que não aparece na página, é apenas enviado
com os resultados para o e-mail ou para um cgi).
Entre os tags <select> e </select> recorremos ao <option>. Cada um dos tags <option>
indica uma opção para o utilizador seleccionar.
De seguida utilizamos um outro tipo de 'caixa' com o tag <input> que permite
escrever texto livre.
O atributo 'type' com o valor 'text' indica que se pode aqui escrever texto
livre.
O atributo 'name' mais uma vez define o nome da caixa que não aparece na página
mas que é depois utilizado quando os dados são enviados para um endereço de
e-mail ou para um cgi.
O 'value' com o valor "" diz que inicialmente, quando a página é carregada, a
caixa está vazia.
O 'size' com o valor '50' indica que o tamanho da caixa é de 50 caracteres.
Por fim usamos um tag especial, o <INPUT> com o atributo 'type="submit"' que
define um botão para o utilizador carregar para enviar os dados.
Aqui o atributo 'value' que neste caso tem o valor de 'Enviar' faz com que a
palavra 'enviar' apareça no botão.
Experimente este formulário, alterando o endereço 'meunome@servidor.com' pelo
seu próprio endereço de e-mail. Depois de preencher as 'caixas' e carregar em
'enviar' deverá receber um e-mail com a informação que introduziu.
Repare que quando carrega em 'enviar' o seu browser avisa-o de que vai chamar o
seu programa de e-mail para enviar a informação devido à utilização do
''mailto''.
Este pequeno senão pode ser evitado utilizando um cgi em vez do 'mailto:' no
entanto a maior parte dos locais onde é possível alojar gratuitamente páginas
web não é permitida a instalação de cgis. Outra dificuldade na utilização de
cgis está no facto de em geral a configuração de cgis não ser fácil.
Vamos agora olhar para um formulário um pouco mais elaborado :
--------------------------------------------------------------------
<form action="mailto:meunome@servidor.com" method="POST">
<table border="0" width="100%" cellspacing="0" cellpadding="0">
<tr>
<td width="25%"><font face="Arial,Helvetica" size="2">Profissão<br>
<input type="text" size="20" name="profissao"></font></td>
<td width="41%"><font face="Arial, Helvetica" size="2">Cidade<br>
<input type="text" size="20" name="Cidade"></font></td>
</tr>
<tr>
<td width="25%">
<font face="Arial, Helvetica" size="2">País</font><br>
<input type="text" name="Pais" size="20"><br>
<font face="Arial, Helvetica" size="2"><br>
</font></td>
<td width="41%" valign="top"><font face="Arial, Helvetica" size="2">Idade</font><br>
<select name="Idade" size="1">
<option value="------">------</option>
<option value="<15">menos de 15</option>
<option value="16 a 18">15 a 18</option>
<option value="19 a 25">19 a 25</option>
<option value="26 a 35">26 a 35</option>
<option value="36 a 45">36 a 45</option>
<option value="46 a 55">46 a 55</option>
<option value="mais de 55">mais de 55</option>
</select></td>
</tr>
</table>
<p><font face="Arial, Helvetica" size="2">Qual a secção do meu site que mais
gosta?<br>
<select name="Seccao_mais_gosta" size="1">
<option selected value="Indiferente">Indiferente</option>
<option value="Todas">Todas</option>
<option value="Nenhuma">Nenhuma</option>
<option value="Tecnologia">Tecnologia</option>
<option value="Software">Software</option>
<option value="Jogos">Jogos</option>
<option value="Web">Web</option>
<option value="Livraria">Livraria</option>
<option value="Cartoon">Cartoon</option>
</select><br><br>
Tem alguma secção nova para sugerir ?<br>
<input type="text" name="seccaonova" size="50"><br>
<br>
<br>
Como conheceu o meu site?<br>
<select name="como_soube" size="1">
<option value="-------">-------</option>
<option value="News Groups">News Groups</option>
<option value="IRC (ou outros chats)">IRC (ou outros chats)</option>
<option value="Vi numa pagina web">Vi numa página web</option>
<option value="Motor de busca">Motor de busca</option>
<option value="Vi num jornal ou revista">Vi num jornal ou revista</option>
<option value="Outro">Outro</option>
</select><br>
<br>
O que acha do aspecto e estrutura do site, e quais são as suas sugestões</font><br>
<textarea rows="6" name="comentarios" cols="55"></textarea><br>
</p>
<p>
<input type="submit" name="B1" value="Submeter">
<input type="reset" name="B2" value="Cancelar"></p>
</form>
-------------------------------------------------------------
Repare mais uma vez no tag <form> semelhante ao do exemplo anterior.
Neste exemplo estamos também a tirar partido de tipos de letras e tabelas para
melhorar o aspecto estético do formulário.
Leia este exemplo com calma e tente perceber o que cada tag faz.
Todos os tags aqui presentes já foram ensinados, mas se não se recorda de algum,
leia de novo a aula em que foi dado.
Neste formulário estamos a usar três tipos de 'caixas' :
O 'text' (com input type="text")
O 'select' (com select name="nome" seguido de vários 'option')
O 'textarea' (com textarea rows="6" name="comentarios" cols="55")
Repare também nas seguintes linhas :
<input type="submit" name="B1" value="Submeter">
<input type="reset" name="B2" value="Cancelar">
o 'submit' indica que quando o utilizador pressiona o botão a informação é
enviada.
O 'reset' indica que ao premir este botão a informação já introduzida no
formulário é anulada e o utilizador tem que começar de novo (útil para quando há
enganos a preencher os dados).
O 'value' é o texto que aparece escrito em cada um dos botões.
O 'name' em ambos os casos é irrelevante e aparece apenas no e-mail que irá
receber quando os seus utilizadores preenchem o formulário.
Olhe com cuidado para cada parte do formulário que contém uma 'caixa'.
Experimente gravar este exemplo no seu disco como um ficheiro html e verifique a
sua funcionalidade.
Nesta aula não nos é possível indicar todos os atributos de todos os tags que se
podem utilizar em formulários, para tal poderá consultar uma referência de tags
html detalhada, com a explicação de cada tag e cada atributo.
Um desses guias de referência está disponível em
http://www.htmlreference.com/
Ao visitar este web site procure "Form Tags" na barra lateral esquerda que tem
um fundo azul.
Comentários
Gustavo Moura Brasil (não verificado)
Sex, 2009-10-23 17:00
Ligação permanente
Tenho um programa de rádio...
O programa se chama Cabeça de Fósforo. Dedicado ao Soul music e poesias... quem sabe podemos trocar links....abraço
http://www.cabecadfosforo.blogspot.com/