Imagem Destaque
Criado em

Formulários no HTML

Formulários são uma das partes mais importantes da web.
É por meio deles que o usuário envia dados, faz cadastros, entra em contato, pesquisa, autentica acesso, faz compras e interage com sistemas.
Neste post, você vai entender os principais elementos de formulário do HTML com profundidade, clareza e foco em boas práticas.

O que são formulários no HTML?

Formulários são estruturas usadas para coletar informações do usuário.

Eles podem servir para:

No HTML, o formulário não é apenas um conjunto visual de campos.
Ele é uma estrutura semântica e funcional que organiza entradas, rótulos, agrupamentos e ações de envio.

Por que formulários merecem tanta atenção?

Formulários influenciam diretamente pontos críticos da experiência.

Conversão?

Muitos objetivos de negócio dependem deles.

Usabilidade?

Campos mal montados geram erro, atrito e abandono.

Acessibilidade?

Sem estrutura correta, muita gente encontra dificuldade para preencher.

Integração?

É pelos formulários que dados chegam ao backend, CRM, APIs e automações.

Clareza?

Um bom formulário orienta o usuário sem confusão.

O que é a tag <form>?

A tag <form> é o container principal de um formulário.

Ela agrupa todos os controles usados para capturar e enviar dados.

Exemplo básico?

<form action="/enviar" method="post">
  <label for="nome">Nome</label>
  <input id="nome" name="nome" type="text" />

  <button type="submit">Enviar</button>
</form>

O que normalmente fica dentro de form?

O que faz o atributo action?

O atributo action define o destino para onde os dados do formulário serão enviados.

Exemplo?

<form action="/contato/enviar" method="post"></form>

O que isso significa?

Quando o formulário for enviado, os dados irão para esse caminho.

Sempre preciso usar action?

Em projetos modernos, às vezes o envio é tratado com JavaScript, frameworks ou endpoints dinâmicos. Mas semanticamente, action continua sendo um conceito central do formulário.

O que faz o atributo method?

O atributo method define como os dados serão enviados.

Os dois valores mais comuns são:

Quando usar method="get"?

Use get quando os dados servirem para consulta, navegação ou filtragem.

Casos comuns?

Exemplo?

<form action="/buscar" method="get">
  <label for="q">Buscar</label>
  <input id="q" name="q" type="search" />
  <button type="submit">Buscar</button>
</form>

O que acontece com os dados?

Eles costumam aparecer na URL.

Exemplo de resultado:

/buscar?q=html

Vantagem?

A URL pode ser compartilhada e reutilizada.

Quando usar method="post"?

Use post quando os dados representarem envio real de informação.

Casos comuns?

Exemplo?

<form action="/cadastro" method="post">
  <label for="email">E-mail</label>
  <input id="email" name="email" type="email" />

  <button type="submit">Cadastrar</button>
</form>

Regra prática?

O que é a tag <label>?

A tag <label> é o rótulo de um campo.

Ela diz ao usuário, de forma clara, o que aquele input representa.

Exemplo?

<label for="email">E-mail</label> <input id="email" name="email" type="email" />

Por que label é tão importante?

Porque melhora:

Regra prática?

Campo sem rótulo quase sempre é um problema.

Como associar label e campo corretamente?

A forma mais comum é usar:

Exemplo?

<label for="telefone">Telefone</label>
<input id="telefone" name="telefone" type="tel" />

Como isso funciona?

O for="telefone" aponta para o id="telefone".

Assim, o rótulo fica semanticamente associado ao campo.

Posso envolver o campo dentro do label?

Sim. Essa também é uma forma válida em alguns casos.

Exemplo?

<label>
  Aceito os termos
  <input type="checkbox" name="aceite" />
</label>

Quando isso é comum?

Especialmente em:

Regra prática?

Ambas as formas funcionam. Mas a associação com for + id costuma ser mais clara e previsível em muitos projetos.

O que é a tag <input>?

A tag <input> é um dos elementos mais versáteis do HTML.

Ela pode representar muitos tipos de entrada diferentes, dependendo do atributo type.

Exemplo básico?

<input type="text" name="nome" />

O que o input pode ser?

O que faz o atributo name?

O atributo name é o nome do dado que será enviado pelo formulário.

Exemplo?

<input id="nome" name="nome" type="text" />

Por que isso importa?

Sem name, o campo pode até existir visualmente, mas normalmente não será enviado da forma esperada no formulário.

Regra prática?

Todo campo relevante para envio deve ter name.

O que faz o atributo placeholder?

O placeholder mostra um texto de exemplo dentro do campo.

Exemplo?

<input type="email" name="email" placeholder="voce@exemplo.com" />

O placeholder substitui o label?

Não.

Esse é um erro comum.

Por quê?

Porque o placeholder:

Regra prática?

Use placeholder como apoio, não como rótulo principal.

O que faz o atributo required?

O atributo required indica que o campo é obrigatório.

Exemplo?

<input id="email" name="email" type="email" required />

O que isso faz?

O navegador pode impedir o envio até que o campo seja preenchido.

Quando usar?

Quando aquele dado for realmente necessário para o objetivo do formulário.

O que faz o atributo value?

O atributo value define um valor inicial para alguns tipos de campo.

Exemplo em input?

<input type="text" name="nome" value="Maria" />

Exemplo em radio?

<input type="radio" name="plano" value="premium" />

Importante?

Em alguns inputs, value representa o conteúdo inicial. Em outros, representa o valor técnico enviado.

Como funciona input type="text"?

Esse é o tipo padrão para texto simples.

Exemplo?

<label for="nome">Nome</label> <input id="nome" name="nome" type="text" />

Quando usar?

Para:

Como funciona input type="email"?

É usado para e-mail.

Exemplo?

<label for="email">E-mail</label> <input id="email" name="email" type="email" />

Qual a vantagem?

O navegador reconhece o tipo e pode ajudar com:

Como funciona input type="password"?

É usado para senha.

Exemplo?

<label for="senha">Senha</label>
<input id="senha" name="senha" type="password" />

O que ele faz?

Oculta visualmente os caracteres digitados.

Boa prática?

Se o contexto permitir, pode ser útil combinar com botão de mostrar/ocultar senha via JavaScript.

Como funciona input type="tel"?

É usado para telefone.

Exemplo?

<label for="telefone">Telefone</label>
<input id="telefone" name="telefone" type="tel" />

Vantagem?

Em dispositivos móveis, pode abrir teclado mais adequado ao preenchimento de número.

Como funciona input type="url"?

É usado para URLs.

Exemplo?

<label for="site">Site</label> <input id="site" name="site" type="url" />

Quando usar?

Para:

Como funciona input type="search"?

É usado para busca.

Exemplo?

<form action="/buscar" method="get">
  <label for="busca">Buscar</label>
  <input id="busca" name="q" type="search" />
  <button type="submit">Buscar</button>
</form>

Quando usar?

Em:

Como funciona input type="number"?

É usado para valores numéricos.

Exemplo?

<label for="quantidade">Quantidade</label>
<input id="quantidade" name="quantidade" type="number" min="1" max="10" />

Quando usar?

Para entradas numéricas reais, como:

Cuidado?

Nem todo dado que parece número deve ser number.

Exemplos como CPF, telefone ou CEP muitas vezes fazem mais sentido como texto, porque:

Como funciona input type="range"?

É usado para selecionar valores dentro de uma faixa.

Exemplo?

<label for="nivel">Nível</label>
<input id="nivel" name="nivel" type="range" min="0" max="100" value="50" />

Quando usar?

Para:

Como funcionam os inputs de data e tempo?

HTML oferece alguns tipos específicos.

Data?

<input type="date" name="data" />

Hora?

<input type="time" name="hora" />

Data e hora local?

<input type="datetime-local" name="agendamento" />

Mês?

<input type="month" name="mes" />

Semana?

<input type="week" name="semana" />

Vantagem?

Esses tipos ajudam o navegador a oferecer controles nativos e melhorar a experiência, especialmente em mobile.

Como funciona input type="color"?

É usado para seleção de cor.

Exemplo?

<label for="cor">Cor principal</label>
<input id="cor" name="cor" type="color" value="#ff6600" />

Quando usar?

Em:

Como funciona input type="checkbox"?

É usado para marcações independentes.

Exemplo?

<label for="aceite">
  <input id="aceite" name="aceite" type="checkbox" />
  Aceito os termos de uso
</label>

Quando usar?

Para:

Regra prática?

Checkbox representa algo que pode estar marcado ou desmarcado.

Como funciona input type="radio"?

É usado para escolha única dentro de um grupo.

Exemplo?

<label>
  <input type="radio" name="plano" value="basico" />
  Plano básico
</label>

<label>
  <input type="radio" name="plano" value="premium" />
  Plano premium
</label>

Por que isso funciona como grupo?

Porque os dois inputs compartilham o mesmo name.

Quando usar?

Quando o usuário deve escolher apenas uma opção entre várias.

Como funciona input type="file"?

É usado para upload de arquivos.

Exemplo?

<label for="curriculo">Currículo</label>
<input id="curriculo" name="curriculo" type="file" />

Quando usar?

Para:

Observação importante?

Formulários com upload normalmente exigem atenção adicional na integração com backend.

Como funciona input type="hidden"?

É usado para enviar um valor invisível ao usuário.

Exemplo?

<input type="hidden" name="origem" value="campanha-google" />

Quando usar?

Para:

Atenção?

Como está no HTML, esse valor não deve ser tratado como informação segura por si só.

Como funcionam input type="submit", reset e button?

Submit?

Envia o formulário.

<input type="submit" value="Enviar" />

Reset?

Restaura os valores iniciais.

<input type="reset" value="Limpar" />

Button?

Cria um botão genérico.

<input type="button" value="Abrir modal" />

Regra prática?

Hoje, na maior parte dos casos, a tag <button> costuma ser mais flexível e expressiva do que input para botões.

O que é a tag <textarea>?

A tag <textarea> é usada para texto em múltiplas linhas.

Exemplo?

<label for="mensagem">Mensagem</label>
<textarea id="mensagem" name="mensagem" rows="5"></textarea>

Quando usar?

Para:

Diferença para input text?

input é para linha única. textarea é para texto mais extenso.

O que é a tag <button>?

A tag <button> representa um botão.

Ela pode ser usada para enviar formulário ou executar ações.

Exemplo de envio?

<button type="submit">Enviar formulário</button>

Exemplo de botão comum?

<button type="button">Abrir ajuda</button>

Exemplo de reset?

<button type="reset">Limpar</button>

Por que button costuma ser melhor?

Porque aceita conteúdo mais flexível, como:

O que faz o atributo type em <button>?

Ele define o comportamento do botão.

type="submit"?

Envia o formulário.

type="button"?

Botão comum, sem envio automático.

type="reset"?

Reseta o formulário.

Boa prática?

Sempre defina o type explicitamente em botões dentro de formulários. Isso evita comportamentos inesperados.

O que é a tag <select>?

A tag <select> cria um campo de seleção em lista.

Exemplo?

<label for="servico">Serviço</label>
<select id="servico" name="servico">
  <option value="">Selecione</option>
  <option value="site">Criação de site</option>
  <option value="lp">Landing page</option>
</select>

Quando usar?

Quando o usuário deve escolher entre opções pré-definidas.

Casos comuns?

O que é a tag <option>?

A tag <option> representa cada opção dentro de select ou datalist.

Exemplo?

<option value="premium">Plano premium</option>

O que o value faz?

É o valor enviado tecnicamente pelo formulário.

E o texto visível?

É o conteúdo entre abertura e fechamento da tag.

O que é a tag <optgroup>?

A tag <optgroup> agrupa opções dentro de um select.

Exemplo?

<select name="servico">
  <optgroup label="Sites">
    <option value="institucional">Site institucional</option>
    <option value="ecommerce">Loja virtual</option>
  </optgroup>

  <optgroup label="Campanhas">
    <option value="lp">Landing page</option>
    <option value="captacao">Página de captação</option>
  </optgroup>
</select>

Quando usar?

Quando houver muitas opções e fizer sentido organizá-las por categoria.

O que é a tag <fieldset>?

A tag <fieldset> agrupa campos relacionados dentro do formulário.

Exemplo?

<fieldset>
  <legend>Dados pessoais</legend>

  <label for="nome">Nome</label>
  <input id="nome" name="nome" type="text" />

  <label for="email">E-mail</label>
  <input id="email" name="email" type="email" />
</fieldset>

Por que isso é útil?

Porque ajuda a estruturar grandes formulários em blocos lógicos.

Casos comuns?

O que é a tag <legend>?

A tag <legend> é o título do fieldset.

Exemplo?

<fieldset>
  <legend>Informações do projeto</legend>
</fieldset>

Por que isso importa?

Ela dá contexto ao grupo de campos, o que melhora:

O que é a tag <datalist>?

A tag <datalist> fornece sugestões para um input.

Ela não limita obrigatoriamente o preenchimento às opções listadas, como acontece em select.

Exemplo?

<label for="cidade">Cidade</label>
<input id="cidade" name="cidade" list="lista-cidades" />

<datalist id="lista-cidades">
  <option value="São Paulo"></option>
  <option value="Belo Horizonte"></option>
  <option value="Curitiba"></option>
</datalist>

Quando usar?

Quando você quer oferecer sugestões, mas ainda permitir liberdade de preenchimento.

Diferença para select?

O que é a tag <output>?

A tag <output> exibe o resultado de um cálculo ou interação.

Exemplo?

<form oninput="resultado.value = Number(valor1.value) + Number(valor2.value)">
  <input id="valor1" type="number" value="0" />
  <input id="valor2" type="number" value="0" />
  <output name="resultado">0</output>
</form>

Quando usar?

Em:

O que é a tag <progress>?

A tag <progress> representa uma barra de progresso.

Exemplo?

<label for="upload">Upload</label>
<progress id="upload" value="60" max="100">60%</progress>

Quando usar?

Para indicar evolução de algo, como:

O que significam value e max?

O que é a tag <meter>?

A tag <meter> representa uma medida escalar dentro de uma faixa conhecida.

Exemplo?

<label for="forca">Força da senha</label>
<meter id="forca" min="0" max="100" value="72">72 de 100</meter>

Quando usar?

Para representar coisas como:

Diferença para progress?

Como estruturar um formulário simples e correto?

Exemplo?

<form action="/contato" method="post">
  <div>
    <label for="nome">Nome</label>
    <input id="nome" name="nome" type="text" required />
  </div>

  <div>
    <label for="email">E-mail</label>
    <input id="email" name="email" type="email" required />
  </div>

  <div>
    <label for="mensagem">Mensagem</label>
    <textarea id="mensagem" name="mensagem" rows="5" required></textarea>
  </div>

  <button type="submit">Enviar</button>
</form>

O que esse exemplo tem de bom?

Como estruturar um formulário maior e melhor organizado?

Exemplo?

<form action="/briefing" method="post">
  <fieldset>
    <legend>Dados pessoais</legend>

    <label for="nome">Nome</label>
    <input id="nome" name="nome" type="text" required />

    <label for="email">E-mail</label>
    <input id="email" name="email" type="email" required />
  </fieldset>

  <fieldset>
    <legend>Informações do projeto</legend>

    <label for="tipo">Tipo de projeto</label>
    <select id="tipo" name="tipo">
      <option value="">Selecione</option>
      <option value="site">Site institucional</option>
      <option value="lp">Landing page</option>
      <option value="ecommerce">Loja virtual</option>
    </select>

    <label for="descricao">Descrição</label>
    <textarea id="descricao" name="descricao" rows="6"></textarea>
  </fieldset>

  <fieldset>
    <legend>Preferências</legend>

    <label>
      <input type="checkbox" name="aceita_contato_whatsapp" />
      Aceito contato por WhatsApp
    </label>
  </fieldset>

  <button type="submit">Enviar briefing</button>
</form>

Como melhorar a acessibilidade de formulários?

Existem várias boas práticas fundamentais.

Use label em todos os campos?

Isso é essencial.

Agrupe campos relacionados?

Use fieldset e legend quando fizer sentido.

Não use placeholder como único identificador?

O campo precisa de rótulo real.

Marque erros e instruções com clareza?

Campos confusos geram abandono e erro.

Associe ajuda contextual ao campo quando necessário?

Você pode usar aria-describedby em cenários específicos.

Exemplo?

<label for="senha">Senha</label>
<input id="senha" name="senha" type="password" aria-describedby="ajuda-senha" />
<small id="ajuda-senha">Use pelo menos 8 caracteres.</small>

Garanta navegação por teclado?

Isso é indispensável.

Como melhorar a usabilidade de formulários?

Peça só o que for necessário?

Quanto mais atrito, maior o abandono.

Organize por blocos lógicos?

Isso reduz carga cognitiva.

Use rótulos claros?

Evite nomes vagos.

Escolha o tipo de campo certo?

Isso melhora preenchimento e reduz erros.

Mostre exemplos quando útil?

Mas sem substituir a identificação do campo.

Escreva botões com clareza?

Exemplo melhor:

<button type="submit">Enviar orçamento</button>

Em vez de:

<button type="submit">Enviar</button>

quando o contexto exigir mais precisão.

Quais são os erros mais comuns em formulários?

Campo sem label?

Erro clássico e sério.

Campo sem name?

Pode quebrar o envio dos dados.

Usar placeholder no lugar de label?

Prejudica usabilidade e acessibilidade.

Não definir type corretamente?

Reduz qualidade da experiência.

Botão sem type explícito?

Pode causar comportamento inesperado.

Pedir dados demais?

Aumenta abandono.

Não agrupar formulários longos?

Deixa a interface cansativa.

Usar number para dados que não são números operáveis?

Pode gerar problemas.

Não marcar obrigatoriedade quando necessário?

Usuário pode enviar formulário incompleto sem perceber.

Como decidir o campo certo?

Faça perguntas simples?

É um texto curto?

Use input type="text".

É um e-mail?

Use input type="email".

É senha?

Use input type="password".

É telefone?

Use input type="tel".

É um texto longo?

Use textarea.

É uma escolha única em lista fechada?

Use select.

É escolha única entre poucas opções?

Use radio.

É marcação independente?

Use checkbox.

É envio de arquivo?

Use file.

É busca?

Use search.

É uma ação de envio?

Use button type="submit".

Subgrupo prático das principais tags de formulário

Estrutura?

Identificação?

Entradas?

Ações?

Resultados e indicadores?

Subgrupo prático dos tipos mais usados de <input>

Texto?

<input type="text" name="nome" />

E-mail?

<input type="email" name="email" />

Senha?

<input type="password" name="senha" />

Telefone?

<input type="tel" name="telefone" />

Busca?

<input type="search" name="q" />

Número?

<input type="number" name="quantidade" />

Data?

<input type="date" name="data" />

Checkbox?

<input type="checkbox" name="aceite" />

Radio?

<input type="radio" name="plano" value="premium" />

Arquivo?

<input type="file" name="anexo" />

Resumo prático sobre formulários

Estrutura principal?

Identificação do campo?

Campo versátil?

Texto longo?

Lista de seleção?

Agrupamento?

Sugestão aberta?

Ação?

Resultado e medição?

Regras mais importantes?

Checklist rápido para revisar um formulário

Antes de publicar, vale conferir?

Conclusão

Formulários são um dos pontos mais sensíveis de qualquer interface.

Quando você estrutura bem um formulário, melhora:

Dominar formulários no HTML significa não apenas saber criar campos, mas saber orientar o usuário de forma lógica, eficiente e sem ruído.

Depois desse tema, o próximo passo natural costuma ser aprofundar em: