Formulário pronto e salvando em banco de dados MySQL
Autor: gabriel Kalszp | Publicado: 2013-10-14T13:44:00-07:00





<!--
google_ad_client = "ca-pub-0444846487295374";
/* cabecalhoquadrado */
google_ad_slot = "2324390158";
google_ad_width = 250;
google_ad_height = 250;
//-->

<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">




<!--
google_ad_client = "ca-pub-0444846487295374";
/* cabecalhoquadrado */
google_ad_slot = "2324390158";
google_ad_width = 250;
google_ad_height = 250;
//-->

<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">





 
Hoje o tutorial apresenta um formulário pronto salvando em banco de dados. O formulário abaixo que será construido com HTML5 e salvando em banco de dados MySQL.


Curso de PHP, MySQLi e Bootstrap




Crie um arquivo: contato.html

&lt;!DOCTYPE html!&gt;&lt;html lang="pt-br"&gt;&lt;head&gt;&lt;meta charset="utf-8"&gt;&lt;link href="estilo.css" rel="stylesheet" type="text/css" media="all"&gt;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;title&gt;Formulário&lt;/title&gt;&lt;/head&gt;&lt;body&gt;&lt;div id="container"&gt;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;div id="corpo"&gt;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;section&gt;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;article class="artigo"&gt;&lt;form method="POST" action="processacont.php"&gt;&lt;input type="hidden" name="operacao" value="incluir"&gt;&lt;table border="0"&gt;&lt;tr&gt;&lt;td width="960" height="20"&gt;&lt;/br&gt;&lt;font color="#154ecd" size="5"&gt;&amp;nbsp;&nbsp; Fale Conosco&lt;/font&gt;&lt;/td&gt;&lt;/tr&gt;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;/table&gt;&lt;/br&gt;&lt;hr style='width: 100%; height:5px; 
text-align:center; border:0px; color:#154ecd; background:#154ecd;' 
/&gt;&lt;/br&gt;&lt;table border="0"&gt;&lt;tr&gt;&lt;td width="330" height="20"&gt;&lt;font color="#154ecd" size="4"&gt; &amp;nbsp; Nome: &lt;/font&gt;&lt;font color="red" size="4"&gt;*&lt;/font&gt;&lt;/td&gt;&lt;td width="320" height="20"&gt;&lt;font color="#154ecd" size="4"&gt;E-mail: &lt;/font&gt;&lt;font color="red" size="4"&gt;*&lt;/font&gt;&lt;/td&gt;&lt;td width="310" height="20"&gt;&lt;font color="#154ecd" size="4"&gt;Telefone: &lt;/font&gt;&lt;font color="red" size="4"&gt;*&lt;/font&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td width="330" height="20"&gt; &amp;nbsp;&lt;input type="text" name="nome" size="35" class="txtarea"&gt;&lt;/td&gt;&lt;td width="320" height="20"&gt;&lt;input type="text" name="email" size="35" class="txtarea"&gt;&lt;/td&gt;&lt;td width="310" height="20"&gt;&lt;input type="number" name="telefone" size="35" class="txtarea"&gt;&lt;/td&gt;&lt;/tr&gt;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;/table&gt;&lt;table border="0"&gt;&lt;/br&gt;&lt;tr&gt;&lt;td width="330" height="20"&gt;&lt;font color="#154ecd" size="4"&gt; &amp;nbsp; Informe seus interesses: &lt;/font&gt;&lt;font color="red" size="4"&gt;*&lt;/font&gt;&lt;/td&gt;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;/tr&gt;&lt;/table&gt;&lt;/br&gt;&lt;/br&gt;&lt;table border="0"&gt;&lt;tr&gt;&lt;td height="20"&gt;&amp;nbsp; &amp;nbsp;&lt;input 
type="checkbox" name="interesse[]" value="aniversario"&gt;&lt;/td&gt;&nbsp;&nbsp;&nbsp; &lt;td height="20"&gt;&amp;nbsp; &amp;nbsp;&lt;input type="checkbox" name="interesse[]" value="casamento"&gt;&lt;/td&gt;
&lt;/tr&gt;&lt;tr&gt;&lt;td height="20"&gt;&amp;nbsp; &amp;nbsp;&lt;font 
color="#154ecd" size="4"&gt;Festa de Aniversário&lt;/font&gt;&lt;/td&gt;&lt;td height="20"&gt;&amp;nbsp; &amp;nbsp;&lt;font 
color="#154ecd" size="4"&gt;Festa de Casamento&lt;/font&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;table border="0"&gt;&lt;/br&gt;&lt;tr&gt;&lt;td width="960" height="20"&gt;&lt;font color="#154ecd" 
size="4"&gt; &amp;nbsp; Descreva sua solicitação: &lt;/font&gt;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; 
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;/td&gt;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;/tr&gt;&lt;/table&gt;&nbsp;&nbsp;&nbsp; &lt;table border="0"&gt;&lt;tr&gt;&lt;td width="6" height="20"&gt;&lt;td&gt;&lt;td width="330" height="20"&gt;&lt;label&gt;&lt;textarea name="solicitacao"
 id="textarea" cols="114" rows="5"&gt;&lt;/textarea&gt;&lt;/label&gt;&lt;/td&gt;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;/tr&gt;&lt;/table&gt;&lt;/br&gt;&lt;/br&gt;&lt;table border="0"&gt;&lt;tr&gt;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;td width="420" height="50"&gt; ( * )
 Campos obrigatórios &lt;/td&gt;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;/tr&gt;&lt;tr&gt;&lt;td&gt;&lt;input type="reset" value="Cancelar" /&gt;&lt;input type="submit" name="enviar" value="Enviar"&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/form&gt;&lt;/article&gt;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;/section&gt;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;/div&gt;&lt;!--Copyright © Membo. Todos os direitos reservados.--&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;


Agora crie um arquivo para o estilo: estilo.css

/*html5 semantics tags article, aside, figure, footer, header, hgroup, menu, nav, section { display: block; }*//* light css reset */* { margin : 0; padding : 0; }/*h2, h3, h4, h5, p, ul, ol&nbsp; { margin : 0 20px; padding : .5em 0; }img { border: 0px;}/* =page level container */#container {/*Container que contem o site */&nbsp;&nbsp;&nbsp; margin: 0px auto 0px auto;&nbsp;&nbsp;&nbsp; width: 960px;&nbsp;&nbsp;&nbsp; background:#CAE1FF; }#corpo { /*Div Corpo do site&nbsp; possui a section*/&nbsp;&nbsp;&nbsp; margin: 1px;&nbsp;&nbsp;&nbsp; padding-top: 0px;&nbsp;&nbsp;&nbsp; padding-bottom: 20px;&nbsp;&nbsp;&nbsp; height: 600px;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; }section { /*Div Corpo do site&nbsp; possui o cabecalho do artigo, o corpo do artigo e o cabecalho*/&nbsp;&nbsp;&nbsp; margin:0px auto 0px auto;&nbsp;&nbsp;&nbsp; width:958px;&nbsp;&nbsp;&nbsp; height:600px;&nbsp;&nbsp;&nbsp; float:left;&nbsp;&nbsp;&nbsp; background:#CAE1FF; &nbsp;&nbsp;&nbsp; margin-left:0px;&nbsp;&nbsp; }.artigo {&nbsp;&nbsp;&nbsp; margin:0px auto 0px auto;&nbsp;&nbsp;&nbsp; width:958px;&nbsp;&nbsp;&nbsp; height:350px;&nbsp;&nbsp;&nbsp; float:left;&nbsp;&nbsp;&nbsp; background:#CAE1FF; &nbsp;&nbsp;&nbsp; margin:0px;&nbsp;&nbsp; }.txtarea {/*Define a altura do input*/&nbsp;&nbsp;&nbsp; /*background-color:#B0E0E6;*/&nbsp;&nbsp;&nbsp; height: 40px;&nbsp;&nbsp;&nbsp; font: 18px georgia, sans-serif;&nbsp;&nbsp;&nbsp; color:#154ecd;}




Agora vamos fazer a conexão com banco de dados, crie um arquivo: conexaobd.inc
Importante lembrar que é necessário um servidor para rodar o php. Caso esteja habituado com php, temos um tutorial de introdução: Clique aqui.&nbsp;
ou http://informaticadodia.blogspot.com/2013/10/tutorial-como-instalar-o-wamp-server.html&nbsp; 






&nbsp;&nbsp;&nbsp; &lt;?php&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; //conexão com o servidor&nbsp;&nbsp;&nbsp; $conect = mysql_connect("endereço_servidor", "usuario_do_banco_de_dados", "senha_banco_de_dados");&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; // Caso a conexão seja reprovada, exibe na tela uma mensagem de erro&nbsp;&nbsp;&nbsp; if (!$conect) die ("&lt;h1&gt;Falha na coneco com o Banco de Dados!&lt;/h1&gt;");&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; // Caso a conexão seja aprovada, então conecta o Banco de Dados.&nbsp;&nbsp;&nbsp; $db = mysql_select_db("nome_banco_de_dados");&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; /*Configurando este arquivo, depois é só você dar um include em suas paginas php, isto facilita muito, pois caso haja necessidade de mudar seu Banco de Dados&nbsp;&nbsp; você altera somente um arquivo*/&nbsp;&nbsp;&nbsp; ?&gt;


Agora vamos salvar os dados no banco de dados, crie um arquivo: processacont.php

&lt;?php&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; $operacao = $_POST["operacao"];&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; include "conexaobd.inc";&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; if($operacao == "incluir"){&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; $nome = $_POST["nome"];&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; $email = $_POST["email"];&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; $telefone = $_POST["telefone"];&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; $interesse = implode($_POST["interesse"],",");&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; $solicitacao = $_POST["solicitacao"];&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; $sql = "INSERT into cadastro VALUES";&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; $sql .="('$nome', '$email', $telefone, '$interesse', '$solicitacao')";&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; $resultado = mysql_query ($sql);&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; echo "Mensagem enviada com sucesso!";&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; }&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; ?&gt; 



Espero que gostem do formulário.
Até um próximo tutorial.