AULA 19: Construção de formulários

Separadores primários


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="&lt;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

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/


Faça um donativo!

Faça um donativo!

Agora é mais fácil com Paypal!

Com o paypal.me pode contribuir para o site em qualquer moeda e em qualquer valor com a segurança desta plataforma.

Clique aqui para ajudar com o que quiser, com o que poder.