Este documento apresenta como construir formulários em HTML e PHP: (1) mostra os principais elementos de formulário como campos de texto, caixas de opção e lista; (2) explica como integrar formulários em páginas PHP; e (3) fornece exemplos de layout para integrar formulários em sites. O exercício final pede para criar um site com três formulários usando esses conceitos.

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.com
Sã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 texto
Campo 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 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>

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