Curso de HTML / Estrutura de um formulário e diferença entre GET e POST

Um form agrupa controles cujos valores são enviados pelos usuários. Para entender para onde vão os dados, distingua os atributos name dos controles, o destino em action e o método da requisição em method. O HTML monta a interface de entrada. Para processar os envios destes exemplos e salvar ou buscar dados no servidor, é preciso um manipulador do lado do servidor.

Construa um pequeno formulário de pesquisa

O exemplo aceita um termo de pesquisa. Substitua /search por um endpoint real antes de usá-lo em um site. Compare os atributos for e id, bem como o nome da chave de envio em Conectar corretamente os rótulos e entradas.

<form action="/search" method="get">
  <label for="keyword">Termo pesquisado</label>
  <input id="keyword" name="q" type="search">
  <button type="submit">Pesquisar</button>
</form>

O atributo for de label corresponde ao id de input, dando um nome ao campo. name="q" identifica o valor nos dados enviados. Digitar “HTML” geralmente produz uma URL contendo ?q=HTML. Um id sem name ainda pode conectar um rótulo, mas o valor do campo normalmente não é incluído no envio.

action define o destino; method escolhe como o navegador envia os valores. Se ambos forem omitidos, o formulário é enviado para a URL atual usando GET por padrão. Experimente um termo com espaços ou letras não ASCII: a barra de endereço pode mostrar uma representação codificada desses caracteres. Trata-se de um formato de transporte, e não de um indício de que a entrada desapareceu.

Escolha GET ou POST

GET coloca os dados do formulário na cadeia de consulta da URL. É adequado para pesquisas e filtros que os usuários podem favoritar ou compartilhar. Não o use para enviar senhas ou outros valores sensíveis, pois os dados ficam visíveis na URL. POST envia os dados do formulário no corpo da requisição e é comumente usado para operações que alteram o estado do servidor, como criar uma conta ou enviar uma mensagem. POST não criptografa os dados por si só; envios sensíveis exigem HTTPS e um gerenciamento adequado no lado do servidor.

<form action="/contact" method="post">
  <label for="message">Mensagem</label>
  <textarea id="message" name="message"></textarea>
  <button type="submit">Enviar</button>
</form>

O caminho /contact é ilustrativo; sem um manipulador ele pode retornar um erro. Para tentar um GET no documento atual, comece pelo primeiro formulário, mantenha method="get" e remova seu atributo action. Uma barra inicial é relativa à raiz do site, e não a um endpoint funcional em um arquivo local. Não envie informações pessoais reais a um endpoint de exemplo.

Inspecione os dados antes de enviá-los

Salve o exemplo completo sob inspect-form.html. Omitir action aponta para o documento atual. Uma ação escrita explicitamente deve ser uma URL válida e não vazia, então omita o atributo em vez de escrever action="" para significar a página atual.

<!doctype html>
<html lang="pt-BR">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Exercício sobre os dados do formulário</title>
</head>
<body>
  <h1>Examinar os campos enviados</h1>
  <form id="inspect-form" method="get">
    <p><label for="query">Termo pesquisado</label>
      <input id="query" name="q" value="HTML" required></p>
    <p><label for="limit">Número máximo de resultados</label>
      <input id="limit" name="limit" value="5" readonly></p>
    <p><label for="coupon">Cupom indisponível</label>
      <input id="coupon" name="coupon" value="DEMO" disabled></p>
    <p><label><input type="checkbox" name="news" value="yes" checked> Notícias</label></p>
    <button type="submit">Examinar os valores na URL</button>
  </form>
</body>
</html>

Após abrir o arquivo, execute esta linha no Console das ferramentas de desenvolvimento para inspecionar os nomes e valores dos campos atuais. FormData é uma interface de programação de aplicações (API) da Web que constrói uma lista de pares nome–valor provenientes do formulário. Este comando em si não envia os dados pela rede e não executa a validação das restrições.

Array.from(new FormData(document.getElementById("inspect-form")).entries())

[["q", "HTML"], ["limit", "5"], ["news", "yes"]]

Inicialmente, o limit em modo somente leitura está incluído e o coupon desativado é omitido. Desmarque Notícias e sua entrada também desaparece. Apagar o termo de busca ainda permite inspecionar um valor q vazio, mas o botão de envio dispara a validação obrigatória. Compare a construção da lista de dados com as verificações interativas de envio.

Em uma página servida por um servidor, abra Rede, envie e inspecione a requisição correspondente. Um documento local file:// não é equivalente a um GET ou POST HTTP contra um servidor. Um 404 ou 405 pode refletir o destino ou seu método suportado; remover os nomes dos campos ou os atributos de validação não resolve este problema.

Regras dos atributos de submissão HTML · Construtor FormData MDN

Por que um campo poderia estar ausente nos dados enviados?

Um controle desativado não pode ser modificado e não é enviado. Se você precisar que um valor não modificável seja enviado, verifique se esse tipo de controle suporta readonly. Caixas de seleção e botões de opção só contribuem com valores quando estão marcados. Um upload de arquivo requer parâmetros adicionais de formulário e processamento no lado do servidor; adicionar apenas um campo de arquivo a este exemplo não é suficiente. Teste as restrições que bloqueiam o envio em Validação de formulário com Obrigatório, Comprimento e Limites de Faixa.

Se o resultado for inesperado, verifique primeiro o name de cada controle, depois se um controle selecionável está marcado, e então se a URL e o método correspondem ao servidor. O painel de Rede de um navegador pode exibir a requisição mesmo quando o servidor responde com um erro. Uma requisição correta não implica que o servidor tenha registrado o valor. Veja a referência do formulário MDN para detalhes sobre o envio.