Introdução
 A Web surgiu inicialmente como uma nova forma de comuni-
Formulários &
Conteúdo Dinâmico
Mário Antonio Meireles Teixeira
Depto. de Informática - UFMA
mario@deinf.ufma.br
Interação Browser x Servidor Web
 Modelo mais usual:
Formulários & CGI
cação de informações, fazendo uso de recursos de hipertexto e
multimídia.
 Ultimamente, tem sido vista como uma plataforma de desenvol-
vimento de aplicações cliente/servidor, com várias soluções
possíveis.
 A solução precursora foi o CGI (Common Gateway Interface).
 Outras: ASP, Cold Fusion, Java, PHP, Servlets, JSP, CORBA...
Formulários & CGI 2
Interação Browser x Servidor Web
 Utilizando CGI:
3 Formulários & CGI 4
Conteúdo Dinâmico
 Deve-se definir um protocolo que especifique como as informa-
ções são trocadas entre um browser e um servidor web.
– Informações: parâmetros de entrada para programas localizados
no servidor.
 O usuário solicita a execução de um programa no servidor web,
indo além da mera funcionalidade de apresentação de infor-
mações da linguagem HTML.
 Aplicações: serviços de busca, e-mail, bancos de dados,
comércio eletrônico . . .
Formulários & CGI 5 Formulários & CGI
Funcionamento
 Funções do Script:
– Lê os dados enviados pelo usuário;
– Decodifica a string de entrada (extrai os parâmetros);
– Realiza o processamento que lhe cabe;
– Monta uma página HTML de resultados, que é enviada de volta ao
usuário.
 O desenvolvedor pode, então, produzir páginas HTML dina-
micamente, em resposta às ações dos usuários.
 As páginas produzidas podem conter qualquer elemento HTML
válido, até mesmo outro formulário.
Formulários & CGI 7 Formulários & CGI
Funcionamento
 Programa ou Script? Depende da linguagem de programação
utilizada.
 Um script/programa pode ser acionado diretamente por meio de
uma URL ou a partir de um formulário HTML (mais comum).
 Cada abordagem possui sua própria forma de acionamento dos
scripts (processos, threads, pool ...)
 O servidor web executa o script e passa-lhe os dados de entrada
que recebeu do cliente.
6
Dados de entrada
 Os dados podem ser enviados ao servidor por dois métodos:
GET e POST.
 Qualquer que seja o método empregado, o formato dos dados de
entrada é sempre o mesmo:
nome1=valor1&nome2=valor2& . . . &nomek=valork . . .
 A string recebida contém uma seqüência de pares nome/valor,
separados por um “&”.
– nome - identificação do campo no formulário
– valor - conteúdo do campo
8
O Método GET O Método POST

 Este método faz com que os dados sejam passados ao programa
anexados à URL utilizada para invocar o programa, após um ?
 O programa pode obter os dados de entrada a partir de variáveis
de ambiente.
 Há um limite máximo de 1024 bytes para o tamanho dos dados
passados.
 GET só deve ser usado para uma pequena quantidade de dados
de entrada, por exemplo, em consultas ao servidor.
 GET é um método menos seguro, pois “expõe” os dados
enviados pelo usuário na URL.
 O método POST faz com que os dados sejam enviados ao
servidor em uma mensagem separada e não anexados após uma
URL.
 O script lê os dados a partir da entrada padrão (stdin) e não há
limitação para o tamanho do fluxo de dados.
 Porém, é preciso verificar o tamanho dos dados enviados, em
uma variável de ambiente.
 É sempre preferível usar o método POST no lugar do GET,
principalmente se a quantidade de dados for grande, como no
caso de ações que atualizam arquivos no servidor.

Formulários & CGI 9 Formulários & CGI 10

Formulários A tag FORM

 Os formulários, na maioria das vezes, são a porta de entrada  Encapsula todo o conteúdo do formulário.
para um programa/script no servidor web.  Define a URL do programa invocado e o método de envio dos
dados ao servidor.
 A HTML possui tags especiais para a criação de formulários:  Sintaxe:
– FORM
– INPUT <FORM METHOD=GET/POST ACTION=“http:// . . .”>
– SELECT ...
</FORM>
– TEXTAREA

 Qualquer elemento HTML válido pode estar dentro de uma tag

 Um formulário é sempre definido no corpo de um documento
<FORM>, exceto outro formulário.
HTML e pode estar misturado com outras tags.
Formulários & CGI 11 Formulários & CGI 12
A tag INPUT A tag INPUT

 Especifica um ponto de entrada de dados no formulário.  Atributos:

 Sintaxe: – NAME é o nome interno do campo, usado para formar os pares
nome/valor na string enviada ao servidor.
<INPUT TYPE= . . . NAME=“. . .” VALUE= “. . .” . . .> – VALUE é o conteúdo default dos campos text e password. Para
radio ou checkbox, define o valor do campo quando ele é
selecionado. Para submit e reset, especifica o rótulo do botão.
 Atributos:
– CHECKED define se o botão de rádio ou caixa de verificação vai
– TYPE indica o tipo do campo. Pode ser: estar selecionado por default.
• text, password, checkbox, radio
– SIZE define o tamanho físico do campo, na tela do computador.
• submit - Botão de envio de dados ao servidor
– MAXLENGTH é o número máximo de caracteres que o campo
• reset - Botão para limpar os campos do form ou retorná-los aos seus
valores iniciais
aceitará como entrada.

Formulários & CGI 13 Formulários & CGI 14

A tag SELECT A tag SELECT

 Esta tag serve para criar menus de opções ou listas de rolagem.  Atributos para SELECT:
– NAME é o nome interno do controle.
 Sintaxe: – SIZE é o tamanho da área de seleção; 1 é o default. Se SIZE for
maior que um, o campo é apresentado como uma lista de rolagem.
<SELECT NAME=“. . .”> – MULTIPLE possibilita múltiplas escolhas.
<OPTION> primeira opção
<OPTION> segunda opção  Atributos para OPTION:
<OPTION> . . . – SELECTED especifica que a opção aparecerá selecionada por
</SELECT> default.

Formulários & CGI 15 Formulários & CGI 16

A tag TEXTAREA Exemplo de Formulário

 É utilizada para colocar um campo de entrada no formulário,

com múltiplas linhas (campo memo).
 Sintaxe:
<TEXTAREA NAME=“. . .” ROWS=. . . COLS=. . . >
...
</TEXTAREA>

 Atributos:
– NAME é o nome interno do campo.
– ROWS indica o número de linhas do campo.
– COLS indica o número de colunas.

Formulários & CGI 17 Formulários & CGI 18

<html>
<head><title>Formulario de Inclusao</title>
</head>
<body>

<form method=post
action="http://www.deinf.ufma.br/~mario/...">
<h3>Dados Pessoais</h3>
<hr>
<p>Codigo:<br>
<input name="codigo" size=11 maxlength=10>
<p>Nome do aluno:<br>
<input name="nome" size=35><br>
<p>Endereco:<br>
<input name="ender" size=50><br>
<p><input type=submit value="Incluir">
<input type=reset value="Limpar">
<hr>
</form>
</body>
</html>
Formulários & CGI 19