Post on 23-Jan-2016
description
Internet - 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
Internet - 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
Internet - 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
DEECFEUP
Internet - 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 (& --> &)
POST faz duas ligações ao servidor, uma para contactar o servidor,
outra para enviar os parâmetros pode encriptar os dados
Internet - 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
Internet - 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)
Internet - 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
Internet - 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
Internet - 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>
Internet - 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>
Internet - 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
Internet - 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
Internet - 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 );
}
Internet - 14
CGI