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 (& --> &amp;)

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>

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