Formulários Objectivo: obter do utilizador respostas personalizadas

Apresentação em tema: "Formulários Objectivo: obter do utilizador respostas personalizadas"— Transcrição da apresentação:

1 Formulários Objectivo: obter do utilizador respostas personalizadas
aparece no corpo de um documento suporta vários objectos GUI permite marcas normais para posicionamento, instruções e legendas Comunicação: servidor envia página com formulário utilizador preenche formulário, browser devolve valores introduzidos servidor processa os valores e acusa a recepção ou pede correcções marca <FORM> delimita um formulário atributo action define o URL do programa que vai processar a resposta atributo enctype define a codificação dos valores atributo method define o método de transmissão

2 Escolha do programa <form action= " - servidor ~gtd - em geral, directório base do utilizador gtd; no caso de um URL significa o directório ~gtd/public_html htbin - directório .cgi-bin leget - nome de um executável, programa que processa a resposta directório public_html/.cgi-bin tem restrições especiais de segurança estes programas funcionam como uma espécie de extensão do servidor para tarefas específicas mecanismo de comunicação servidor-programas CGI - Common Gateway Interface

3 Codificação dos valores
Atributo enctype por omissão application/x-www-form-urlencoded envia pares nome=valor para cada campo separa campos por “&” converte espaços nos valores para “+” caracteres não alfanuméricos para “%” e valor hexadecimal exemplo: nome=Gabriel+David&escola=DEEC%OD%0AFEUP para enviar por correio electrónico <form method=POST enctype=“text/plain” onSubmit=“window.alert(‘Enviado!)”> envia envia os pares nome=valor sem codificação, em linhas separadas Gabriel David DEEC FEUP

4 Método de transmissão GET POST
o browser apensa ao URL de processamento um “?” e os valores codificados faz só uma comunicação com o servidor útil para valores pequenos menos seguro, porque é acessível aos farejadores (sniffers) e não é encriptado pode ser usado fora de um FORM (& --> &) POST faz duas ligações ao servidor, uma para contactar o servidor, outra para enviar os parâmetros pode encriptar os dados

5 Elementos elementos declarados com a marca <input>
atributos obrigatórios type indica o tipo de objecto name para designar o valor (excepto em submit, reset e image) value, só nalguns casos, para associar um valor por omissão tipos mais usados text (size, maxlength, value) caixa de texto tamanho size com uma só linha até maxlength e possível valor por omissão value password semelhante a text, com asteriscos em vez de caracteres checkbox (value) caixa para marcar; value não é usado como legenda, só é enviado

6 Mais elementos Botões de acção radio (value) submit image (src)
grupos de botões mutuamente exclusivos nome idêntico nos vários botões de um grupo Botões de acção submit envia os valores do formulário, sem criar entrada própria nos parâmetros enviados se tiver só value, usa-o para etiqueta do botão se tiver name e value, faz etiqueta e envia parâmetro - importante se existirem vários botões de submissão que sejam de distinguir image (src) também submete o formulário envia as coordenadas name.x e name.y, úteis para identificar regiões num mapa ou objectos numa imagem (comparar usemap)

7 Ainda mais elementos reset button (value) hidden (value)
repõe o estado inicial do formulário button (value) relativamente pouco interessante útil em conjunção com JavaScript activado no evento onClick hidden (value) campo invisível que serve para memorizar valores durante um “diálogo” com o utilizador cada página é auto-contida; para fazer transitar uma resposta parcial de um primeiro formulário para um segundo, sem ter que armazenar o valor no servidor, pode o formulário seguinte ter, para além dos campos normais, campos hidden onde esses valores são temporariamente armazenados e depois reenviados

8 Outras marcas para formulários
<textarea name=ident cols=30 rows=4> Gabriel David FEUP DEEC </textarea> cria uma caixa de texto com as dimensões indicadas o texto não pode conter HTML, mas pode ser alterado <select name=escolhe size=3> cria uma lista que mostra três valores os valores são indicados na marca <option> e podem ser em número superior

9 CGI - GET <html><head> <title>CGI</title>
</head><body> <h4 align=left>Chamada usando GET</h4> <form method=GET action= " <p>Escreva uma palavra: <input type=text name=palavra size=10 maxlength=20> </p> <input type=checkbox name=verdade checked value="portugues"> Português <input type=checkbox name=verdade value="ingles"> Inglês <br> <input type=submit> </form> <h4 align=left>Chamada por GET directo</h4> <a href=" Vai para o CGI sem FORM</a>. </body></html>

10 CGI - POST <html><head> <title>CGI</title>
</head><body> <h4 align=left>Chamada por POST</h4> <form method=POST action= " <p>Escreva uma palavra escondida: <input type=password name=nome size=10 maxlength=20 value="Segredo"> </p> <select name="lingua" size=3> <option>Português <option>Francês <option>Inglês <option>Alemão </select> <br> <input type=submit> </form> </body> </html>

11 Servidor- GET #!/bin/bash -f # # Lista parametros no utilizador
echo "Content-type: text/html" echo echo '<html><head>' echo '<title>Parametros por GET</title>' echo '</head><body>' echo '<b>Parâmetros</b>: ' echo $QUERY_STRING echo '</body>' exit 0

12 Servidor - GET directo #!/usr/bin/bash -f #
# Lista parametros no utilizador echo "Content-type: text/html" echo echo '<html><head>' echo '<title>Parametros directos</title>' echo '</head><body>' echo '<ul>' for i do echo '<li>' $i; done echo '</ul>' echo '</body>' exit 0

13 Servidor - POST bash-2.01$ cat lepost.c #include <stdio.h>
main(int argc, char * argv[]){ char entrada[255]; int i; for( i=0; (entrada[i]=getchar()) != EOF ; i++); entrada[i]='\0'; printf( "Content-type: text/html\n\n" ); printf( "%s", entrada ); }

14 CGI