aspectos avançados Formulários · Quando o utilizador clica sobre o botão "Submeter" (ou...

Programação em HTML – aspectos avançados

Paulo GG Soares 2011 ©

Formulários

Os formulários servem para recolher dados introduzidos pelos utilizadores e enviá-los para processamento no servidor.

Formulários são home pages que permitem ao internauta preencherem campos e submetê-los para alguém. Os formulários podem ser utilizados para praticamente qualquer entrada de dados em home pages. O objectivo é permitir que um visitante da home page envie informações para o responsável pela página. Existem diversos tipos de controlos diferentes para formulários. Cada um permite a entrada de um determinado tipo de dado. Qualquer campo possui o seguinte formato: <input type=tipo name=nome >.

Criar um formulário

Um formulário é uma secção da página HTML que contém elementos que permitem ao utilizador introduzir dados

(elementos <textarea> e vários tipos de elementos <input>, <option> e <select>). Estes elementos permitem inserir

dados numéricos, textos curtos, textos extensos, seleccionar elementos numa lista com várias escolhas, responder

facilmente com respostas do tipo "sim" ou "não", seleccionar rapidamente uma opção num grupo pequeno, etc.

Os formulários criam-se com o elemento <form>. Dentro desse elemento principal colocamos diversos elementos para

a inserção dos dados.

<form> <input>

……… <input>

</form>

O elemento <form> por si só não faz com que o browser desenhe nada na página nem permite inserir dados. Ele

contém elementos que recolhem os dados e possui atributos que dizem ao browser como e para onde deve enviar os

dados para processamento.

Inputs

Os elementos que encontramos com maior frequência em formulários são o elemento <input>. O exemplo seguinte

mostra um formulário simples com dois elementos input:

<form action="processar.php" method="post"> Primeiro nome: <input type="text" name="primeiro_nome"><br> Último nome: <input type="text" name="ultimo_nome">

</form>

Aspecto do formulário quando visualizado no browser:

O elemento <input> pode assumir diversas formas com finalidades diferentes.



"Radio Buttons"

Os "Radio Buttons" usam-se para criar um grupo (pequeno) de opções em que apenas se pode seleccionar uma de

cada vez.

<form action="processamento.asp"> <input type="radio" name="sexo" value="masculino"> Masculino<br> <input type="radio" name="sexo" value="feminino"> Feminino

<form>

Aspecto do formulário quando visualizado num browser:

Repare que só se pode seleccionar uma das opções dadas. Elas excluem-se mutuamente. Checkboxes As caixas de validação ("checkboxes") devem ser usadas sempre que queremos que o utilizador aprove (ou não) itens dentro de um pequeno grupo. É permitido validar mais do que uma opção simultaneamente. <form>

<input type="checkbox" name="patins">Eu tenho patins em linha<br> <input type="checkbox" name="skate">Eu tenho um skate

<form> Aspecto do formulário quando visualizado num browser:

Repare que você pode seleccionar cada uma das opções de forma independente da outra. O atributo action e o botão de submissão Quando o utilizador clica sobre o botão "Submeter" (ou "Submit",) as repostas e texto inseridos no formulário são enviados para processamento. O atributo action do elemento <form> contém o endereço (URL) do recurso da Web que está encarregado de realizar esse processamento. É para lá que o conteúdo do formulário é enviado. <form name="input" action="exemplos/action.php" method="get"> Nome de utilizador: <input type="text" name="utilizador"> <input type="submit" value="Submeter"> <form> Aspecto do formulário quando visualizado num browser:



Elementos para Formulários

<form> Define um formulário para recolher dados inseridos pelo utilizador

<input> Insere um campo para introduzir dados

<textarea> Define uma área de texto (permite inserir texto com várias linhas e um número ilimitado de caracteres)

<label> Define um nome para um elemento

<fieldset> Agrupa elementos num formulário

<legend> Define uma legenda para um grupo de elementos do formulário

<select> Define uma lista com várias opções seleccionáveis

<optgroup> Define um grupo de opções

<option> Insere mais uma opção numa lista com várias opções seleccionáveis <button> Define um botão que pode ser pressionado Exemplos de Aplicação Como criar campos para inserção de texto ou dados <html> <head> <title>Exemplo</title> </head> <body> <form action="processar.php"> Escreva o seu primeiro nome: <input name="firstname"><br> Escreva o seu último o nome: <input name="lastname"><br> <input type="submit"> </form> </body> </html>



Campos para senhas ("password")

<html> <head> <title>Exemplo</title> </head> <body>

<form action="processar.php"> Escreva o seu nome de utilizador: <input name="user"><br> Escreva a sua senha (segredo): <input type="password" value="" name="password"><br> <input type="submit">

</form> <p><b>Nota:</b> Quando se digita uma senha o browser mostra asteriscos ou bolinhas em vez dos caracteres que introduz. Deste modo se alguém estiver a olhar por cima do nosso ombro enquanto escrevemos não vai conseguir ler a senha.</p>

</body> </html>

Caixas de validação ("checkboxes") <html> <head> <title>Exemplo</title> </head> <body>

<form action="processar.php"> Eu tenho uma bicicleta: <input type="checkbox" value="ON" name="bicicleta"><br> Eu tenho patins em linha: <input type="checkbox" value="ON" name="patins"> <br>

<input type="submit"> </form>

</body> </html>



"Radiobuttons" (grupos de botões em que apenas um pode estar activo) <html> <head> <title>Exemplo</title> </head> <body>

<form action="processar.php"> Masculino: <input type="radio" checked value="macho" name="Sexo"><br> Feminino: <input type="radio" value="fêmea" name="Sexo"><br> <input type="submit">

</form> <p><b>Nota:</b> Quando o utilizador clica sobre um "radiobutton" ele passa a ser a sua escolha (passa ao estado "checked") e os restantes "radiobuttons" pertencentes ao mesmo grupo passam ao estado "unchecked".</p>

</body> </html>



Lista com vários itens para seleccionar <html> <head> <title>Exemplo</title> </head> <body> <h3>Equipas</h3>

<form action="processar.php"> <select name="clubes">

<option value="Benfica" selected="selected">Benfica</option> <option value="FCP">F.C.P</option> <option value="Boavista">Boavista</option> <option value="Sporting">Sporting</option>

</select><br> <input type="submit">

</form> </body> </html>

Lista com vários itens seleccionáveis, mas com um valor pré-seleccionado <html> <head> <title>Exemplo</title> </head> <body> <h3>Equipas</h3>

<form action="processar.php"> <select name="clubes">

<option value="Benfica" selected="selected">Benfica</option> <option value="FCP">F.C.P</option> <option value="Boavista" selected>Boavista</option> <option value="Sporting">Sporting</option>

</select><br>



<input type="submit"> </form>

Repare que aqui temos um item pré-seleccionado de forma explícita. </body> </html>

Como criar um botão <html> <head> <title>Exemplo</title> </head> <body>

<form action="processar.php"> <input type="button" value="Carregue Aqui!">

</form> </body> </html>



Formulário com um campo para inserir dados e um botão para submeter <html> <head> <title>Exemplo</title> </head> <body>

<form name="input" action="processar.php" method="get"> Escreva o seu primeiro nome: <input value="Robin" name="PrimeiroNome"><br> Escreva o seu último o nome: <input value="dos Bosques" name="UltimoNome"><br> <input type="submit">

</form> <p>Se clicar sobre o botão "Submeter" os dados do formulário serão enviados para a página "processar.php".</p>

</body> </html>

Formulário com caixas de validação e um botão para submeter <html> <head> <title>Exemplo</title> </head> <body>

<form name="input" action="processar.php" method="get"> Eu tenho uma bicicleta: <input type="checkbox" checked value="ON" name="Bike"><br> Eu tenho patins em linha: <input type="checkbox" value="ON" name="Patins"><br> <input type="submit">

</form> <p>Se clicar sobre o botão "Submeter" os dados do formulário serão enviados para a página "processar.php".</p>

</body> </html>



Formulário com "radiobuttons" e um botão para submeter <html> <head> <title>Exemplo</title> </head> <body>

<form name="input" action="processar.php" method="get"> Masculino: <input type="radio" checked value="Masculino" name="Sexo"><br> Feminino: <input type="radio" value="Feminino" name="Sexo"><br>

<input type="submit"> </form> <p>Se clicar sobre o botão "Submeter" os dados do formulário serão enviados para a página "processar.php".</p>

</body> </html>



Para completar a funcionalidade seleccionada por cada tipo mencionado acima, existem ainda os seguintes atributos permitidos para a tag HTML input que podem ser utilizados para optimizar um determinado campo de um formulário: value=valor: inicializa o controlo com um determinado valor; disabled: quando presente determina que o controle não pode ser modificado pelo utilizador, funcionando como um controlo para exibição de dados; checked: quando presente em um controle do tipo checkbox determina que o campo seja inicializado marcado; size: tamanho: indica qual será o tamanho visível do campo na tela em caracteres; maxlength: entrada máxima, indica qual é o número de caracteres permitidos para entrada no controle; min: valor mínimo, indica qual será o menor valor numérico aceito no controle; max: valor máximo, indica qual será o maior valor numérico aceito no controle. Tags para Formulários Formulários são conjuntos de campos usados para criar uma página de entrada de dados. Existe um comando HTML para definir formulários. É o comando form cuja sintaxe é: <form method=método action=acção> O método do form é usado para especificar como o formulário será enviado para o servidor. Pode ser GET ou POST. O action do form é a URL (página.php) do CGI (common gateway interface) que fará o tratamento dos dados do formulário. O CGI é o programa que reconhece os dados enviados pelo utilizador e o envio do formulário para o destinatário.

OOO ppprrroootttooocccooolllooo hhhttttttppp --- GGGEEETTT eee ooo ppprrroootttooocccooolllooo hhhttttttppp --- PPPOOOSSSTTT

Estes protocolos codificam parâmetros do pedido de pares de nome e valor no pedido de HTTP. O protocolo HTTP-GET

e o protocolo HTTP POST fornecem retro-compatibilidade das seguintes formas.

O protocolo HTTP-GET cria uma cadeia de consulta dos pares de nome e valor e, em seguida, anexa a cadeia de

consulta ao URL do script no servidor que processa o pedido. Por conseguinte, pode marcar o pedido.

O protocolo HTTP POST passa os pares de nome e valor no corpo da mensagem de pedido HTTP.

O método GET é usado quando queremos pesquisar ou passar dados para uma outra página usando a URL da página.

Vejamos um exemplo:

http://www.site.com /busca.php?produto=543

Tudo o que é inserido depois do "?" é considerado Query String e pode ser acedido na página actual usando a

combinação nome=valor, onde nome é "produto" e valor é "543". Se mais de um par nome=valor precisar ser enviado,

o símbolo "&" é usado na separação. Vejamos:

http://www.site.com/busca.php?produto=543&tipo=3



O método POST é usado quando queremos enviar dados a serem gravados numa base de dados ou para uma ficheiro

ou página. Vejamos um formulário HTML que usa o método POST para enviar dados para uma página ou ficheiro:

<form name="teste" method="post" action="pesquisar.php">

<input type="text" name="produto">

</form>

Aqui a página pesquisar.php receberá um par composto pelo nome do campo "produto" e o valor informado pelo

utilizador.

Quando estivermos a usar o método POST temos de definir nomes para os campos do formulário (propriedade name).

Tais nomes não devem conter espaços ou caracteres especiais.

Quando fazemos uma requisição HTTP, utilizamos sempre o GET.

Se digitamos um endereço na barra de endereço o navegador faz uma requisição HTTP para o servidor do endereço

digitado e o método dessa requisição é o GET. Se clicamos num link de um site, o navegador encarrega-se de fazer uma

requisição HTTP com o método GET, para buscar o conteúdo da página que clicámos.

Como Funciona o Método GET

O método GET utiliza a própria URL para enviar dados ao servidor. Quando enviamos um formulário pelo método GET,

o navegador pega nas informações do formulário e coloca-as junto com o URL de onde o formulário vai ser enviado e

envia, separando o endereço da URL dos dados do formulário por um “?” (ponto de interrogação).

Quando pesquisamos no Google, este faz uma requisição utilizando o método GET, podemos ver na barra de endereço

que o endereço ficou com um ponto de interrogação no meio, e depois do ponto de interrogação podemos ler, de

entre outros caracteres, o que você pesquisámos no Google.

Quando Utilizar o Método GET

Devemos utilizar o método GET sempre que a requisição que fazemos não altere o estado do servidor, tipo uma

consulta, uma busca ou qualquer outra coisa que, além de não alterar o estado do servidor.

Como Funciona o Método POST

O método POST envia os dados colocando-os no corpo da mensagem. Ele deixa a URL separada dos dados que serão

enviados e com isso podemos enviar qualquer tipo de dados por este método. Quando fazemos um registo num

formulário e depois de enviar a URL não existe o ponto de interrogação separando os dados que digitámos,

provavelmente o formulário foi enviado pelo método POST.



Quando Utilizar o Método POST

Utilizamos o método POST sempre que vamos alterar alguma coisa no servidor. Este método é utilizado em

formulários de registo de utilizadores, envio de dados para alteração do sistema, entre outros.

A diferença entre GET e POST é simples, sempre que consultamos alguma coisa, utilizamos GET mas se for para fazer

alguma alteração com a requisição, envio de ficheiros ou os dados, utilizamos o POST.

Diferenças no lado do Servidor entre GET e POST (PHP, CGI)

Como vimos enviar dados pelo método GET e POST é muito diferente, desta forma, o servidor também trata esses

dados de diferentes formas.

No PHP, quando enviamos dados pelo método GET, ele cria um array identificado por $_GET, que contém todos os

dados enviados por esse método. Quando enviamos os dados pelo método POST, o PHP cria um array identificado por

$_POST, também com todos os dados enviados por esse método.

Já num script CGI, quando utilizamos o método GET, os dados são recebido numa variável de ambiente, e com o

método POST, os dados são recebidos pela entrada padrão (stdin).

Voltamos agora ao exemplo do nosso formulário…….. Inserção de scripts A adição de scripts às páginas escritas em HTML pode fazer com que elas sejam capazes de reagir de forma dinâmica e interagir com os utilizadores.

Inserir um script numa página HTML A inserção de um script em HTML faz-se através do elemento <script>. <html> <head> </head> <body>

<script type="text/javascript"> document.write("Olá Mundo!"); </script>

</body> </html> O script apresentado acima produz o seguinte resultado:



Elementos para inserir scripts e código

<script> Define um bloco que contém um script

<noscript> Define texto alternativo para ser apresentado sempre que o script não é executado

<object> Insere um objecto na página

<param> Define parâmetros para controlar o objecto

Exemplos de Aplicação Como inserir um script <html> <head> <title>Exemplo</title> </head> <body>

<script type="text/javascript"> document.write('<h1>Olá Mundo!</h1>')

</script> <h1>Olá Mundo!</h1>

</body> </html>

aspectos avançados Formulários · Quando o utilizador clica sobre o botão "Submeter" (ou...

Documents

Transcript of aspectos avançados Formulários · Quando o utilizador clica sobre o botão "Submeter" (ou...