Atributo action do HTML

O atributo action do HTML especifica a URL para onde os dados do formulário devem ser enviados quando o formulário é submetido. O seu valor é o destino que processa os dados enviados — geralmente um script ou endpoint do lado do servidor.

Você pode usar este atributo apenas no elemento <form>. Quando um usuário aciona um controle de envio, o navegador reúne os campos nomeados do formulário, os codifica e envia uma requisição para o endereço definido em action. Esta página explica como o action se comporta, o que acontece quando ele é omitido, como ele interage com outros atributos do formulário e como um único botão pode substituí-lo com formaction.

Sintaxe

<form action="URL"></form>

A URL pode ser de dois tipos:

Absoluta — uma URL completa incluindo o esquema e o host, por exemplo https://api.example.com/submit. Use esta opção quando o formulário precisar enviar dados para uma origem diferente (um domínio, subdomínio ou esquema diferente).
Relativa — um caminho resolvido em relação à URL do documento atual, por exemplo /form/submit ou save.php. Esta é a escolha mais comum quando o formulário envia os dados de volta para o seu próprio site.

Exemplo

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <form action="/form/submit">
      <label for="fname">Name</label>
      <input type="text" name="FirstName" id="fname" value="Mary"/><br /><br />
      <label for="lname">Surname</label>
      <input type="text" name="LastName" id="lname" value="Thomson"/><br /><br />
      <input type="submit" value="Submit"/>
    </form>
  </body>
</html>

Experimente Você Mesmo »

Aqui usamos um caminho relativo, portanto os dados são enviados para /form/submit no mesmo domínio que a página atual. Para enviar para outro domínio, use uma URL absoluta como https://example.com/some-page.

O que acontece quando `action` é omitido

Se você omitir o action (ou definir como uma string vazia), o formulário é submetido para a URL da página atual. Este é um padrão válido e comum: uma página pode exibir o formulário e também processar sua própria submissão.

<!-- Both of these submit back to the URL the form was loaded from -->
<form method="post">...</form>
<form action="" method="post">...</form>

Lembre-se de que submeter para a URL atual com o método GET padrão acrescenta os campos do formulário à URL como uma query string, recarregando a página com esses valores visíveis na barra de endereços.

Como `action` interage com outros atributos do formulário

O atributo action nunca funciona sozinho — ele define para onde os dados vão, enquanto outros atributos do <form> definem como eles chegam lá:

method — escolhe o método HTTP. Com GET (o padrão), os campos codificados são acrescentados à URL do action como uma query string, de modo que a URL se torna action?name=value&.... Com POST, os campos são enviados no corpo da requisição, mantendo a URL limpa.
enctype — define como o corpo é codificado e só importa com POST. O padrão application/x-www-form-urlencoded é adequado para texto; você precisa de multipart/form-data quando o formulário inclui um upload de arquivo (<input type="file">).
target — decide onde a resposta é exibida, por exemplo _self (mesma aba, padrão), _blank (nova aba), ou o nome de um <iframe>.

Você pode saber mais sobre esses atributos na referência da tag <form> e no guia completo de formulários HTML.

URLs absolutas vs. relativas: considerações

Escolher entre uma action absoluta e uma relativa vai além de uma preferência de estilo:

URLs relativas mantêm o formulário vinculado ao site que o serviu. Elas sobrevivem à migração do site para um novo domínio ou à troca entre http e https, e mantêm o envio na mesma origem, evitando complicações de origem cruzada.
URLs absolutas são necessárias quando você precisa enviar dados para uma origem diferente (por exemplo, um processador de formulários de terceiros ou um host de API separado). Seja cuidadoso aqui: um POST para outra origem é uma requisição de origem cruzada. O servidor receptor deve aceitá-la, e a requisição pode estar sujeita às regras de CORS para as partes com scripts da sua página.

Uma nota de segurança: os formulários podem enviar dados para qualquer origem que você colocar em action, e os navegadores enviarão os cookies dessa origem junto com a requisição. Este é exatamente o mecanismo por trás do cross-site request forgery (CSRF) — uma página maliciosa pode hospedar um formulário que envia dados para o seu site. Por isso, defina action apenas para origens em que você confia e proteja qualquer endpoint que altere estado com um token anti-CSRF validado no servidor. Prefira ações relativas (mesma origem) a menos que tenha um motivo concreto para enviar para outro lugar.

Substituindo `action` com `formaction`

Um único formulário pode ter mais de um botão de envio, e cada um pode enviar os dados para um lugar diferente usando o atributo formaction. Quando presente no botão ou input que acionou o envio, formaction substitui o action do próprio formulário. (Os atributos relacionados formmethod, formenctype e formtarget substituem method, enctype e target da mesma forma.)

<!DOCTYPE html>
<html>
  <head>
    <title>formaction example</title>
  </head>
  <body>
    <form action="/articles/publish" method="post">
      <label for="title">Title</label>
      <input type="text" name="title" id="title" value="My draft"/><br /><br />

      <!-- Uses the form's action: /articles/publish -->
      <button type="submit">Publish</button>

      <!-- Overrides the action just for this button -->
      <button type="submit" formaction="/articles/save-draft">Save draft</button>
    </form>
  </body>
</html>

Ambos os botões submetem os mesmos campos, mas "Publish" envia para /articles/publish enquanto "Save draft" envia para /articles/save-draft. O formaction é suportado em <button type="submit"> e <input type="submit"> (e <input type="image">), e não tem efeito em controles que não sejam de envio.

Prática

Qual é a função do atributo 'action' do HTML?

Especifica a URL para onde os dados do formulário são enviados quando o formulário é submetido.Altera a cor do texto dentro de um formulário.Adiciona estilização adicional a elementos HTML.Define o tipo de elemento de formulário (ex.: input, select).Quando omitido, impede que o formulário seja submetido.