HTML: Formulários Programação de Servidores

Transcrição

1 HTML: Formulários Programação de Servidores Marx Gomes Van der Linden ( Material baseado no original de Marcelo José Siqueira Coutinho de Almeida )

2 Exemplo 2

3 Criando um Formulário Um formulário é composto basicamente por três partes principais: A definição do formulário Os elementos do formulário O botão que aciona o envio do formulário 3

4 Criando um Formulário Os tags <FORM> e </FORM> definem o início e o fim do formulário <FORM> pode ter dois atributos: ACTION: define onde a ação ocorrerá, ou seja, quem irá processar o formulário. METHOD: define como o formulário será enviado. Pode ser de duas maneiras: GET e POST.. 4

5 Criando um Formulário Um formulário pode ter um nome NAME= nome do formulário Dentro do formulário coloca-se os campos Cada campo também deve ter um nome. 5

6 Criando um Formulário <FORM ACTION= scripts/insere.php METHOD= POST > GET é o método default. POST permite enviar mais dados e estes não aparecem na janela de endereços do Browser. 6

7 Área de Texto <TEXTAREA NAME= nome do campo Opcionalmente pode-se definir o número de linhas e de colunas da área de texto: ROWS=n e COLS=n > Caso necessário, digite um texto que sempre aparecerá na área de texto ao ser carregada. Esse texto não será formatado. </TEXTAREA> 7

8 <FORM NAME= MEUFORM ACTION=..\scripts\teste.php METHOD= POST > <STRONG> Digite sua mensagem: </STRONG> <BR> <TEXTAREA NAME= area1 ROWS=10 COLS=20> Nessa área aparecerá um texto default se for colocado um... </TEXTAREA> </FORM> 8

9 9

10 Elementos de Entradas Text Password Radio Checkbox Submit Reset 10

11 Text > <INPUT TYPE= text NAME= nome Opcionalmente, digite VALUE= valor inicial Opcionalmente, digite SIZE=n Opcionalmente, digite MAXLENGTH 11

12 <FORM NAME= MEUFORM METHOD= POST > <B> Login: </B> <BR> <INPUT TYPE="text" NAME= nome SIZE=15 MAXLENGTH=20> <P> <B> Senha: </B> <BR> <INPUT TYPE="text" NAME= nome SIZE=15 MAXLENGTH=20> </FORM> 12

13 13

14 Password Troca-se apenas o text por password A sintaxe empregada é a mesma Apenas esconde o texto sendo digitado <INPUT TYPE= password NAME= nome SIZE=15 MAXLENGTH=20> 14

15 15

16 Radio Permite que opções sejam apresentadas ao usuário através de botões Apenas um será selecionado por vez Comportamento ou exclusivo 16

17 <INPUT TYPE= radio NAME= conjunto VALUE= 1 > Brasil <INPUT TYPE= radio NAME= conjunto VALUE= 2 > EUA <INPUT TYPE= radio NAME= conjunto VALUE= 3 > Inglaterra <INPUT TYPE= radio NAME= conjunto VALUE= 4 > Rússia 17

18 18

19 Radio Se quiser que um valor apareça inicialmente escolhido deve-se defini-lo como CHEKED Se o atributo value não for configurado a palavra on será enviada por script. <INPUT TYPE= radio NAME= conjunto VALUE= 4 CHECKED> Rússia 19

20 Checkbox Também permite que opções sejam apresentadas ao usuário através de botões Mais de uma opçaõ pode ser selecionado por vez Comportamento E 20

21 <INPUT TYPE= checkbox NAME= conjunto VALUE= 1 > Brasil <INPUT TYPE= checkbox NAME= conjunto VALUE= 2 > EUA <INPUT TYPE= checkbox NAME= conjunto VALUE= 3 > Inglaterra <INPUT TYPE= checkbox NAME= conjunto VALUE= 4 > Rússia 21

22 22

23 Select A tag select pode ser usada para se construir um menu pop-up: Ou uma lista de opções expandida: (especificando a opção size > 1) 23

24 Select <SELECT NAME= nome Opcionalmente, SIZE=n Opcionalmente, MULTIPLE > <OPTION VALUE= valor > nome da opção para cada opção. </SELECT> 24

25 <SELECT NAME="sel1" MULTIPLE> <OPTION NAME="A"> ANA </OPTION> <OPTION NAME="B"> BETA </OPTION> <OPTION NAME="C"> CARLOTA </OPTION> <OPTION NAME="D"> DENISE </OPTION> <OPTION NAME="E SELECTED> ELBA </SELECT> 25

26 26

27 Submit É o meio pelo qual o formulário é enviado ao servidor. Aciona o browser para que ele colete os dados, construa os pacotes HTTP e os envie através uma conexão TCP. 27

28 <INPUT TYPE="SUBMIT" NAME="nome" VALUE="rótulo"> 28

29 Reset Limpa o Formulario Cada campo volta ao seu valor default <INPUT TYPE=RESET NAME=name VALUE= rótulo > 29

30 30