Estrutura dos formulários HTML

Para que servem os formulários HTML?

Os formulários HTML são usados para coletar dados dos usuários. Eles são essenciais para interações em sites, como cadastros, pesquisas e envio de informações.

O elemento Form

O elemento <form> é usado para criar um formulário HTML. Ele envolve todos os elementos de entrada de dados, como campos de texto, caixas de seleção, botões de envio, etc.

<form>
  <label for="nome">Nome:</label>
  <input type="text" id="nome" name="nome">
  <input type="submit" value="Enviar">
</form>

Como funciona o formulário HTML?

Quando um formulário é enviado, os dados inseridos pelos usuários são enviados para um servidor para processamento. O comportamento do envio é definido pelos atributos do elemento <form>.

<form method="post">
  <label for="email">Email:</label>
  <input type="email" id="email" name="email">
  <input type="submit" value="Enviar">
</form>

Definindo o destino do formulário com action

O atributo action especifica a URL para a qual os dados do formulário serão enviados quando o formulário for submetido. Isso permite que o servidor saiba para onde direcionar os dados para processamento.

<form action="/processa-dados">
  <label for="usuario">Usuário:</label>
  <input type="text" id="usuario" name="usuario">
  <input type="submit" value="Enviar">
</form>

O valor padrão do atributo action é o próprio endereço da página que contém o formulário.

Definindo o método de envio com method

O atributo method define o método HTTP usado para enviar os dados do formulário. Os valores comuns são GET e POST. O método GET é usado geralmente para pegar informações, enquanto POST envia os dados informados para serem processados.

<form method="get">
  <label for="query">Pesquisa:</label>
  <input type="text" id="query" name="query">
  <input type="submit" value="Buscar">
</form>

Nota: No método GET, os valores são organizados na querystring da URL.

O valor padrão do atributo method é GET.

Como desabilitar o autocompletar dos campos do formulário?

O atributo autocomplete indica se o navegador deve ou não preencher automaticamente os campos do formulário com base em entradas anteriores do usuário. Isso pode ser útil para melhorar a segurança e a privacidade.

<form autocomplete="off">
  <label for="senha">Senha:</label>
  <input type="password" id="senha" name="senha">
  <input type="submit" value="Entrar">
</form>

O valor padrão do atributo autocomplete é on.

Detalhando os valores de autocomplete:

Definindo o tipo de codificação dos dados do formulário

O atributo enctype especifica como os dados do formulário devem ser codificados ao serem enviados ao servidor. É especialmente importante para uploads de arquivos. Os valores comuns são application/x-www-form-urlencoded, multipart/form-data, e text/plain.

<form action="/upload" method="post" enctype="multipart/form-data">
  <label for="arquivo">Arquivo:</label>
  <input type="file" id="arquivo" name="arquivo">
  <input type="submit" value="Enviar">
</form>

Detalhando os valores de enctype: