Sei sulla pagina 1di 26

Formulrios

Formulrios
z Objetivo
z Controles
z Mtodos
z Linhas de Edio
Formulrios HTML
z O conjunto de controles de edio limitado
Botes
Linhas de Edio
Combo-boxes
Listas
Caixas de marcao(check-boxes)
Radio-Buttons
Imagens
Controle Invisvel
Formulrios HTML
z Mecanismo de captura de informaes do cliente.
Formulrios so recursos definidos no HTML que
permitem que uma pgina apresente controles de
edio.
O Usurio pode selecionar ou preencher o contedo
destes componentes, que poder ser enviado para o
servidor.
Existem outros mecanismos para apresentar controles
de edio no navegador cliente, como componentes de
lado cliente(applets ou Active-X).
Formulrios
zA tag <FORM> indica o inicio de um
formulrio.
A tag de fechamento</FORM> indica o fim do
formulrio,mas os controles que pertencem a
este.
A disposio dos controles depende das tags
HTML apresentadas entre eles, tais como
tabelas ou pargrafos.
Formulrios
z Um formulrio esta associado a uma URL.
A pgina ou programa inidicado pela URL ser
ativado quando o usurio submeter os dados do
fomulrio(atributo action).
A pgina ou programa receber os dados
digitados pelo usurio em um formato especial.
O mtodo de envio de parmetros tambm
idicado no formulrio(atributo method).
Mtodos de Envio de Parmetros

z Mtodo GET
Os Parmetros so apresentados aps a URL.
Vantagem:permite a gravao de bookmarks.
Desvantagem: Expe os dados do formulrio no
navegador.
z Mtodo POST
Os Parmetros no so apresentados aps a URL.
Vantagens e devantagens inversas do mtodo GET.
Controles
z A tag <INPUT> inidica um controle em uma
pgina.
Os diversos tipos de controle so definidos de acordo
com o valor do atributo type.
O nome de controle identificado pelo atributo name.
O nome utilizado para identificar o contedo do
controle quando enviado para o servidor.
O nome de um controle dever ser nico dentre os
controles de um formulrio(HTML permite nomes
iguais!!!)
O contudo de controles sem nome no enviado para
o servidor.
Mtodo GET
<html>
<head><title>Metodo Post</title></head>
<body>
<form action=teste.html method=get>
Texto
<input type=text name=texto>
<input type=submit value=Envia>
</form>
</body>
</html>
Mtodo Get
Mtodo Post
<form action=teste.html method=post>
Texto
<input type=text name=texto>
<input type=submit value=Envia>
</form>
Linhas de Edio
z O atributo type indica o tipo da linha de edio.
Linha de edio simples(text)
Linha de edio de senha(password)
Cuidado ao usar senhas com o mtodo get!!!
z O atributo size indica o tamanho da linha de
edio.
O atributo value indica o contedo inicial da linha.
Linhas de Edio
<html>
<head><title>Metodo Post</title></head>
<html>
<form action=login.asp method=post>
Login
<input type =text name=login size=10>
<br>
Senha
<input type=password name=senha size=10>
<input type=submit value=login>
</form>
</body>
</html>
Botes
z Atributo type igual a submit
O atributo value indica o ttulo do boto.
Em algumas situaes, precisamos utilizar
espaos em branco no nome para alterar o
tamanho do boto.
Se o usurio clica no boto, o navegador
submete o formlrio ao servidor.
Login/Password
Caixas de Marcao
z Atributo type igual a checkbox
O atributo value enviado para o servidor junto
ao nome do controle qundo este marcado pelo
cliente.
Se o controle no marcado, o cliente
omite(no envia) seu nome e valor como
parmetros para o servidor.
Caixas de Marcao
<form action=teste.asp method=get>
<input type =checkbox name=marcado value=MRC>
<input type=submit value=OK>

</form>
Radio Buttons
z Atributo type igual Radio
Um formulrio tem diversos radio-buttons como o
mesmo nome.
Os radio-buttons de mesmo nome formam um grupo
onde no mximo um controle est selecionado.
O Cada radio-button deve conter um valor distinto,
indicado no atributo value.
Valor do radio-button enviado para o servidor se o
controle estiver selecionado.
Radio Buttons
<form action=teste.html method=get>
<input type =radio name=marcado value=0 checked>Tipo 0
<input type =radio name=marcado value=1 >Tipo 1
<input type =radio name=marcado value=2 >Tipo 2
<input type =radio name=marcado value=3 >Tipo 3
<input type=submit value=OK>

</form>
Imagens
z Atributo type igual a image
O controle apresenta uma imagem, cuja URL
indicada no atributo src e o texto alternativo
indicado no atributo alt.
A posio da imagem enviada para o servidor
nos parmentros x e y acompanhados do nome
da imagem e de um ponto.
Se o usurio clica na imagem, o navegador
submete o formulrio para o servidor.
Imagens
<form action=teste.html method=get>
<input type =image name=peixe src=Peixe.jpg>

</form>
Controles Invisveis
z Atributo type igual a Hidden
Controles invisveis so utilizados para tranferir dados
entre duas ou mais pginas HTML que devem passar
pelo cliente.
O servidor captura a informao da primeira pgina e
cria um controle invisvel na segunda com esta
informao.
No retorno da segunda pgina, o servidor recupera o
estado(informao) da primeira atravs do controle
invisvel.
O atributo value contm a informao do controle
invisvel.
Combo e Listas
z Controle definido pela <SELECT>
O controle possui um nome, indicado pelo
atributo name.
O controle possui diversas opes.
O atributo size indica o nmero de opes
apresentadas ao mesmo tempo na pgina.
Se size for maior que 1, o controle ser
apresentado como uma lista de opes.
Combo e Listas
z Opes de listas
Cada opo indicada por uma tag<OPTION>
dentro do escopo da Tag<Select>
Cada tag<OPTION> possui um valor, indicado
no atributo value.
O valor enviado para o servidor junto com o
nome da lista, quando o navegador envia o
formulrio.
Combo e Listas
<form action=teste.html method=get>
<select name=combo>
<option value=1 >Opo 1</option>
<option value=2 >Opo 2</option>
<option value=3 >Opo 3</option>
<option value=4 >Opo 4</option>
</select>
<input type=submit value=ok>
</form>

Potrebbero piacerti anche