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.
Aula 1, 2 Bacterias Características e Morfologia.pptx
Aula 03 - Layout e Integração de formulário com HTML e PHP
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>
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>
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...
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.