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.

Como criar 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.

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

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>
<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:

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, datetimelocal, 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 HTML

5?

button Define um botão –

checkbo Define uma caixa de checagem –

x

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 –

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

 Type Descrição HTML
5?

passwor Define um campo de senha (mascarando- –

d 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>
<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”>:

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 [Link].

Inicialmente vamos definir os campos do nosso formulário HTML:

● 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 [Link] 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="[Link]">
</head>
<body>
<form class="formulario">
<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 [Link].
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 [Link]. 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.