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

Tamanho: px

Começar a partir da página:

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

Vergílio Lisboa Guterres
7 Há anos
Visualizações:

1 Formulários

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

3 Formulários HTML 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 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 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 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 é idicado no formulário(atributo method).

7 Métodos de Envio de Parâmetros 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. 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 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 o servidor.

9 Método 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>

10 Método Get

11 Método Post <form action= teste.html method=post> Texto <input type=text name=texto> <input type=submit value= Envia > </form>

12 Linhas de Edição 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!!! O atributo size indica o tamanho da linha de edição. O atributo value indica o conteúdo inicial da linha.

13 Linhas de Edição <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>

14 Botões 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 submete o formúlário ao servidor.

15 Login/Password

16 Caixas de Marcação 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> <input type = checkbox name= marcado value= MRC > <input type=submit value= OK > </form>

18 Radio Buttons 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, indicadonoatributovalue. Valor do radio-button é enviado para o servidor se o controle estiver selecionado.

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 <input type = radio name= marcado value= 2 >Tipo 2 <input type = radio name= marcado value= 3 >Tipo 3 <input type=submit value= OK > </form>

20 Imagens 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 submete o formulário para o servidor.

21 Imagens <form action= teste.html method=get> <input type = image name= peixe src= Peixe.jpg > </form>

22 Controles Invisíveis 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 invisível.

23 Combo e Listas 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á apresentado como uma lista de opções.

24 Combo e Listas 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 <form action= teste.html method=get> <select name= combo > <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> <input type= submit value= ok > </form>

Documentos relacionados

Desenvolvimento Web TCC Turma A-1

Desenvolvimento Web TCC Turma A-1 Desenvolvimento Web TCC-00.226 Turma A-1 Conteúdo Projeto de Interface com o Usuário em HTML Professor Leandro Augusto Frata Fernandes laffernandes@ic.uff.br Material disponível em http://www.ic.uff.br/~laffernandes/teaching/2013.2/tcc-00.226