5 Formulario DW1

Desenvolvimento de Sistemas Web Servidor Web e Formul arios
Eduardo Gondo
profeduardo@ap.com.br
Agenda
Servidor WEB Formul arios Caixas de texto Sele c ao u nica (radio) e m ultiploa (checkbox) Caixas de sele c ao Textarea File Bot oes
Eduardo Gondo (profeduardo@ap.com.br) Desenvolvimento de Sistemas Web Servidor Web e Formul 1 deamar riosco de 2014
2 / 39
Servidor Web
antes de estudarmos os formul arios HTML, vamos gastar um tempo aprendendo como um sistema Web funciona j a comentamos que para disponibilizar um site precisamos de um servidor Web (Web Server), um servidor Web e um programa que responde ` as requisi c oes das p aginas feitas pelo navegador (refox, chrome, ie, etc) s ao exemplos de servidor Web o Apache e o Internet Information Server (IIS) tanto o apache quanto o IIS devem rodar em um computador vis vel na internet e, de prefer encia, com a porta 80 dispon vel normalmente esses dois servidores armazenam p aginas est aticas, ou seja, sem interatividade com o usu ario veja no pr oximo eslaide uma gura representando um servidor Web
Eduardo Gondo (profeduardo@ap.com.br) Desenvolvimento de Sistemas Web Servidor Web e Formul 1 deamar riosco de 2014 3 / 39
Servidor Web - Esquema
Figura : Esquema de servidor Web (Web Server)
4 / 39
Servidor de aplica c ao Web
j a para executar um aplica c ao na internet precisamos de um servidor de aplica c ao um servidor de aplica c ao fornece servi cos de infra-estrutura b asicos para nossa aplica c ao WEB: disponibilidade, seguran ca, controle de sess ao, cache, etc. conseguimos executar a c oes no servidor de aplica c ao atrav es de 2 elementos HTML: links e formul arios a seguir, estudaremos o formul ario HTML e os elementos que o comp oe
5 / 39
Formul arios
formul ario e um componente de uma p agina Web que permitem a intera c ao do usu ario a intera c ao e feita atrav es dos seguintes elementos: caixa de texto, bot oes, caixa de sele c ao, listas de escolha, etc atrav es de um formul ario HTML o usu ario consegue passar informa c oes para o servidor de aplica c ao Web denimos um formul ario atrav es da tag <form>, veja abaixo um exemplo de uso da tag com algumas propriedades:
1 2 3
< form method = " get " action = " processa " > <! -- conte u do do formul a rio -- > </ form >
6 / 39
Formul arios
1 2 3
< form method = " get " action = " processa " > <! -- conte u do do formul a rio -- > </ form >
vamos identicar as propriedades da tag <form> a propriedade method dene como os dados do formul ario ser ao enviados para um servidor cujos valores poss veis s ao: get e post via get as informa c oes do formul ario s ao enviados atrav es da URL via post as informa c oes s ao enviadas atrav es do protocolo http, ou seja, n ao s ao vis veis para o cliente a propriedade action indica o programa, que est a no servidor de aplica c ao, que ser a executado na hora de submeter o formul ario no fragmento de html acima temos na linha 02 um coment ario html
7 / 39
Componentes de formul ario
dentro da tag <form> denimos os componentes do formul ario as principais tags que s ao utilizadas dentro do formul ario s ao: <input>, <select> e <textarea> essas tags s ao as respons aveis pela caixas de di alogo que servir ao para o usu ario colocar a informa c ao usaremos problemas pr aticos para exemplicar o uso dessas tags
8 / 39
P agina de autentica c ao
Exemplo 1 Muitas aplica c oes Web requerem autentica c ao de usu arios. Sua tarefa e construir uma p agina HTML contendo os elementos de para fazer a autentica c ao do usu ario.
Figura : Tela de login
9 / 39
Segue o c odigo fonte HTML da p agina:
1 2 3 4 5 6 7 8 9 10 11 12 13 14
<! DOCTYPE html > < html > < head > < meta charset = " UTF-8 " / > </ head > < body > < form action = " autentica " method = " post " > <p > < label > login: < input type = " text " name = " login " / > </ label > < /p> <p > < label > senha: < input type = " password " name = " senha " / > </ label > </ p > <p > < input type = " submit " value = " ok " / > < input type = " reset " value = " limpar " / > </ p > </ form > </ body > </ html >
Eduardo Gondo (profeduardo@ap.com.br) Desenvolvimento de Sistemas Web Servidor Web e Formul 1 de mar arios co de 2014
10 / 39
Considera co es
quatro elementos distintos de formul ario: dois componentes de entrada de dados e dois bot oes na linha 6 temos a caixa de texto (type="text") juntamente com seu r otulo (label) o atributo name dene o nome da caixa de texto na linha 7 temos a caixa de senha (type="password") a diferen ca entre uma e outra est a na exibi c ao das informa c oes, enquanto o conte udo da caixa de texto e vis vel por todos na caixa de senha apenas aparece ******** na linha 9 temos o bot ao de submit que e respons avel por enviar as informa c oes para o servidor e na linha 10 temos o bot ao reset que restaura ao valor original os valores de todos os campos do formul ario
Eduardo Gondo (profeduardo@ap.com.br) Desenvolvimento de Sistemas Web Servidor Web e Formul 1 de mar arios co de 2014 11 / 39
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17
< form action = " autentica " method = " post " > < fieldset > < legend > Autentica </ legend > <p > < label for = " cxLog " > login: </ label > < input type = " text " name = " login " id = " cxLog " / > </ p > <p > < label for = " cxPas " > senha: </ label > < input type = " password " name = " senha " id = " cxPas " / > </ p > <p > < input type = " submit " value = " ok " / > < input type = " reset " value = " limpar " / > </ p > </ fieldset > </ form >
12 / 39
Outras considera c oes

no c odigo anterior exibimos apenas o formul ario note que todos os elementos do formul ario devem estar dentro entre <form> e </form> o label de um campo do formul ario pode ser denido de duas formas: como na linha 6 da primeira p agina de autentica c ao e como foi escrito na linha 5 do formul ario anterior note que a liga c ao do r otulo e do elemento do formul ario e feita pelos atributos for da tag <label> e do atributo id da tag <input> o valor do atributo id deve ser u nico na p agina HTML temos tamb em o <fieldset> que funciona como uma molduraem torno dos elementos que est ao dentro do eldset e o <legend> que permite colocarmos uma descri c ao do eldset
Exerc cio
1) Crie uma p agina HTML que cont em um formul ario para requisi c ao de carteira de estudante. Nesse formul ario dever a constar: nome completo, institui c ao de ensino, curso, c odigo do estudante (rm) e endere co (logradouro, n umero, complemento, cep, cidade e UF). Se quiser, acrescente mais dados que voc e julgar necess ario. N ao se esque ca de colocar os bot oes de submit e reset. poss 2) E vel denir o tamanho da caixa de texto atrav es do atributo size. Veja um exemplo:
1
< input type = " text " name = " preco " size = " 12 " / >
no formul ario do exerc cio 1 coloque o atributo size onde voc e achar necess ario.
14 / 39
Exerc cio
3) Algumas caixas de texto do formul ario j a aparecem com valor preenchido. Isso e poss vel atrav es do atributo value da tag <input>. Veja um exemplo:
1
< input type = " text " name = " uf " value = " SP " / >
No formul ario do exerc cio 1, altere as caixas de texto institui c ao de ensino e curso para aparecerem com os valores FIAP e TDS respectivamente.
15 / 39
Sele c ao u nica bot oes radio

Exemplo 2 Crie uma p agina HTML contendo um formul ario onde o aluno dever a marcar o curso que ele est a matriculado. Os cursos dever ao ser representado em bot oes de radio. Segue abaixo uma imagem indicando a p agina que dever a ser feita.
Figura : Tela de matr cula
16 / 39
P agina de matr cula
Figura : C odigo fonte da matr cula

Considera co es
os bot oes de radio permitem a sele c ao de um u nico item o v nculo entre eles e feito atrav es do atributo name, isto e, bot oes de radio com o mesmo valor de name representam a mesma categoria da informa c ao dentro de uma mesmo form podemos ter v arios grupos de bot oes de radio, apenas devemos tomar cuidado para que o agrupamento seja feito de forma correta envolver o bot ao de radio juntamente com o seu label garante a acessibilidade do componente, ou seja, voc e n ao precisa clicar exatamente no c rculo, clicar no r otulo garante a sele c ao do item a informa c ao que chegar a no servidor, ser a do valor da propriedade value do item marcado
18 / 39
Exerc cio
4) No exemplo anterior crie mais um conjunto de bot oes de radio indicando a turma onde voc e est a matriculado. Use as letras A, B , R, S, T e U. 5) Crie uma p agina WEB contendo um formul ario para cadastro de pessoa. Os dados que dever ao constar no formul ario s ao: nome, email, cpf, g enero (masculino ou feminino) e data de nascimento. 6) Para deixar um bot ao de radio previamente marcado e necess ario colocar o atributo checked="checked". Modique o exerc cio 1 para deixar marcado o curso de TDS e sua turma.
19 / 39
Sele c ao m ultipla checkbox

Exemplo 3: A FIAP elaborou uma enquete para saber quais os meios de condu c ao que o aluno utiliza para chegar ` a FIAP e voltar para casa. Veja abaixo uma gura representando o formul ario:
20 / 39

E agora, o c odigo fonte do formul ario que gerou a imagem anterior:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
< form method = " post " action = " enquete " > < fieldset > < label > RM < input type = " text " name = " rm " / > </ label > </ fieldset > < fieldset > < legend > meios de transporte </ legend > < label > < input type = " checkbox " name = " trans " value = " metro " / > metr^ o </ label > < label > < input type = " checkbox " name = " trans " value = " onibus " / > ^ o nibus </ label > < label > < input type = " checkbox " name = " trans " value = " busfiap " / > ^ o nibus FIAP </ label > < label > < input type = " checkbox " name = " trans " value = " bike " / > bicicleta </ label > < label > < input type = " checkbox " name = " trans " value = " pe " / > a p e </ label > < label > < input type = " checkbox " name = " trans " value = " outros " / > outros </ label > </ fieldset > <p > < input type = " submit " value = " responder " / > </ p > </ form >
21 / 39
um mesmo conjunto de checkbox s ao determinados atrav es de um mesmo valor do atributo name no caso do exemplo, podemos marcar diversos meios de transporte quando o formul ario e submetido ao servidor, e enviado todos os meios de transporte selecionados o servidor receber a o valor dos atributos value note que o r otulo (label) do checkbox n ao necessariamente precisa ser igual ao valor do atributo value
22 / 39
Par ametro escondido hidden

permite a passagem de informa c oes que n ao s ao exibidos pelo navegador muito utilizada quando n ao havia a gura do servidor de aplica c ao onde n ao se podia manter dados entre as p aginas (CGI) algumas vezes usamos mais de um formul ario para representar uma funcionalidade e podemos usar o par ametro hidden para passar informa c oes entre eles veja um exemplo de utiliza c ao:
1
< input type = " hidden " name = " rm " value = " rm68301 " / >
todas as propriedades acima s ao obrigat orias e n ao h a nenhuma propriedade opcional
23 / 39
Caixa de sele c ao select

sele c ao u nica ou m ultipla de itens exemplo:
1 2 3 4 5 6 7 8
<p > < label for = " color " > cor: </ label > < select name = " cor " id = " color " > < option value = " 1 " > Branca </ option > < option value = " 2 " > Preta </ option > < option value = " 3 " > Azul </ option > < option value = " 4 " > Verde </ option > </ select > </ p >
no exemplo acima temos uma caixa de sele c ao que permite a sele c ao de um u nico item na tag select denimos a propriedade name e, para cada item de sele c ao (<option>) denimos a propriedade value e o r otulo que e denido na tag option (entre a abertura e o fechamento)
Caixa de sele c ao select
Figura : exemplo de select
para uma sele c ao de v arios itens e necess ario colocar o seguinte texto multiple="multiple" como propriedade da tag select tamb em temos a propriedade size que dene a quantidade de itens exibidos na caixa de sele c ao na tag <option> podemos denir a propriedade selected="selected" que indica ao navegador que aquele item deve ser selecionado
Exemplo de select multiple
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
< form action = " processa " method = " get " > < label > Tecnologia WEB Server-Side < select name = " " multiple = " multiple " > < option value = " asp " > ASP </ option > < option value = " php " > PHP </ option > < option value = " jsp " selected = " selected " > JSP </ option > < option value = " jsf " selected = " selected " > JSF </ option > < option value = " ruby " > Ruby </ option > < option value = " spring " > Spring </ option > < option value = " struts " > Struts </ option > </ select > </ label > <p > < input type = " submit " value = " enviar " / > </ p > </ form >
26 / 39
Exemplo de select multiple

Veja agora a imagem do c odigo anterior:
Figura : exemplo de select m ultiplo
27 / 39
textarea
para informar uma grande quantidade de texto, usamos o comando textarea
1 2 3
< label for = " t1 " > texto </ label > < textarea name = " texto " rows = " 15 " cols = " 20 " id = " t1 " > </ textarea >
de acordo com o exemplo acima, nossa textarea possui 15 linhas e 20 colunas (tamanho da textarea) e e acessada atrav es do nome texto para colocar um texto pr e denido na textarea e feito da seguinte forma:
1 2 3 4 5 6
< textarea name = " definicao " > XML e uma tecnologia criada para armazenar e compartilhar informa c~ a o entre os mais diversos tipos de sistema . Ao contr a rio da HTML que foi criada para exibir dados . </ textarea >
28 / 39
envio de arquivo
O comando
1
foto: < input type = " file " name = " arquivo " / >
e utilizado quando o sistema pede que o usu ario envie um arquivo Veja abaixo uma imagem gerada pelo navegador:
Figura : exemplo de componente para enviar arquivo
Ao clicar no bot ao selecionar arquivo abre-se uma caixa de di alogo onde e poss vel escolher um arquivo para ser enviado ao servidor
29 / 39
Bot oes do tipo button, submit e reset

para executar uma a c ao sobre o formul ario temos tr es tipos de elementos: button <input type="button" value="clique" /> submit <input type="submit" value="enviar" /> reset <input type="reset" value="limpar" /> todos os tr es elementos exibem bot oes no navegador o submit e um bot ao respons avel por submeter os dados do formul ario para o servidor de aplica c ao o reset, quando clicado, volta os campos de formul ario para os valores padr oes, na maior parte das situa c oes, ele limpa o formul ario apenas o button n ao possui uma a c ao previamente denida, ou seja, necessitamos associar ao bot ao um c odigo JavaScript
Submit com imagem
a funcionalidade de submeter dados de um formul ario para um servidor de aplica c ao tamb em pode ser feita atrav es de uma imagem para esta situa c ao usamos o seguinte comando
1
< input type = " image " src = " enviar . png " alt = " enviar " / >
esta tag possui algumas propriedades em comum da tag img com a funcionalidade do submit um cuidado que se deve ter ao usar este comando e que a imagem deve passar a sensa c ao de que devemos clic a-la para submeter o formul ario
31 / 39
Exemplo: Cadastro de Pessoa F sica

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21
22 Eduardo Gondo (profeduardo@ap.com.br) Desenvolvimento de Sistemas Web Servidor Web e Formul 1 de mar arios co de 2014
< form method = " post " action = " cadastra " id = " formCadastra " > <p > < label > nome: < input type = " text " name = " nome " size = " 30 " / > </ label > </ p > <p > < label > cpf: < input type = " text " name = " cpf " size = " 11 " / > </ label > </ p > < fieldset > < legend > sexo </ legend > < label > < input type = " radio " name = " sexo " value = " H " / > homem </ label > < br / > < label > < input type = " radio " name = " sexo " value = " M " / > mulher </ label > </ fieldset > <p > < label > escolaridade < select name = " escolaridade " > < option value = " " > </ option > < option value = " 1 " > ensino m e dio </ option > < option value = " 2 " > superior </ option > </ select > </ label > </ p > <p > < input type = " submit " value = " cadastra " / > < input type = " reset " value = " sair " / > </ p > </ form >
32 / 39
Exemplo da Tela de cadastro
Figura : exemplo de tela de cadastro
33 / 39
Exerc cios
1) Ficou muito comum postar coment arios sobre not cias na internet. Crie um formul ario contendo os seguintes campos: nome (text), email (text) e coment ario (textarea). N ao se esque ca dos bot oes de submit e reset. 2) Crie um formul ario Web onde e poss vel cadastrar o placar de uma partida de futebol. Para os times da casa e visitante, coloque uma caixa de sele c ao (select) e para o placar crie duas caixas de texto ao lado dos nomes dos times. Acrescente tamb em uma caixa de texto para informar a data em que ocorreu a partida. 3) Construa um formul ario Web para inserir as notas semestrais de um aluno. No formul ario dever a ser poss vel informar o RM do aluno, a m edia de NAC, o AM e a nota da PS. Coloque uma caixa de texto que armazenar a a m edia semestral, um bot ao (button) que calcular a a m edia semestral e outro bot ao (submit) para gravar as notas.
Exerc cios
4) Aproveitando o formul ario de cadastro de Pessoa F sica anterior, acrescente componentes de formul ario para inclus ao de endere co: tipo logradouro, logradouro, n umero, cep, complemento, bairro, cidade e UF. 5) Sua empresa foi contratada para desenvolver um sistema para uma ocina mec anica. Voc e foi escolhido pelo seu chefe para fazer a funcionalidade de inclus ao de ve culos que dever a consistir em: placa, montadora, modelo, combust vel (bot ao de radio), ano modelo, ano fabrica c ao, telefone e nome do propriet ario. Faz parte da sua tarefa selecionar os componentes de formul ario para cada uma das informa c oes, com exce c ao do campo combust vel.
35 / 39
Exerc cios
6) Seu chefe cou muito feliz com seu trabalho anterior e pediu para voc e fazer um formul ario de consulta de ve culos. A consulta de ve culos poder a ser feita de acordo com os seguintes campos: placa, montadora, modelo e propriet ario. Nessa p agina, coloque exatamente a seguinte instru c ao para denir o formul ario:
1 2 3
< form action = " listaVeiculos . html " method = " get " > <! -- seus componentes vem aqui -- > </ form >
N ao se esque ca do bot ao de submit. 7) Crie a p agina listaVeiculos.html contendo exatamente o formul ario anterior mais uma tabela com 5 linhas contendo as seguintes informa c oes dos ve culos: placa, modelo, ano modelo/fabrica c ao, telefone e nome do propriet ario.
36 / 39
Exerc cios
8) Ainda na p agina de listaVeiculos.html acrescente mais uma coluna na tabela. Essa nova coluna ser a chamada de a co es, dentro dela coloque duas palavras: detalhes e altera. Agora, acrescente um link em detalhes que apontar a para a p agina detalhaVeiculo.html e outro link em altera que apontar a para a p agina alteraVeiculo.html. 9) Na p agina detalhaVeiculo.html apresente todas as informa c oes cadastrais do ve culo mais uma tabela representando as u ltimas 4 ordens de servi co. Nessa tabela dever a constar o n umero da ordem de servi co, a data que foi liberado o carro, o(s) mec anico(s) respons avel(eis), o valor total dos reparos e uma coluna de a c ao onde ser a colocado um link onde e poss vel detalhar a ordem de servi co.
37 / 39
Exerc cios
10) Na p agina alteraVeiculo.html apresente exatamente o formul ario do exerc cio 5 colocando alguns valores nos componentes de formul ario. Note que o objetivo e simular o funcionamento de um sistema, n ao precisa mostrar exatamente as informa c oes dos ve culos cujo link foi clicado. 11) Troque os texto dos links por imagens. Procure por imagens que v ao representar o detalhamento e a altera c ao do ve culo. Dica, procure no google.
38 / 39
Copyleft
Copyleft 2014 Prof. Eduardo Gondo Todos direitos liberados. Reprodu c ao ou divulga c ao total ou parcial deste documento e liberada.
39 / 39

5 Formulario DW1

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

5 Formulario DW1

Transféré par

Droits d'auteur :

Formats disponibles

Desenvolvimento de Sistemas Web Servidor Web e Formul arios

Servidor Web - Esquema

Figura : Esquema de servidor Web (Web Server)

Servidor de aplica c ao Web

Componentes de formul ario

Figura : Tela de login

Outras considera c oes

Sele c ao u nica bot oes radio

Figura : Tela de matr cula

P agina de matr cula

Figura : C odigo fonte da matr cula

Sele c ao m ultipla checkbox

Sele c ao m ultipla checkbox

Sele c ao m ultipla checkbox

Par ametro escondido hidden

todas as propriedades acima s ao obrigat orias e n ao h a nenhuma propriedade opcional

Caixa de sele c ao select

Caixa de sele c ao select

Figura : exemplo de select

Exemplo de select multiple

Exemplo de select multiple

Figura : exemplo de select m ultiplo

Figura : exemplo de componente para enviar arquivo

Bot oes do tipo button, submit e reset

Submit com imagem

Exemplo: Cadastro de Pessoa F sica

Exemplo da Tela de cadastro

Figura : exemplo de tela de cadastro

Vous aimerez peut-être aussi