Formulário HTML: criando forms HTML e enviando dados

O uso de formulário HTML (ou HTML form) é muito frequente na web, é um dos principais pontos de interação entre usuários e uma aplicação web. Geralmente, eles funcionam enviando os dados para um servidor, porém também podem ser utilizados para alguma função na própria página.

Portanto, entender como utilizar um formulário HTML é muito importante, além de lhe permitir criar diversas aplicações e funcionalidades diferentes.

Caso prefira, você também pode criar um formulário no Google, usando o Google Forms.

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 select;
• <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 em HTML é 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>:

Type	Descrição	HTML5?
button	Define um botão	–
checkbox	Define uma caixa de checagem	–
color	Define uma caixa de cores	–
date	Define um campo de data	☑
datetime-local	Define um campo de data e horário	☑
email	Define um campo de e-mail	☑
file	Define uma campo para upload de arquivos	–
hidden	Define um campo oculto	–
image	Define uma imagem como botão de envio do 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	☑
reset	Define um botão para reiniciar aos valores iniciais	–
search	Define um campo de pesquisa	☑
submit	Define um botão de envio do formulário 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.