Um for­mu­lá­rio HTML (HTML form) permite que você se comunique de um jeito fácil e direto com os seus vi­si­tan­tes. É possível usar diversos elementos e atributos para adaptar for­mu­lá­rios a ne­ces­si­da­des es­pe­cí­fi­cas.

O que é for­mu­lá­rio HTML?

For­mu­lá­rio HTML é um for­mu­lá­rio in­te­ra­tivo adi­ci­o­nado em seu site que pos­si­bi­lita que os vi­si­tan­tes enviem dados per­so­na­li­za­dos. As in­for­ma­ções inseridas são enviadas ao res­pec­tivo servidor web para serem pro­ces­sa­das. Para integrar esse tipo de interação aos seus do­cu­men­tos HTML, você precisa usar a tag <form>. Essa tag HTML pode ser per­so­na­li­zada com diversos elementos e atributos para atender às suas ne­ces­si­da­des. Você pode usar di­fe­ren­tes tipos de entradas, como textos, números, endereços de e-mail, senhas, botões e caixas de seleção.

Caso queira coletar dados pessoais em seu site usando um for­mu­lá­rio HTML, você deve declarar essa intenção ex­pli­ci­ta­mente na sua política de pri­va­ci­dade, obter o con­sen­ti­mento dos usuários conforme exigido por le­gis­la­ções como a LGPD e garantir que a trans­mis­são das in­for­ma­ções seja feita com crip­to­gra­fia SSL/TLS.

Hos­pe­da­gem que se adapta às suas ambições
  • Fique online com 99,99% de tempo de atividade e segurança robusta
  • Aumente o de­sem­pe­nho com um clique à medida que o tráfego cresce
  • Inclui domínio gratuito, SSL, e-mail e suporte 24 horas por dia, 7 dias por semana

Para que o elemento <form> é usado?

Graças à di­ver­si­dade de opções de entrada oferecida pelo for­mu­lá­rio HTML, ele pode ser usado para várias fi­na­li­da­des, incluindo:

  • For­mu­lá­rios de contato para fazer consultas ou pedidos
  • For­mu­lá­rios de registro de contas ou news­let­ters
  • For­mu­lá­rios para feedbacks
  • Pesquisas
  • For­mu­lá­rios de suporte e tickets de aten­di­mento
  • For­mu­lá­rios de login para acessar áreas restritas do site

Te­o­ri­ca­mente, quase qualquer tipo de interação entre os vi­si­tan­tes e o site pode ser realizado com um for­mu­lá­rio HTML.

Qual é a sintaxe da tag HTML <form>?

Um for­mu­lá­rio HTML é iniciado com a tag <form> e termina com a tag de fe­cha­mento </form>. Entre as duas tags, você pode adicionar di­fe­ren­tes elementos e atributos, que veremos de­ta­lha­da­mente mais adiante. A sintaxe básica dos for­mu­lá­rios é a seguinte:

<form> Elementos </form>
html

Quais elementos podem ser usados em um for­mu­lá­rio HTML?

Você pode usar diversos elementos HTML para per­so­na­li­zar seu for­mu­lá­rio HTML. Estes são alguns deles:

Elemento HTML Descrição
<button> Botão clicável simples
<datalist> Opções para o elemento <input> apre­sen­tado como uma lista suspensa
<fieldset> Agrupa os dados re­la­ci­o­na­dos
<input> Coleta dados per­so­na­li­za­dos usando o atributo type
<label> A tag HTML label associa rótulos
<legend> Legenda ou título para a tag <fieldset>
<optgroup> Agrupa os elementos <option> dentro da tag <select>
<option> Define uma opção para <datalist> ou <select>
<output> Exibe o resultado de um cálculo ou script
<select> Cria uma lista suspensa
<textarea> Define um campo de texto com múltiplas linhas

Atributos comuns de for­mu­lá­rios HTML

Existem diversos atributos HTML que você pode usar para per­so­na­li­zar um for­mu­lá­rio com di­fe­ren­tes funções. Os atributos mais im­por­tan­tes são:

  • action: Es­pe­ci­fica o URL para o qual os dados do for­mu­lá­rio serão enviados
  • autocomplete: Indica ao navegador se um campo de entrada deve ser pre­en­chido au­to­ma­ti­ca­mente
  • enctype: Define como os dados devem ser co­di­fi­ca­dos quando enviados ao servidor
  • method: Es­pe­ci­fica se os dados devem ser enviados usando o método GET ou POST
  • target: Define onde um documento vinculado deve ser aberto
  • name: Atribui um nome ao for­mu­lá­rio, que pode ser usado em Ja­vaS­cript para acessar o for­mu­lá­rio
  • accept-charset: Es­pe­ci­fica a co­di­fi­ca­ção de ca­rac­te­res que será usada ao enviar os dados do for­mu­lá­rio

Exemplos de for­mu­lá­rios HTML

Para finalizar, apre­sen­ta­re­mos dois exemplos de como funciona um for­mu­lá­rio HTML. Co­me­ça­re­mos criando um for­mu­lá­rio simples que permite ao visitante inserir seu nome e sobrenome e enviar essas in­for­ma­ções. Seu código é o seguinte:

<!DOCTYPE html>
<html>
<body>
<h2>Exemplo de formulário HTML</h2>
<form action="/action_page.php">
    <label for="primeiro-nome">Primeiro nome:</label><br>
    <input type="text" id="primeiro-nome" name="primeiro-nome" value="Pedro"><br><br>
    <label for="sobrenome">Sobrenome:</label><br>
    <input type="text" id="sobrenome" name="sobrenome" value="Santos"><br><br>
    
    <input type="submit" value="Enviar">
</form> 
<p>Ao clicar em “Enviar”, seus dados serão enviados a esta página: "/action_page.php".</p>
</body>
</html>
html

Esta é a aparência do for­mu­lá­rio gerado com o código acima:

Imagem: Exemplo de formulário HTML simples
O usuário pode inserir seu nome e sobrenome nos campos de entrada do for­mu­lá­rio e enviar essas in­for­ma­ções à página designada, clicando no botão “Enviar”

Em outro exemplo, usamos as tags <select>, <option> e <optgroup> para criar um campo em que os usuários podem se­le­ci­o­nar di­fe­ren­tes cidades em uma lista suspensa:

<!DOCTYPE html>
<html>
<head>
<title>Exemplo de formulário HTML</title>
</head>
<body>
<label for="cidade">Cidades:</label>
<select id="cidade">
<optgroup label="Estados Unidos">
<option value="chicago">Chicago</option>
<option value="denver">Denver</option>
</optgroup>
<optgroup label="França">
<option value="paris">Paris</option>
<option value="marselha">Marselha</option>
</optgroup>
<optgroup label="Inglaterra">
<option value="london">Londres</option>
</optgroup>
</select>
</body>
</html>
html
Construa sua marca com um ótimo domínio
Registre um nome de domínio
  • SSL Wildcard grátis para mais segurança
  • Registro privado grátis para mais pri­va­ci­dade
  • Domain Connect grátis para con­fi­gu­rar DNS fácil
Ir para o menu principal