Um formulário HTML (HTML form) permite que você se comunique de um jeito fácil e direto com os seus visitantes. É possível usar diversos elementos e atributos para adaptar formulários a necessidades específicas.

O que é formulário HTML?

Formulário HTML é um formulário interativo adicionado em seu site que possibilita que os visitantes enviem dados personalizados. As informações inseridas são enviadas ao respectivo servidor web para serem processadas. Para integrar esse tipo de interação aos seus documentos HTML, você precisa usar a tag <form>. Essa tag HTML pode ser personalizada com diversos elementos e atributos para atender às suas necessidades. Você pode usar diferentes 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 formulário HTML, você deve declarar essa intenção explicitamente na sua política de privacidade, obter o consentimento dos usuários conforme exigido por legislações como a LGPD e garantir que a transmissão das informações seja feita com criptografia SSL/TLS.

Hospedagem que se adapta às suas ambições
  • Fique online com 99,99% de tempo de atividade e segurança robusta
  • Aumente o desempenho 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 à diversidade de opções de entrada oferecida pelo formulário HTML, ele pode ser usado para várias finalidades, incluindo:

  • Formulários de contato para fazer consultas ou pedidos
  • Formulários de registro de contas ou newsletters
  • Formulários para feedbacks
  • Pesquisas
  • Formulários de suporte e tickets de atendimento
  • Formulários de login para acessar áreas restritas do site

Teoricamente, quase qualquer tipo de interação entre os visitantes e o site pode ser realizado com um formulário HTML.

Qual é a sintaxe da tag HTML <form>?

Um formulário HTML é iniciado com a tag <form> e termina com a tag de fechamento </form>. Entre as duas tags, você pode adicionar diferentes elementos e atributos, que veremos detalhadamente mais adiante. A sintaxe básica dos formulários é a seguinte:

<form> Elementos </form>
html

Quais elementos podem ser usados em um formulário HTML?

Você pode usar diversos elementos HTML para personalizar seu formulário HTML. Estes são alguns deles:

Elemento HTML Descrição
<button> Botão clicável simples
<datalist> Opções para o elemento <input> apresentado como uma lista suspensa
<fieldset> Agrupa os dados relacionados
<input> Coleta dados personalizados 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 formulários HTML

Existem diversos atributos HTML que você pode usar para personalizar um formulário com diferentes funções. Os atributos mais importantes são:

  • action: Especifica o URL para o qual os dados do formulário serão enviados
  • autocomplete: Indica ao navegador se um campo de entrada deve ser preenchido automaticamente
  • enctype: Define como os dados devem ser codificados quando enviados ao servidor
  • method: Especifica 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 formulário, que pode ser usado em JavaScript para acessar o formulário
  • accept-charset: Especifica a codificação de caracteres que será usada ao enviar os dados do formulário

Exemplos de formulários HTML

Para finalizar, apresentaremos dois exemplos de como funciona um formulário HTML. Começaremos criando um formulário simples que permite ao visitante inserir seu nome e sobrenome e enviar essas informaçõ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 formulá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 formulário e enviar essas informaçõ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 selecionar diferentes 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 privacidade
  • Domain Connect grátis para configurar DNS fácil
Este artigo foi útil?
Ir para o menu principal