Programação Web

Fatec IpirangaAnálise e Desenvolvimento de Sistemas

Aula 03 – Layout e Integrando formulários em HTML e PHP

Dalton Martinsdmartins@gmail.com

São Paulo, Setembro, 2011

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....

Campos de texto

<form>Nome: <input type="text" name="nome" /><br />Sobrenome: <input type="text" name="sobrenome" /></form>

<form>Senha: <input type="password" name="senha" /></form>

Campo de texto tipo senha

Campo de texto comum

Campos de escolha

<form><input type="radio" name="sexo" value="masculino" /> Masculino<br /><input type="radio" name="sexo" value="feminino" /> Feminino</form>

Formato Radio – apenas uma opção 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>

Formato Checkbox – uma ou mais opções por escolha

Lista

<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

<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>

Formato Select com valor pré-definido

Área de Texto e Moldura

<textarea rows="10" cols="30"> Programar HTML é mais simples do que parece! </textarea>

Área de Texto

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>

Botões

<form action=""><input type="button" value="Olá!"></form>

Tipo button

<form action=""><input type="submit" value="Enviar"></form>

Tipo submit

<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>

Determinando ação no formulário

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

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>

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 se aplicam):<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>

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>

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 do que parece! </textarea>

<input type="submit" name = "enviar" value="Enviar" /></form>

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...

Exemplo I

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>

Exemplo II

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>

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.