Formulários. Objetivo Controles Métodos Linhas de Edição

(1)

(2)

Formulários

z

Objetivo

z

Controles

z

Métodos

z

Linhas de Edição

(3)

Formulários HTML

z O conjunto de controles de edição é limitado

– Botões – Linhas de Edição – Combo-boxes – Listas – Caixas de marcação(check-boxes) – Radio-Buttons – Imagens – Controle Invisível

(4)

Formulários HTML

z Mecanismo de captura de informações do cliente.

¾ Formulários são recursos definidos no HTML que

permitem que uma página apresente controles de edição.

¾ O Usuário pode selecionar ou preencher o conteúdo

destes componentes, que poderá ser enviado para o servidor.

¾ Existem outros mecanismos para apresentar controles

de edição no navegador cliente, como componentes de lado cliente(applets ou Active-X).

(5)

Formulários

z

A tag <FORM> indica o inicio de um

formulário.

– A tag de fechamento</FORM> indica o fim do

formulário,mas os controles que pertencem a este.

– A disposição dos controles depende das tags

HTML apresentadas entre eles, tais como tabelas ou parágrafos.

(6)

Formulários

z

Um formulário esta associado a uma URL.

– A página ou programa inidicado pela URL será

ativado quando o usuário submeter os dados do fomulário(atributo action).

– A página ou programa receberá os dados

digitados pelo usuário em um formato especial.

– O método de envio de parâmetros também é

(7)

Métodos

de

Envio

de

Parâmetros

z Método GET

– Os Parâmetros são apresentados após a URL. – Vantagem:permite a gravação de bookmarks. – Desvantagem: Expõe os dados do formulário no

navegador.

z Método POST

– Os Parâmetros não são apresentados após a URL. – Vantagens e devantagens inversas do método GET.

(8)

Controles

z A tag <INPUT> inidica um controle em uma página.

– Os diversos tipos de controle são definidos de acordo

com o valor do atributo type.

– O nome de controle é identificado pelo atributo name.

– O nome é utilizado para identificar o conteúdo do

controle quando enviado para o servidor.

– O nome de um controle dever ser único dentre os

controles de um formulário(HTML permite nomes iguais!!!)

– O contéudo de controles sem nome não é enviado para

(9)

Método GET

<html>

<head><title>Metodo Post</title></head> <body>

Texto

</form> </body> </html>

(10)

Método

(11)

Método Post

<form action=“teste.html” method=post>

Texto

(12)

Linhas de Edição

z O atributo type indica o tipo da linha de edição.

– Linha de edição simples(text)

– Linha de edição de senha(password)

– Cuidado ao usar senhas com o método get!!!

z O atributo size indica o tamanho da linha de edição.

(13)

Linhas de Edição

<html>

<head><title>Metodo Post</title></head> <html>

<form action=“login.asp” method=post> Login

Senha

</form> </body> </html>

(14)

Botões

z

Atributo type igual a submit

– O atributo value indica o título do botão. – Em algumas situações, precisamos utilizar

espaços em branco no nome para alterar o tamanho do botão.

– Se o usuário clica no botão, o navegador

(15)

Login

(16)

Caixas de Marcação

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 não é marcado, o cliente

omite(não envia) seu nome e valor como parâmetros para o servidor.

(17)

Caixas de Marcação

<form action=“teste.asp” method=get>

(18)

Radio Buttons

z Atributo type igual Radio

– Um formulário tem diversos radio-buttons como o

mesmo nome.

– Os radio-buttons de mesmo nome formam um grupo

onde no máximo 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

(19)

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

(20)

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 posição da imagem é enviada para o servidor

nos parâmentros x e y acompanhados do nome da imagem e de um ponto.

– Se o usuário clica na imagem, o navegador

(21)

Imagens

<form action=“teste.html” method=get>

(22)

Controles Invisíveis

z Atributo type igual a Hidden

– Controles invisíveis são utilizados para tranferir dados

entre duas ou mais páginas HTML que devem passar pelo cliente.

– O servidor captura a informação da primeira página e

cria um controle invisível na segunda com esta informação.

– No retorno da segunda página, o servidor recupera o

estado(informação) da primeira através do controle invisível.

– O atributo value contém a informação do controle

(23)

Combo e

Listas

z

Controle definido pela <SELECT>

– O controle possui um nome, indicado pelo

atributo name.

– O controle possui diversas opções.

– O atributo size indica o número de opções

apresentadas ao mesmo tempo na página.

– Se size for maior que 1, o controle será

(24)

Combo

e Listas

z

Opções de listas

– Cada opção é 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 formulário.

(25)

Combo

e Listas

<option value=“1” >Opção 1</option> <option value=“2” >Opção 2</option> <option value=“3” >Opção 3</option> <option value=“4” >Opção 4</option>

</select>

(26)