HTML: Formulários Programação de Servidores Marx Gomes Van der Linden ( Material baseado no original de Marcelo José Siqueira Coutinho de Almeida )
Exemplo 2
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
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
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
Criando um Formulário <FORM ACTION= http://www.site.com/ 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
Á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
<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
Elementos de Entradas Text Password Radio Checkbox Submit Reset 10
Text > <INPUT TYPE= text NAME= nome Opcionalmente, digite VALUE= valor inicial Opcionalmente, digite SIZE=n Opcionalmente, digite MAXLENGTH 11
<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
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
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
<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
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
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
<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
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
Select <SELECT NAME= nome Opcionalmente, SIZE=n Opcionalmente, MULTIPLE > <OPTION VALUE= valor > nome da opção para cada opção. </SELECT> 24
<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
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
<INPUT TYPE="SUBMIT" NAME="nome" VALUE="rótulo"> 28
Reset Limpa o Formulario Cada campo volta ao seu valor default <INPUT TYPE=RESET NAME=name VALUE= rótulo > 29
30