Você está na página 1de 39

O que é um formulário HTML?

O formulário HTML é um formulário de preenchimento de dados ou


que resulta em uma ação desejada utilizando a linguagem de marcação
HTML. É formado por um ou mais widgets. Esses widgets são
campos de textos, caixas de seleção, botões, radio buttons
e checkboxes utilizando ferramentas do próprio HTML. Dessa forma,
o usuário pode interagir com a página ao executar ações através desses
formulários.
Esse recurso é muito utilizado para a criação de formulários de
contato, formulários para captura de leads, e também para criação de
sistemas, como por exemplo a criação de um modal de login.
Portanto, vejamos abaixo alguns exemplos de formulários HTML que
podemos encontrar na página inicial da HomeHost:

A caixa de texto, assim como o botão de busca, e a caixa de seleção


para escolher a extensão de domínio são elementos de um
formulário HTML. Porém, além disso, percebe-se que há efeitos e
estilização, elaborados através de outras ferramentas, como o CSS.
Ainda na página da HomeHost, na categoria Suporte, podemos
encontrar mais dois exemplos típicos de formulários. O primeiro
exemplo representa um formulário de contato, enquanto o segundo
representa um formulário de busca. Vejamos abaixo esses exemplos:
Como inserir um formulário HTML
O formulário HTML é representado pela tag de abertura <form> e a
de fechamento </form>. Dentro dessas tags, serão colocados todos os
elementos que compõem este formulário. Posteriormente, vamos
explicar melhor como incluir esses elementos.
Para a tag <form> podem ser atribuídos o atributo method e o
atributo action.
O atributo action define o local (através de uma URL) ao qual serão
enviados todos os dados recolhidos do formulário.
O atributo method define o método HTTP com que o formulário
HTML irá lidar com os dados recebidos. São eles: o método GET e o
método POST. Posteriormente vamos entender melhor como
funcionam esses dois métodos.
Dessa forma, vejam exemplos abaixo do uso da tag <form> :
<!--Formulário HTML através do método POST-->
<form method="post" action="/receber_dados.php">
...
</form>

<!--Formulário HTML através do método GET -->


<form method="get" action="/receber_dados.php">
...
</form>
Os métodos GET e POST
Para entender a diferença entre esses dois métodos, é necessário
compreender como funcionam as requisições HTTP. De uma forma
resumida, sempre que você acessa um recurso através da web, o
navegador envia uma requisição através da URL. Portanto o HTTP é
uma requisição que consiste em duas partes, o cabeçalho e o corpo. O
cabeçalho contém um conjunto de metadados globais envolvendo os
recursos do navegador. Já o corpo pode conter informações
necessárias para o servidor conseguir processar a solicitação anterior.

O método GET

O método GET é usado pelo navegador para solicitar que o servidor


envie de volta um determinado recurso. Portanto, é como se
falássemos ao servidor “Servidor, eu quero obter este recurso.”. 
Nesse caso, o navegador envia um corpo vazio. Portanto, já que o
corpo fica vazio, se um formulário for enviado através do método
GET, os dados serão reconhecidos pelo servidor através da URL.
Dessa forma, podemos perceber que ao enviar um formulário com os
campos Nome e Idade, a URL iria se parecer com algo como: url?
nome=valor&idade=value.
Esse é o método padrão do formulário HTML. Caso não seja
declarado o atributo method, o formulário funcionará através do
método GET.
Vejamos então, algumas observações a respeito do método GET:

 O tamanho de uma URL é limitado a cerca de 3000 caracteres;


 Nunca use o GET para enviar dados confidenciais, pois esses dados
ficarão visíveis na URL;
 É útil para envios de formulários em que um usuário deseja marcar o
resultado;
 GET é melhor para dados não seguros, como strings de consulta no
Google.
O método POST

O método POST é utilizado no navegador para conversar com o


servidor. Os dados são enviados ao servidor através do corpo da
solicitação HTTP. Também é realizada uma solicitação de resposta.
Portanto, é como se falássemos ao servidor “Servidor, verifique esses
dados e me retorne um resultado adequado”. Dessa forma, ao enviar
um formulário através do método POST, os dados serão anexados ao
corpo da solicitação HTTP.
Diferentemente do método GET, explicado anteriormente, o método
POST não inclui o corpo na URL. Portanto, os dados enviados não
ficarão visíveis na URL.
Vejamos então, algumas observações a respeito do método POST:

 Anexa dados de formulário dentro do corpo da solicitação de HTTP.


Portanto, os dados não são mostrados na URL;
 Não tem limitações de tamanho;
 Os envios de formulários com o POST não podem ser marcados.

Elementos de formulário HTML


Os formulários HTML são compostos por diversos elementos, que
compõem o formulário. Dessa forma, é necessário entender como e
quando utilizar cada um deles. Os elementos de formulários utilizados
no HTML são:

 <input> – Define um campo de entrada de dados;


 <textarea> – Define uma área de texto, podendo conter diversas
linhas de texto;
 <button> – Define um botão;
 <select> – Define uma lista selecionável, também conhecida como
drop-down;
 <option> – Define uma lista de opções dentro de um drop-down;
 <optgroup> – Define um grupo de opções;
 <fieldset> – Define um grupo de campos;
 <label> – Define um rótulo ou legenda para um campo ou controle do
formulário;
 <output> – Define elementos de saída para o formulário;
 <legend> – Define um título para o conjunto de campos.
Além dessas tags de elementos de formulário HTML, nada impede de
utilizar outras tags dentro da tag <form>. Por exemplo: podemos
utilizar dentro do <form> as tags <div></div>, <p></p>, entre
outras.
Neste artigo, vamos detalhar melhor apenas respeito das
tags <input> e a tag <textarea>. Portanto, caso não conheça as
demais tags, recomendamos a leitura do artigo tags HTML, sobre o
que é HTML e sobre o HTML5, disponíveis em nosso blog.
Também recomendamos a leitura dos artigos referentes a este assunto
na documentação oficial da W3C Schools.
Portanto, vejamos os seguintes sub-tópicos:

 A tag <input>
 Os tipos de campos <input>
 A tag <textarea>

A tag <input>

A tag <input> é uma das mais utilizadas dentro de um formulário


HTML e considerada a principal. Esta tag representa os campos de
entrada de dados de um formulário. Existem diversos tipos,
principalmente após a atualização do HTML para a versão HTML5,
que trouxe diversos tipos novos de <input>.
O atributo mais importante da tag <input> é o atributos type. Esse
atributo representa o tipo de campo de entrada ao qual essa tag
pertence e como ele se comporta. Portanto, declarar o atributo type é
um pré-requisito para utilizar a tag <input>.
Outro atributo importante para a tag <input> é o atributo name, que
define um nome para o campo de entrada. Este recurso é muito útil
para conseguir identificar os campos através dos métodos GET e
POST.
Há também outro atributo que é muito utilizado, o atributo value. Esse
atributo define um valor inicial para o campo de entrada.
Outro atributo que também merece destaque é o placeholder, pois
esse atributo permite digitarmos uma “descrição” que será visualizada
enquanto o campo de entrada não possuir nenhum valor.
Há ainda um atributo bastante utilizado, que garante que aquele
campo tenha seu preenchimento obrigatório para validar e permitir o
envio do formulário: o atributo required. Portanto, sempre que
precisar manter o preenchimento de um campo obrigatório, basta
utilizar este atributo.
Dessa forma, vejamos um exemplo de formulário abaixo:
<form method="get" action="envio_dados.php">
<input type="text" name="nome" placeholder="digite seu
Nome aqui">
<input type="e-mail" name="email" placeholder="Digite
seu e-mail">
<input type="submit" name="enviar" value="Enviar">
</form>
No exemplo acima, o navegador renderizará o seguinte resultado:

Você pode ler mais sobre os atributos utilizados na


tag <input> no Artigo da W3C School: Input Attributes.

Os tipos de campos <input>

Conforme vimos anteriormente, o principal atributo da tag <input> é o


atributo type. Esse atributo é capaz de definir o comportamento do
campo de entrada. Ao todo, existem 22 valores para esse atributo, ou
seja, 22 tipos de atributo type.
Também é importante saber que boa parte desses tipos são recursos
novos do HTML5. Portanto, nem todos esses tipos são bem
reconhecidos por todos navegadores, especialmente para dispositivos
móveis. São esses os novos tipos do HTML5: color, date, datetime–
local, month, week, time, email, number, range, search, tel, e url.
Portanto, vejamos abaixo os possíveis valores do atributo type da
tag <input>:
HTML5
Type Descrição
?
button Define um botão –
checkbox Define uma caixa de checagem –
color Define uma caixa de cores –
date Define um campo de data
datetime-
Define um campo de data e horário
local
email Define um campo de e-mail
file Define uma campo para upload de arquivos –
hidden Define um campo oculto –
Define uma imagem como botão de envio do
image –
formulário HTML
month Define um controle de mês e ano
number Define um campo de intervalo de número
password Define um campo de senha (mascarando-a) –
radio Define um campo de opção (radio) –
range Define um controle de intervalo
Define um botão para reiniciar aos valores
reset –
iniciais
search Define um campo de pesquisa
Define um botão de envio do formulário
submit –
HTML
tel Define um campo de telefone
text Define um campo de texto –
time Define um campo de controle de horário
url Define um campo de URL
week Define um campo de controle de semana
Vejamos nos próximos tópicos uma descrição e exemplos dos tipos
acima.
<input type=”button”>
Esse tipo de campo define um botão clicável no formulário HTML. É
muito utilizado em conjunto ao JavaScript para a ativação de um scrip.
Portanto, também é muito utilizado com o atributo onclick, pra
realizar um script ao ser clicado.
Vejamos o exemplo abaixo, onde incluiremos a função msg() no
JavaScript e a mesma será executada ao clicar no botão:
<form>
<input type="button" value="Clique Aqui" onclick="msg()">
</form>

<script>
function msg() {
alert("Você clicou no botão!");
}
</script>
Com esse exemplo, o navegador irá renderizá o seguinte botão:

Posteriormente, ao clicar no botão, será renderizada a função msg(),


que executará um alerta com a frase “Você clicou no botão!”:

<input type=”checkbox”>
O input  do tipo checkbox define uma caixa de seleção. A caixa de
seleção é mostrada como uma caixa quadrada que pode ser marcada
quando é ativada. As caixas de seleção permitem que o usuário possa
marcar uma ou mais opções. Você também pode ler posteriormente o
nosso artigo sobre o checkbox, onde apresentamos diversas maneiras
de trabalhar com as caixas de seleção no formulário HTML.
Portanto, vejamos um exemplo de como utilizar o input do tipo
checkbox:
<form>
<input type="checkbox" name="veiculo1"
value="bicicleta">Eu tenho uma bicicleta<br>
<input type="checkbox" name="veiculo2" value="carro">Eu
tenho um carro<br>
<input type="checkbox" name="veiculo3" value="moto">Eu
tenho uma moto
</form>
Dessa forma, o exemplo acima será renderizado pelo navegador como
na imagem abaixo:

<input type=”color”>
Este tipo de campo foi lançado no HTML5. Define uma caixa de
cores, permitindo a seleção de uma cor. Você pode utilizar um
código hexadecimal de cor para poder escolher um cor selecionada
inicialmente. Ao ser clicado, esse tipo de campo abre uma caixa de
seleção de cores. Portanto, vejamos o exemplo abaixo, onde
deixaremos o valor #0000FF (azul) como valor de cor inicial:
<form>
Selecione sua cor preferida: <input type="color"
name="favcor" value="#0000FF">
</form>
Dessa forma, o resultado do exemplo acima será o formulário HTML
abaixo:

<input type=”date”>
Outro tipo que foi lançado no HTML5 é o “date”. O campo do tipo
“date” define um selecionador de data. Portanto, o valor resultante
inclui o ano, o mês e o dia. Contudo, esse tipo de campo não é aceito
por todos os navegadores, como por exemplo no Safari.
Vejamos então o exemplo abaixo de um input do tipo date em um
formulário HTML:
<form>
Data de nascimento: <input type="date"
name="nascimento">
</form>
Com o exemplo acima, o resultado será o formulário da imagem
abaixo:

Neste exemplo, repare que ao clicar no campo do tipo data, aparecerá


um campo de seleção de data como no do exemplo abaixo:

<input type=”datetime-local”>
Também é um tipo de campo lançado com o HTML5. Assim como no
input do tipo date, o tipo datetime-local define uma data, porém com o
acréscimo de definir também um horário. Também é um recurso não
muito bem aceito por todos navegadores.
Portanto, vejamos abaixo um exemplo de um formulário HTML
contendo um campo com datetime-local:
<form>
Data de nascimento: <input type="datetime-local"
name="bdaytime">
</form>
Neste exemplo, o resultado será:

<input type=”email”>
Também é um tipo de campo que foi lançado no HTML5. Este tipo de
campo define um e-mail. Ele é muito útil porque já faz a validação
adequada para os campos de e-mail. Portanto, caso seja digitado um
valor que não seja um endereço de e-mail válido, o formulário irá
recusar e informar que o mesmo não é um e-mail válido.
A maioria dos navegadores atuais já aceitam o input do tipo email.
Porém ainda há alguns navegadores, especialmente de dispositivos
móveis, que encontram dificuldades em realizar a validação.
Vejamos então o exemplo de formulário HTML abaixo, utilizando um
input do tipo email:
<form>
E-mail: <input type="email" name="e-mail"
placeholder="digite seu e-mail aqui">
</form>
Portanto, no exemplo acima, o resultado será:

<input type=”file”>
O input do tipo “file” define um campo de seleção de arquivos e um
botão para upload de arquivos. Caso deseje permitir a seleção de
vários artigos, pode adicionar o atributo “multiple”. Portanto,
vejamos os exemplos abaixo:
<form>
<input type="file" name="arquivos">
</form>
<br><br><br>

<!-- Para permitir seleção de multiplos arquivos: -->


<form>
<input type="file" name="arquivos" multiple>
</form>
Desta forma, o resultado do exemplo acima será:

<input type=”hidden”>
O input do tipo “hidden” define um campo de entrada oculto. Dessa
forma, através do campo oculto, é possível inserir valores que não
serão renderizados, mas serão enviados como dados ao enviar o
formulário.
Este recurso é muito utilizado para armazenar o registro do banco de
dados que precisa ser atualizado quando o formulário é enviado.
Observe que, apesar deste recurso não ficar visível no navegador, é
facilmente visualizado e também editável através do código fonte ou
de ferramentas do desenvolvedor, disponível em qualquer navegador.
Portanto, este recurso não deve ser utilizado como forma de
segurança.
Vejamos então o exemplo abaixo:
<input type="hidden" id="inputOculto" name="inputOculto"
value="meuvalor">
<input type=”image”>
O input do tipo “image” define uma imagem como botão de envio do
formulário HTML. Portanto, é como se funciona-se como um input do
tipo “submit”. Assim como na tag <img>, o caminho para a imagem
é especificado no atributo src.
Você pode verificar o exemplo da w3c School sobre o <input
type=”image”>:
<form action="/action_page.php">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<input type="image" src="img_submit.gif" alt="Submit"
width="48" height="48">
</form>
O resultado do exemplo acima será parecido com:

<input type=”month”>
Este tipo de input também foi lançado com o HTML5. O input do tipo
“month” define um mês e ano. Portanto, vejamos o exemplo abaixo:
<form>
Mês e ano: <input type="month" name="mesano">
</form>
<input type=”number”>
Este tipo de campo também foi lançado com o HTML5 .O input do
tipo “number” define um campo para inserir um número. Este recurso
é muito util, pois permite também incluir restrições, ou seja, valores
mínimos e/ou máximos. Portanto, você pode utilizar os atributos
abaixo para especificar as restrições:

 max – especifica o valor máximo permitido;


 min – especifica o valor mínimo permitido;
 step – especifica os intervalos numéricos legais.
Dessa forma, vejamos então o exemplo abaixo para criar um
formulário HTML com o input do tipo number:
<form>
Quantidade (entre 1 e 5): <input type="number"
name="quantidade" min="1" max="5">
</form>
O resultado do exemplo acima será:

<input type=”password”>
O input do tipo “password” define um campo para digitação de senha.
Portanto, os caracteres são mascarados.
Observe que qualquer formulário que envolva informação
confidencial, como senha, deve ser veiculado por HTTPS. Dessa
forma, a página manterá um nível de segurança adequado.
Vejamos o exemplo abaixo de um campo de senha para o formulário
HTML:
<form>
<input type="password" name="senha" placeholder="Digite
sua Senha">
</form>
Portanto, com o exemplo acima, inicialmente o resultado será:

Posteriormente, ao digitar qualquer coisa no campo de senha, o


conteúdo ficará mascarado como no exemplo abaixo:

<input type=”radio”>
O input do tipo “radio” define um botão de opção. Muito utilizados
em formas de grupos, ou seja, um conjunto de opções relacionadas.
Dessa forma, o usuário poderá selecionar apenas um botão do tipo
radio pertencente a um mesmo grupo.
Para manter um grupo, o nome dos radios devem ser o mesmo,
portanto, receberá o mesmo valor no atributo name. Dessa forma, ao
selecionar qualquer botão do tipo radio, qualquer outro botão radio do
mesmo grupo será desmarcado automaticamente.
Para definir um valor exclusivo para cada botão radio pertencente
a um mesmo grupo, basta utilizar o atributo value. Esse valor não será
mostrado para o usuário, mas será enviado para o servidor. Portanto,
ao enviar um formulário que contenha um grupo de radio, o valor
desse grupo será o valor do atributo value do radio selecionado.
Vejamos o exemplo abaixo:
<form>
<p>Qual sua idade?</p>
<input type="radio" name="idade" value="18_22">18 a 22
<br>
<input type="radio" name="idade" value="23_30">23 a 30
<br>
<input type="radio" name="idade" value="mais31">acima
de 31<br>
</form>
Dessa forma, o resultado do exemplo acima será:

<input type=”range”>
Este tipo de campo foi lançado com o HTML5. O input do tipo
“range” define um controle equivalente a um controle deslizante. O
intervalo padrão é de 0 a 100. Porém, através dos atributos, é possível
alterar esse intervalo. Portanto os atributos abaixo são muito utilizados
nesse tipo de input:

 max – especifica o valor máximo permitido;


 min – especifica o valor mínimo permitido;
 step – especifica os intervalos numéricos.

Dessa forma, vejamos abaixo um exemplo de formulário HTML com


o input do tipo range:
<form>
Defina seu nível de satisfação:<br>
pouco satisfeito
<input type="range" name="satisfacao" min="0" max="10">
muito satisfeito
</form>
Assim, o resultado do código de exemplo será:

<input type=”reset”>
O input do tipo “reset” define um botão para reiniciar os valores
digitados pelo usuário no formulário para seus valores iniciais.
Portanto, esse botão é muito útil. Porém, ao mesmo tempo, é
recomendo evitar o seu uso de forma descuidada. Isso é recomendado,
pois é muito incômodo ao usuário ter seu formulário reiniciado por
clicar em um botão por engano.
Vejamos então o exemplo abaixo:
<form>
<input type="reset">
</form>
<input type=”search”>
Este tipo de input também foi lançado com o HTML5. O input do tipo
“search” define um campo de pesquisa. Dessa forma, ao digitar um
texto, o mesmo irá receber uma string de pesquisa.
É importante definir um nome para este campo de pesquisa. Sem isso,
nada será enviado. Segundo o W3C, o nome mais comum para
campos de pesquisa é “q”. Portanto, vejamos o exemplo abaixo:
<form>
Pesquisar: <input type="search" name="q">
</form>
Dessa forma, o resultado do exemplo acima será:

<input type=”submit”>
Um dos tipos de campos mais importantes do formulário HTML, o
input do tipo “submit” define um botão de envio. Portanto, ao clicar
no submit, todos os valores do formulário serão enviados para o
servidor através do método escolhido na tag <form>, e executando a
ação definida no atributo action do <form>.  É comum utilizar o
atributo value para definir uma palavra ou frase que será renderizada
dentro desse botão.
Portanto, vejamos o exemplo abaixo:
<form>
<input type="submit" value="Enviar Formulário">
</form>
Dessa forma, o resultado do exemplo acima será:

<input type=”tel”>
Esse tipo de campo foi lançado junto ao HTML5. O input do tipo “tel”
define um campo para inserir um número de telefone. Porém, esse tipo
de input ainda é pouco aceito pelos navegadores. Nesse caso, os
navegadores que não possuem suporte para o “tel” transformam esse
input no type=”text” padrão. Portanto, vejamos o exemplo abaixo para
utilizar o “tel” no formulário html:
<form>
Telefone: <input type="tel" name="usertel">
</form>
<input type=”text”>
Um dos campos mais importantes de um formulário HTML, é
provavelmente o mais utilizado e mais aceito por todos navegadores.
O input do tipo “text” define um campo de preenchimento de texto de
uma linha. Por padrão, este tipo de campo costuma ter o comprimento
equivalente a 20 caracteres.
Enfim, vejamos então o exemplo abaixo:
<form>
Nome: <input type="text" name="nome"><br>
Sobrenome: <input type="text" name="sobrenome"><br>
Endereço: <input type="text" name="endereco">
</form>
Dessa forma, com o exemplo acima, teremos como resultado o
formulário html abaixo:

<input type=”time”>
Esse tipo de campo foi lançado junto ao HTML5. O input do tipo
“time” define um campo para inserir um horário. Portanto, vejamos o
exemplo abaixo:
Escolha o horário: <input type="time" name="usr_horario">
<input type=”url”>
Esse tipo de campo foi lançado junto ao HTML5. O input do tipo
“url” define um campo para inserir uma URL. Desta forma, esse tipo
de campo realizará uma validação automática da URL. Portanto,
vejamos o exemplo abaixo de um input do tipo URL em um
formulário HTML:
<form>
Link do seu WebSite: <input type="url" name="webpage">
</form>
<input type=”week”>
Esse tipo de campo foi lançado junto ao HTML5. O input do tipo
“week” define um campo de controle de semana e ano. Porém, não é
levado em consideração o fuso horário.  Com isso, vejamos então o
exemplo abaixo:
<form>
Selecione uma semana: <input type="week" name="semana">
</form>
A tag <textarea>

A tag <textarea> nada mais é do que uma área de texto. Ou seja,


define um controle de entrada de texto de várias linhas. Diferente do
input do tipo “text”, a tag textarea pode possuir várias linhas. Portanto,
as áreas de texto podem conter um número ilimitado de caracteres.
O tamanho de uma área de texto pode ser especificado pelos
atributos cols e rows. Porém, o mais aduado na atualidade é utilizar as
propriedades do CSS.
Diferentemente da tag <input>, a área de texto possui uma tag de
abertura <textarea> e uma de fechamento </textarea>. Caso você
queria deixar um texto pré-digitado nessa área, basta digitar esse texto
dentro dessas tags.
Portanto, vejamos abaixo um exemplo de formulário HTML
utilizando duas áreas de texto:
<form>
<textarea></textarea>

<textarea>Area de texto com um texto inicial


dentro</textarea>
</form>
Dessa forma, o resultado do exemplo acima será:
Criando um formulário HTML
Agora que já sabemos como funciona um formulário HTML, assim
como seus elementos e métodos, vamos começar a criar o nosso
próprio formulário. Nosso formulário conterá elementos HTML para
sua estrutura e iremos estilizá-lo através do CSS. Vamos utilizar uma
folha de estilo externa, portanto, utilizaremos a tag link para chamar o
nosso estilo.css.
Inicialmente vamos definir os campos do nosso formulário HTML:

 Formulário com método POST;


 2 campos de texto: nome e telefone (não utilizaremos o tipo “tel” por
questões de incompatibilidade);
 1 campo de e-mail;
 1 grupo radio para “deseja receber nossas novidades?” contendo duas
opções: sim e não;
 1 área de texto (mensagem);
 1 botão de enviar.

Portanto, agora podemos iniciar o código para o nosso formulário.

Código HTML do nosso formulário

Inicialmente, vamos desenvolver a estrutura do nosso HTML.


Lembre-se de salvar esse arquivo com a extensão .html ou .php. No
caso do nosso exemplos, utilizamos o nome index.php como nome do
arquivo. Vejamos então o nosso código inicial:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<title>Formulário HTML</title>
<meta charset="utf-8"/>
<link rel="stylesheet" type="text/css"
href="estilo.css">
</head>
<body>
<form class="formulario" method="post">
<p> Envie uma mensagem preenchendo o formulário
abaixo</p>

<div class="field">
<label for="nome">Seu Nome:</label>
<input type="text" id="nome" name="nome"
placeholder="Digite seu nome*" required>
</div>

<div class="field">
<label for="telefone">Seu Telefone:</label>
<input type="text" id="telefone"
name="telefone" placeholder="Digite seu Telefone">
</div>

<div class="field">
<label for="email">Seu E-Mail:</label>
<input type="email" id="email" name="email"
placeholder="Digite seu E-Mail*" required>
</div>
<div class="field radiobox">
<span>Deseja receber nossas novidades?</span>
<input type="radio" name="novidades" id="sim"
value="sim" checked><label for="sim">Sim</label>
<input type="radio" name="novidades" id="nao"
value="nao"><label for="nao">Não</label>
</div>
<div class="field">
<label for="mensagem">Sua mensagem:</label>
<textarea name="mensagem" id="mensagem"
placeholder="Mensagem*" required></textarea>
</div>

<input type="submit" name="acao" value="Enviar">


</form>
</body>
</html>
Observe que no exemplo acima, utilizamos o metadados charset,
também já definimos nosso título (“Formulário HTML”) e já criamos
a tag link para o nosso estilo.css.
Observe também que separamos os nossos formulários com divs da
classe field. Isso não fará nenhuma diferença no resultado do nosso
formulário, porém nos permite melhor controle na estilização.
Observe também que separamos nosso grupo de radios em uma div
com a classe radiobox, pois essa receberá um estilo diferente.
Portanto, inicialmente, nosso formulário se parecerá como a imagem
abaixo:

Estilizando nosso formulário HTML

Vamos agora aplicar os estilos ao nosso formulário. Não será nada


muito complexo, faremos apenas um estilização bem simples. Para
isso, utilizaremos o CSS através do nosso arquivo estilo.css. Lembre-
se de salvá-lo na mesma pasta do seu arquivo do formulário. Portanto,
vejamos agora o nosso código CSS abaixo:
.formulario{
width: 400px;
padding: 30px;
border:1px solid #ccc;
}
.formulario p{
width: 100%;
font-size: 1.5em;
}
.field{
width: 100%;
margin: 15px 0;
}
.field label,
.field span{
padding-left: 10px;
font-size: 1.1em;
display: block;
width: 100%;
}
.radiobox label{
width: auto;
display: inline-block;
}
input[type=text],
input[type=email],
textarea{
width: 100%;
padding-left: 10px;
height: 30px;
line-height: 30px;
border-radius: 15px;
border: 1px solid #ccc;
outline: none;
}
input#nao{
margin-left: 30px;
}
textarea{
line-height: 20px;
padding: 10px;
height: 90px;
resize: none;
}
input[type=submit]{
display: block;
background-color: #ccc;
height: 35px;
border: none;
outline: 0;
cursor: pointer;
width: 100px;
margin: 0 auto;
text-align: center;
border-radius: 15px;
}
Com este código, nosso formulário já começa a ganhar um aspecto
visual melhor. Vejamos então o resultado na imagem abaixo:
Enfim, finalizamos a criação da estrutura do nosso formulário HTML,
assim como sua estilização.

Recebendo os dados do formulário com PHP


Agora que já criamos nosso formulário HTML e também já criamos
um estilo para ele, vamos começar a praticar suas funcionalidades.
Vamos continuar utilizando o código anterior como parte do nosso
exemplo.
O objetivo neste tópico será receber os dados do formulário e poder
manipulá-los através do PHP. Desta forma, vamos começar fazendo
uma verificação. A primeira verificação que devemos fazer é se o
botão submit foi clicado, ou seja, se existe o valor “acao” através do
post.
Para isso, vamos utilizar o $_POST[“”] para conseguir pegar o valor
dos nossos elementos do formulário HTML.
Portanto, caso exista o valor do $_POST[“acao”], significa que nosso
botão foi clicado e que nosso formulário foi devidamente preenchido.
Então, vamos solicitar que ao confirmar essa ação, seja escrito, através
do comando echo do PHP o seguinte
código: <script>alert(‘Formulário Foi enviado pelo método
POST’)</script>. Dessa forma, ao clicar em enviar, receberemos um
alerta com esta mensagem. Para isso, basta incluir o exemplo abaixo
no código do formulário. Recomendamos que escreva este código
dentro das tags <body> e após as tags <form>:
<?php
if (isset($_POST["acao"])){
echo "<script>alert('Formulário Foi enviado pelo método
POST')</script>";
}
?>
Assim, caso tudo ocorra corretamente, o resultado ao clicar em enviar,
será o seguinte alerta no nosso navegador:
Apresentando os dados do formulário na
tela através do PHP

Agora que já verificamos a existência do $_POST[“acao”] e


descobrimos que nosso formulário está funcionando corretamente,
vamos para o próximo passo.
Vamos então recolher todos os dados do nosso formulário. Para isso
criaremos algumas variáveis que receberão o valor do $_POST[“”]
que queremos. Para isso, utilizando ainda o nosso formulário HTML,
vamos modificar nosso código anterior, conforme o exemplo abaixo:
<?php
if (isset($_POST["acao"])){
$nome=$_POST["nome"];
$telefone=$_POST["telefone"];
$email=$_POST["email"];
$radio=$_POST["novidades"];
$msg=$_POST["mensagem"];
}
?>
Pronto! Concluímos o recebimento dos dados, e agora todos os dados
do formulário foram armazenados em nossas variáveis. Mas e agora?
Vamos continuar praticando, criando uma mensagem dinâmica que
será renderizada no nosso navegador. Faremos uma segunda
verificação com a nossa variável $radio, de forma que a mensagem
modificará para cada um dos dois valores possíveis.
Vejamos então o código abaixo:
<?php
if (isset($_POST["acao"])){
$nome=$_POST["nome"];
$telefone=$_POST["telefone"];
$email=$_POST["email"];
$radio=$_POST["novidades"];
$msg=$_POST["mensagem"];

echo "<p>Olá, ".$nome."</p>";


echo "<p>Seu email é: ".$email."</p>";
echo "<p>Seu telefone é: ".$telefone."</p>";
if ($radio=="sim"){
echo "<p>Você escolheu receber nossas
novidades</p>";
}elseif ($radio=="nao") {
echo "<p>Você escolheu NÃO receber nossas
novidades</p>";
}
echo "<p>Sua mensagem é:<br/>".$msg."</p>";
}
?>
Portanto, vamos agora preencher nosso formulário da seguinte forma:
Dessa forma, ao clicar em enviar, todo nosso código PHP
renderizará novas mensagens abaixo do formulário HTML,
conforme na imagem abaixo:
Para que você possa utilizar para estudos, segue o código final do
nosso documento form-exemplo.html:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<title>Formulário HTML</title>
<meta charset="utf-8"/>
<link rel="stylesheet" type="text/css"
href="estilo.css">
</head>
<body>
<form action="exibir-dados.php" class="formulario"
method="post">
<p> Envie uma mensagem preenchendo o formulário
abaixo</p>

<div class="field">
<label for="nome">Seu Nome:</label>
<input type="text" id="nome" name="nome"
placeholder="Digite seu nome*" required>
</div>

<div class="field">
<label for="telefone">Seu Telefone:</label>
<input type="text" id="telefone"
name="telefone" placeholder="Digite seu Telefone">
</div>

<div class="field">
<label for="email">Seu E-Mail:</label>
<input type="email" id="email" name="email"
placeholder="Digite seu E-Mail*" required>
</div>
<div class="field radiobox">
<span>Deseja receber nossas novidades?</span>
<input type="radio" name="novidades" id="sim"
value="sim" checked><label for="sim">Sim</label>
<input type="radio" name="novidades" id="nao"
value="nao"><label for="nao">Não</label>
</div>
<div class="field">
<label for="mensagem">Sua mensagem:</label>
<textarea name="mensagem" id="mensagem"
placeholder="Mensagem*" required></textarea>
</div>

<input type="submit" name="acao" value="Enviar">


</form>

</body>
</html>
Arquivo exibir-dados.php , que irá receber e tratar o formulário:
<?php

if (isset($_POST["acao"])){

$nome=$_POST["nome"];
$telefone=$_POST["telefone"];
$email=$_POST["email"];
$radio=$_POST["novidades"];
$msg=$_POST["mensagem"];
echo "<p>Olá, ".$nome."</p>"; echo "<p>Seu email é: ".
$email."</p>";

echo "<p>Seu telefone é: ".$telefone."</p>";

if ($radio=="sim"){
echo "<p>Você escolheu receber nossas novidades</p>";
}
elseif ($radio=="nao") {
echo "<p>Você escolheu NÃO receber nossas
novidades</p>";
}
echo "<p>Sua mensagem é:<br/>".$msg."</p>";
}

?>
 
Pronto! Finalmente, concluímos nosso exemplo prático. Com isso
você já estará apto a criar suas próprias aplicações com o código
HTML em conjunto ao PHP atuando do lado do servidor! Você pode
fazer o download aqui dos códigos destes exemplos.

Enviando dados do formulário por e-mail com


o PHP Mailer
O que é o PHPMailer

O PHPMailer é uma classe do PHP Open Source, ou seja, de uso livre


e gratuito. Esta classe permite o envio de e-mails via SMTP. Além de
ser fácil de usar, já vem com funções prontas como: arquivos em
anexo, BCC, entre outros.
Portanto, vamos configurar nosso formulário HTML, com o uso do
PHP, para que ao receber os dados do formulário, sejam enviados para
o nosso endereço e-mail!

Fazendo a instalação do PHPMailer


Em nosso repositório com os exemplos de códigos, incluímos o
PHPMailer. Você pode fazer aqui o download dos exemplos já com
o PHPMailer.
Caso prefira, você pode também fazer o download de versões futuras
mais atualizadas através da página do GitHub do PHPMailer.
Também é possível fazer a instalação via composer. Enfim, após o
download, extraia a pasta para o mesmo local onde se encontra o
código do seu formulário. Recomendamos renomear a pasta do
arquivo extraído para phpmailer.

Criando uma classe para configurar o envio


de e-mail através do PHPMailer

Vamos agora criar, na mesma pasta do formulário, um novo arquivo


chamado email.php. Desta forma, o conteúdo final da nossa pasta
será algo como o exemplo da imagem abaixo:

Neste arquivo vamos incluir toda a configuração que precisamos fazer


para poder utilizar o PHPMailer, além de incluir nossos dados obtidos
através do método POST, assim como configurar a mensagem que
receberemos em nosso e-mail. Portanto, no nosso arquivo email.php,
vamos inserir o seguinte código:
<?php
$nome=$_POST['nome'];
$telefone=$_POST['telefone'];
$email=$_POST['email'];
$radio=$_POST['novidades'];
$date=date("d/m/Y");
$msg=$_POST['mensagem'];
$mensagem= 'Esta mensagem foi enviada através do
formulário<br><br>';
$mensagem.='<b>Nome: </b>'.$nome.'<br>';
$mensagem.='<b>Telefone:</b> '.$telefone.'<br>';
$mensagem.='<b>E-Mail:</b> '.$email.'<br>';
$mensagem.='<b>Deseja receber novidades:</b> '.
$radio.'<br>';
$mensagem.='<b>Data de envio:</b> '.$date.'<br>';
$mensagem.='<b>Mensagem:</b><br> '.$msg;
require("phpmailer/src/PHPMailer.php");
require("phpmailer/src/SMTP.php");
require ("phpmailer/src/Exception.php");

$mail = new PHPMailer\PHPMailer\PHPMailer();


$mail->isSMTP(); // Não modifique
$mail->Host = '...'; // SEU HOST (HOSPEDAGEM)
$mail->SMTPAuth = true; //
Manter em true
$mail->Username = 'email@seudominio.com.br'; //SEU
USUÁRIO DE EMAIL
$mail->Password = '0123456'; //SUA
SENHA DO EMAIL SMTP password
$mail->SMTPSecure = 'ssl'; //TLS OU SSL-VERIFICAR
COM A HOSPEDAGEM
$mail->Port = 465; //TCP PORT, VERIFICAR COM
A HOSPEDAGEM
$mail->CharSet = 'UTF-8'; //DEFINE O CHARSET
UTILIZADO

//Recipients
$mail->setFrom('email@seudominio.com.br', 'Site');
//DEVE SER O MESMO EMAIL DO USERNAME
$mail->addAddress('receptor@seudominio.com.br'); //
QUAL EMAIL RECEBERÁ A MENSAGEM!
// $mail->addAddress('ellen@example.com'); // VOCÊ
pode incluir quantos receptores quiser
$mail->addReplyTo($email, $nome); //AQUI SERA O EMAIL
PARA O QUAL SERA RESPONDIDO
// $mail->addCC('cc@example.com'); //ADICIONANDO CC
// $mail->addBCC('bcc@example.com'); //ADICIONANDO BCC

// Attachments
// $mail->addAttachment('/var/tmp/file.tar.gz');
// Add attachments
// $mail->addAttachment('/tmp/image.jpg', 'new.jpg');
// Optional name

// Content
$mail-
>isHTML(true); // Set
email format to HTML
$mail->Subject = 'Mensagem do Formulário'; //ASSUNTO
$mail->Body = $mensagem; //CORPO DA MENSAGEM
$mail->AltBody = $mensagem; //CORPO DA MENSAGEM EM
FORMA ALT

// $mail->send();
if(!$mail->Send()) {
echo "<script>alert('Erro ao enviar o E-
Mail');window.location.assign('index.php');</script>";
}else{
echo "<script>alert('E-Mail enviado com
sucesso!');window.location.assign('index.php');</script>";
}
die
?>
Observe que nas primeiras linhas, recuperamos as informações obtidas
através do $_POST, inserindo-as dentro de variáveis. Posteriormente,
já criamos a estrutura da nossa mensagem. Após isso, iniciamos a
nossa classe do PHP Mailer, que por ser encontrada através na página
inicial do PHPMailer. Observe que boa parte dos elementos foram
comentados e mantidos apenas para fins de estudo. Fizemos isso pois
não iremos utilizar nenhum desses recursos que estão comentados.
As informações de Host, SMTP Secure e Port, você pode obter
diretamente com sua empresa de Hospedagem. Após isso, inclua seu
e-mail de usuário da hospedagem e a senha.
Por fim, criamos também um script, através do echo, que será
renderizado conforme a confirmação ou a falha do envio do e-mail.

Finalizando nosso formulário HTML com


envio de e-mail

Sendo assim, nossa classe já está devidamente configurada. Vamos


agora incluí-la no nosso formulário HTML.
Portanto, agora o nosso código form-exemplo-enviar-
email.html será:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<title>Formulário HTML</title>
<meta charset="utf-8"/>
<link rel="stylesheet" type="text/css"
href="estilo.css">
</head>
<body>
<form action="enviar-email.php" class="formulario"
method="post">
<p> Envie uma mensagem preenchendo o formulário
abaixo</p>

<div class="field">
<label for="nome">Seu Nome:</label>
<input type="text" id="nome" name="nome"
placeholder="Digite seu nome*" required>
</div>

<div class="field">
<label for="telefone">Seu Telefone:</label>
<input type="text" id="telefone"
name="telefone" placeholder="Digite seu Telefone">
</div>

<div class="field">
<label for="email">Seu E-Mail:</label>
<input type="email" id="email" name="email"
placeholder="Digite seu E-Mail*" required>
</div>
<div class="field radiobox">
<span>Deseja receber nossas novidades?</span>
<input type="radio" name="novidades" id="sim"
value="sim" checked><label for="sim">Sim</label>
<input type="radio" name="novidades" id="nao"
value="nao"><label for="nao">Não</label>
</div>
<div class="field">
<label for="mensagem">Sua mensagem:</label>
<textarea name="mensagem" id="mensagem"
placeholder="Mensagem*" required></textarea>
</div>

<input type="submit" name="acao" value="Enviar">


</form>
</body>
</html>
Agora, o nosso arquivo enviar-email.php que irá receber e fazer o
envio do formulário:
<?php
// Criando nossas variáveis para guardar as informações
do formulário
$nome=$_POST['nome'];
$telefone=$_POST['telefone'];
$email=$_POST['email'];
$radio=$_POST['novidades'];
$date=date("d/m/Y");
$msg=$_POST['mensagem'];
// formatando nossa mensagem (que será envaida ao e-
mail)
$mensagem= 'Esta mensagem foi enviada através do
formulário<br><br>';
$mensagem.='<b>Nome: </b>'.$nome.'<br>';
$mensagem.='<b>Telefone:</b> '.$telefone.'<br>';
$mensagem.='<b>E-Mail:</b> '.$email.'<br>';
$mensagem.='<b>Deseja receber novidades:</b> '.
$radio.'<br>';
$mensagem.='<b>Data de envio:</b> '.$date.'<br>';
$mensagem.='<b>Mensagem:</b><br> '.$msg;
// abaixo as requisições do arquivo phpmailer
require("phpmailer/src/PHPMailer.php");
require("phpmailer/src/SMTP.php");
require ("phpmailer/src/Exception.php");

// chamando a função do phpmailer

$mail = new PHPMailer\PHPMailer\PHPMailer();


$mail->isSMTP(); // Não modifique
$mail->Host = 'mail.nomedoservidor.com'; // SEU
HOST (HOSPEDAGEM)
$mail->SMTPAuth = true; //
Manter em true
$mail->Username = 'email@seudominio.com.br'; //SEU
USUÁRIO DE EMAIL
$mail->Password = '0123456'; //SUA
SENHA DO EMAIL SMTP password
$mail->SMTPSecure = 'ssl'; //TLS OU SSL-VERIFICAR
COM A HOSPEDAGEM
$mail->Port = 465; //TCP PORT, VERIFICAR COM
A HOSPEDAGEM
$mail->CharSet = 'UTF-8'; //DEFINE O CHARSET
UTILIZADO

//Recipients
$mail->setFrom('email@seudominio.com.br', 'Site');
//DEVE SER O MESMO EMAIL DO USERNAME
$mail->addAddress('receptor@seudominio.com.br'); //
QUAL EMAIL RECEBERÁ A MENSAGEM!
// $mail->addAddress('ellen@example.com'); // VOCÊ
pode incluir quantos receptores quiser
$mail->addReplyTo($email, $nome); //AQUI SERA O EMAIL
PARA O QUAL SERA RESPONDIDO
// $mail->addCC('cc@example.com'); //ADICIONANDO CC
// $mail->addBCC('bcc@example.com'); //ADICIONANDO BCC

// Attachments
// $mail->addAttachment('/var/tmp/file.tar.gz');
// Add attachments
// $mail->addAttachment('/tmp/image.jpg', 'new.jpg');
// Optional name

// Content
$mail-
>isHTML(true); // Set
email format to HTML
$mail->Subject = 'Mensagem do Formulário'; //ASSUNTO
$mail->Body = $mensagem; //CORPO DA MENSAGEM
$mail->AltBody = $mensagem; //CORPO DA MENSAGEM EM
FORMA ALT

// $mail->send();
if(!$mail->Send()) {
echo "<script>alert('Erro ao enviar o E-
Mail');window.location.assign('index.php');</script>";
}else{
echo "<script>alert('E-Mail enviado com
sucesso!');window.location.assign('index.php');</script>";
}
die
?>

Nota: no código PHP é necessário ajustar alguns dados, como o


seu servidor SMTP, login, senha, etc.
Dessa forma, finalmente concluímos o nosso formulário HTML.
Portanto, nosso formulário HTML irá receber os dados do usuário,
enviar os dados para o servidor através do método POST e, com o
PHP, iremos gerir esses dados. Posteriormente, com a classe do
PHPMailer, esses dados são enviadas de forma estruturada para nosso
endereço de e-mail. Por fim, o navegador recebe uma resposta do
servidor, e com isso renderizará um script final, informando se a
mensagem foi enviada corretamente ou se houve falha. Tudo isso feito
através de poucas linhas de código e de forma rápida, prática e fácil!
Você pode fazer aqui o download dos exemplos dos códigos deste
artigo.
Temos a certeza que com a leitura de todo esse artigo, e ainda com
estudo e prática dos exemplos apresentados, você será capaz de criar
qualquer tipo de formulário HTML.

Você também pode gostar