Introdução aos formulários: a tag form e seus atributos

Entenda o que é um formulário HTML, como ele funciona e o papel dos atributos action e method no envio de dados.

Até agora, você aprendeu a criar páginas estáticas, que exibem informações. Mas e se você quiser interagir com o usuário? Coletar dados, como um nome, um e-mail, uma mensagem, ou permitir que ele faça um login? Para isso, usamos os formulários HTML.

Um formulário é uma seção de um documento que contém controles interativos que permitem ao usuário enviar informações para um servidor web. Pense em um formulário de contato, um formulário de login, ou um formulário de inscrição.

A base de todo formulário HTML é a tag <form>.

A tag <form>: o contêiner do formulário

A tag <form> é o contêiner que agrupa todos os elementos de um formulário (campos de texto, botões, seletores, etc.). Ela define o início e o fim do formulário e, mais importante, controla como os dados coletados serão enviados.

<form>
  <!-- Aqui dentro vão os campos do formulário -->
  <label for="nome">Nome:</label>
  <input type="text" id="nome" name="nome">
  <button type="submit">Enviar</button>
</form>

Atributos essenciais da tag <form>

A tag <form> possui alguns atributos muito importantes que definem o comportamento do formulário quando ele é enviado.

1. action

O atributo action especifica a URL (endereço) para onde os dados do formulário serão enviados quando o usuário clicar no botão de envio. É o "para onde" os dados vão.

  • Se o action for omitido, os dados serão enviados para a mesma URL da página atual.
  • A URL pode ser um script no servidor (ex: processa_dados.php, api/cadastro), ou até mesmo um endereço de e-mail (usando mailto:, mas isso é menos comum e não recomendado para formulários complexos).
<!-- Exemplo: enviando dados para um script no servidor -->
<form action="/processa_cadastro.php">
  <!-- Campos do formulário -->
</form>

<!-- Exemplo: enviando dados para uma API -->
<form action="https://api.meusite.com/usuarios" method="post">
  <!-- Campos do formulário -->
</form>

2. method

O atributo method especifica o método HTTP a ser usado para enviar os dados do formulário. É o "como" os dados vão. Os dois métodos mais comuns são GET e POST.

method="get"

  • Os dados do formulário são anexados à URL como parâmetros de consulta (query string). Você verá os dados na barra de endereço do navegador.
  • Exemplo: https://www.exemplo.com/busca?termo=html&categoria=web
  • Quando usar:
    • Para buscar ou recuperar dados (ex: formulários de busca).
    • Quando os dados não são sensíveis (não contêm senhas, informações pessoais).
    • Quando você quer que o usuário possa marcar a página com os resultados (pois a URL contém os dados da busca).
  • Limitações:
    • Limite de tamanho para a URL (varia entre navegadores, mas geralmente cerca de 2048 caracteres).
    • Não é seguro para dados sensíveis, pois os dados ficam visíveis na URL.
<form action="/buscar" method="get">
  <label for="termo">Buscar:</label>
  <input type="search" id="termo" name="termo">
  <button type="submit">Pesquisar</button>
</form>
<!-- Ao enviar, a URL pode ficar: /buscar?termo=seu_termo -->

method="post"

  • Os dados do formulário são enviados no corpo da requisição HTTP, não na URL. Eles não ficam visíveis na barra de endereço.
  • Quando usar:
    • Para enviar dados que modificam o estado do servidor (ex: criar um novo usuário, enviar um comentário, fazer um pedido).
    • Para dados sensíveis (senhas, informações de cartão de crédito).
    • Quando os dados são muito grandes para caber na URL.
  • Vantagens:
    • Mais seguro para dados sensíveis.
    • Não tem limite prático de tamanho para os dados.
<form action="/cadastrar_usuario" method="post">
  <label for="email">E-mail:</label>
  <input type="email" id="email" name="email">
  <label for="senha">Senha:</label>
  <input type="password" id="senha" name="senha">
  <button type="submit">Cadastrar</button>
</form>
<!-- Ao enviar, os dados não aparecem na URL -->

3. target

O atributo target especifica onde a resposta do servidor (a página para a qual o formulário redireciona) será exibida. Funciona de forma similar ao atributo target da tag <a>.

  • _self (padrão): A resposta é carregada na mesma janela/aba.
  • _blank: A resposta é carregada em uma nova janela/aba.
  • _parent: A resposta é carregada no frame pai.
  • _top: A resposta é carregada no corpo completo da janela.
  • nome_do_frame: A resposta é carregada em um frame nomeado.
<!-- Exemplo: abrir a página de sucesso em uma nova aba -->
<form action="/sucesso" method="post" target="_blank">
  <!-- Campos do formulário -->
  <button type="submit">Finalizar Compra</button>
</form>

4. autocomplete

O atributo autocomplete controla se o navegador deve oferecer sugestões de preenchimento automático para os campos do formulário.

  • on (padrão): O navegador pode preencher automaticamente.
  • off: O navegador não deve preencher automaticamente.
<!-- Exemplo: desativar autocomplete para um formulário de login (por segurança) -->
<form action="/login" method="post" autocomplete="off">
  <label for="usuario">Usuário:</label>
  <input type="text" id="usuario" name="usuario" autocomplete="username">
  <label for="senha">Senha:</label>
  <input type="password" id="senha" name="senha" autocomplete="current-password">
  <button type="submit">Entrar</button>
</form>

Nota: Você também pode usar o atributo autocomplete em campos input individuais para um controle mais granular.

O atributo name nos campos do formulário

Embora não seja um atributo da tag <form>, o atributo name é fundamental para os campos de formulário (como <input>, <textarea>, <select>).

  • O name é o identificador que o servidor usará para receber o valor daquele campo.
  • Quando o formulário é enviado, os dados são transmitidos como pares nome=valor.
<form action="/enviar" method="post">
  <label for="email">Seu E-mail:</label>
  <input type="email" id="email" name="email_usuario"> <!-- 'email_usuario' será o nome que o servidor receberá -->
  <label for="mensagem">Mensagem:</label>
  <textarea id="mensagem" name="texto_mensagem"></textarea> <!-- 'texto_mensagem' será o nome -->
  <button type="submit">Enviar</button>
</form>

Resumindo

  • A tag <form> é o contêiner para todos os elementos de um formulário.
  • action: Define a URL para onde os dados serão enviados.
  • method: Define o método HTTP de envio (GET ou POST).
    • GET: Dados na URL, visíveis, limite de tamanho, para busca.
    • POST: Dados no corpo da requisição, invisíveis, sem limite de tamanho, para envio de dados sensíveis ou que modificam o servidor.
  • target: Define onde a resposta do servidor será exibida (_self, _blank, etc.).
  • autocomplete: Controla o preenchimento automático do navegador.
  • O atributo name em cada campo é crucial para identificar os dados no servidor.

Com a tag <form> e seus atributos, você tem a base para começar a coletar informações dos seus usuários!