Formulários

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= "http://www.fe.up.pt/~gtd/htbin/leget"> • www.fe.up.pt - 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 action=“mailto:cweb@fe.up.pt” 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 • 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 (& --> &amp;) • 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 • radio (value) • 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 • 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= "http://www.fe.up.pt/~gtd/htbin/leget"> <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="http://www.fe.up.pt/~gtd/htbin/ledir?Somos+parametros+sem+nome"> Vai para o CGI sem FORM</a>. </form> </body></html>

10. CGI - POST <html><head> <title>CGI</title> </head><body> <h4 align=left>Chamada por POST</h4> <form method=POST action= "http://www.fe.up.pt/~gtd/htbin/lepost"> <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