1 / 14

Formulários

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

oberon
Download Presentation

Formulários

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  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

More Related