Your SlideShare is downloading. ×
Aula 03  - Layout e Integração de formulário com HTML e PHP
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

Aula 03 - Layout e Integração de formulário com HTML e PHP

6,178
views

Published on

Published in: Education

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
6,178
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
122
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Programação Web Fatec Ipiranga Análise e Desenvolvimento de Sistemas Aula 03 – Layout e Integrando formulários em HTML e PHP Dalton Martins dmartins@gmail.comSão Paulo, Setembro, 2011
  • 2. Formulários HTML● É a maneira que iremos utilizar de passar dados para o servidor;● Um formulário pode conter vários tipos de elementos: ● Campo de texto; ● Caixas de opções; ● Botões de opções; ● Lista de múltipla escolha; ● Botões de ações; ● entre outros....
  • 3. Campos de textoCampo de texto comum<form>Nome: <input type="text" name="nome" /><br />Sobrenome: <input type="text" name="sobrenome" /></form>Campo de texto tipo senha<form>Senha: <input type="password" name="senha" /></form>
  • 4. Campos de escolha Formato Radio – apenas uma opção por escolha <form> <input type="radio" name="sexo" value="masculino" /> Masculino<br /> <input type="radio" name="sexo" value="feminino" /> Feminino </form> Formato Checkbox – uma ou mais opções por escolha<form><input type="checkbox" name="veiculo" value="Bicicleta" /> Eu tenho uma bicicleta<br /><input type="checkbox" name="veiculo" value="Carro" /> Eu tenho um carro</form>
  • 5. Lista Formato Select<form action=""><select name="Carros"><option value="volvo">Volvo</option><option value="saab">Saab</option><option value="fiat">Fiat</option><option value="audi">Audi</option></select></form> Formato Select com valor pré-definido <form action=""> <select name="Carros"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="fiat" selected="selected">Fiat</option> <option value="audi">Audi</option> </select> </form>
  • 6. Área de Texto e MolduraÁrea de Texto<textarea rows="10" cols="30"> Programar HTML é mais simples do que parece!</textarea>Moldura para o formulário <form action=""> <fieldset> <legend>Informações pessoais:</legend> Nome: <input type="text" name="nome" size="30" /><br /> email: <input type="text" name="email" size="30" /><br /> Data de nascimento: <input name="data" type="text" size="10" /> </fieldset> </form>
  • 7. Botões Tipo button Tipo submit <form action=""><form action=""> <input type="submit" value="Enviar"><input type="button" value="Olá!"> </form></form> Determinando ação no formulário<form name="input" action="html_form_action.php" method="get">Nome: <input type="text" name="nome" value="Dalton" /><br />Sobrenome: <input type="text" name="sobrenome" value="Martins" /><br /><input type="submit" value="Submit" /></form>
  • 8. Integrando com PHP: primeiros passos<?php // Se o botão enviar for pressionado! if (isset($_POST[enviar])) { echo "Ola ".$_POST[nome]."!<br />"; echo "O endereco ".$_POST[email]." vai agora receber muitos spans!!<br />"; }?><form action="exemplosimples.php" method="post"> <p> Nome:<br /> <input type="text" name="nome" size="20" maxlength="40" value="" /> </p> <p> Email:<br /> <input type="text" name="email" size="20" maxlength="40" value="" /></p> <input type="submit" name = "enviar" value="Enviar" /></form> Observação: O nome do arquivo deve ser exemplosimples.php
  • 9. Trabalhando com caixas de escolha<?php // Se o botão enviar for pressionado! if (isset($_POST[enviar])) { echo "Sexo:".$_POST[sexo]."<br />"; }?><form action="exemplosimples.php" method="post"><input type="radio" name="sexo" value="masculino" /> Masculino<br /><input type="radio" name="sexo" value="feminino" /> Feminino <br /> <input type="submit" name = "enviar" value="Enviar" /></form>
  • 10. Trabalhando com múltipla escolha<?php if (isset($_POST[enviar])) { echo "Voce gosta das seguintes linguagens:<br />"; foreach($_POST[linguagens] AS $linguagem) { echo "$linguagem<br />"; } }?><form action="multiplaescolha.php" method="post"> Qual e sua linguagem de programacao favorita?<br /> (selecione todas que seaplicam):<br /> <input type="checkbox" name="linguagens[]" value="csharp" />C#<br /> <input type="checkbox" name="linguagens[]" value="jscript" />JavaScript<br /> <input type="checkbox" name="linguagens[]" value="perl" />Perl<br /> <input type="checkbox" name="linguagens[]" value="php" />PHP<br /> <input type="submit" name="enviar" value="Enviar" /></form>
  • 11. Trabalhando com listas<?php // Se o botão submit for pressionado! if (isset($_POST[enviar])) { echo "Carro escolhido:".$_POST[Carros]."<br />"; }?><form action="exemplosimples.php" method="post"><select name="Carros"><option value="volvo">Volvo</option><option value="saab">Saab</option><option value="fiat">Fiat</option><option value="audi">Audi</option></select> <input type="submit" name = "enviar" value="Enviar" /></form>
  • 12. Trabalhando com áreas de texto<?php // Se o botão submit for pressionado! if (isset($_POST[enviar])) { echo "Texto digitado:".$_POST[areatexto]."<br />"; }?><form action="exemplosimples.php" method="post"><textarea rows="10" cols="30" name="areatexto"> Programar HTML é mais simples doque parece! </textarea> <input type="submit" name = "enviar" value="Enviar" /></form>
  • 13. Layout● Há várias formas de se trabalhar com layout em HTML, mas basicamente se resumem a usarmos: ● Tabelas; ● Agrupamentos DIV.● Iremos trabalhar com agrupamentos DIV, pois oferecem mais opções de configuração, sendo mais flexíveis. Além disso, irão integrar mais facilmente com CSS em etapas futuras do curso...
  • 14. Exemplo I
  • 15. Exemplo I<html><body><div id="layout" style="width:500px"><div id="cabecalho" style="background-color:#FFA500;"><h1 style="margin-bottom:0;">Titulo principal</h1></div><div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;"><b>Menu</b><br />HTML<br />CSS<br />JavaScript</div><div id="conteudo" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">Conteudo vai aqui!</div><div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">Copyleft FATEC Ipiranga</div></div></body></html>
  • 16. Exemplo II
  • 17. Exemplo II<div id="conteudo" style="background-color:#EEEEEE;height:400px;width:400px;float:left;"><form action="layout.php" method="post"><fieldset><br><legend>Informacoes pessoais:</legend>Nome: <input type="text" name="nome" size="30" /><br />email: <input type="text" name="email" size="30" /><br />Data de nascimento: <input name="data" type="text" size="10" /><br><textarea rows="10" cols="30" name="areatexto"> Informacoes extras: </textarea> <br><input type="submit" name = "enviar" value="Enviar" /></fieldset></form><?php // Se o botão submit for pressionado! if (isset($_POST[enviar])) { echo "Formulario de ".$_POST[nome]." recebido!!!"."<br />"; }?></div>
  • 18. Exercício● Monte um site com baseado no layout anteriormente apresentado;● O site deve conter um menu com direcionamento para 3 páginas que serão diferentes formulários para: ● Cadastrar o cliente de uma loja; ● Cadastrar um pedido de compra; ● Cadastrar uma ocorrência de suporte técnico.● O site deve ter uma página principal sem formulário, com apenas conteúdo texto na área principal;● Ao final de cada envio do formulário, o site deve informar que o mesmo foi recebido;● Você deve colocar um link “home” no menu lateral.