0Pricing
HTML Academy · Aula

O elemento form: action, method e enctype

Configurar um elemento form com action, method e enctype.

O elemento form: action, method e enctype é uma aula grátis de HTML Academy no CoddyKit. Esta é a aula 1 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de HTML Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de HTML Academy inclui 4 aulas no total.

O que é um formulário?

Os formulários HTML são a principal maneira de os usuários enviarem dados a um servidor:

  • Login e cadastro
  • Consultas de pesquisa
  • Finalização da compra e pagamento
  • Contato e feedback

Todo formulário começa com o elemento <form>.

O elemento form

O elemento <form> envolve todos os controles do formulário:

<form action="/submit" method="post">
  <!-- form controls go here -->
  <button type="submit">Send</button>
</form>
<!-- When the user submits, the browser sends the form data
     to the URL specified in action using the method specified -->

O atributo action

O atributo action especifica para onde os dados do formulário são enviados:

<form action="/api/login">...</form>      <!-- relative path -->
<form action="https://api.example.com/form">...</form>  <!-- absolute -->
<form action="">...</form>                 <!-- current URL (empty) -->
<form>...</form>                           <!-- no action = current URL -->

O atributo method

O atributo method controla como os dados são enviados:

<form method="get">...</form>
<!-- GET: appends data to URL as query string
     example.com/search?q=html&sort=date
     Used for: search forms, filters, bookmarkable results -->

<form method="post">...</form>
<!-- POST: sends data in the request body
     Data is not visible in the URL
     Used for: login, registration, file uploads, sensitive data -->

GET vs POST

GET e POST têm características diferentes:

  • GET — dados na URL (comprimento limitado), pode ser salvo nos favoritos, armazenado em cache e é idempotente
  • POST — dados no corpo (sem limite de tamanho), não pode ser salvo nos favoritos, não é armazenado em cache e não é idempotente

Regra prática: se o envio não alterar o estado do servidor → GET; se alterar → POST.

O atributo enctype

O atributo enctype controla como os dados do formulário são codificados em solicitações POST:

<!-- Default: URL-encoded (text/form fields) -->
<form method="post" enctype="application/x-www-form-urlencoded">

<!-- For file uploads: multipart -->
<form method="post" enctype="multipart/form-data">
  <input type="file" name="avatar">
</form>

<!-- Plain text (rare): -->
<form method="post" enctype="text/plain">

Atributo novalidate

O atributo novalidate desativa a validação integrada do navegador:

<form action="/submit" method="post" novalidate>
  <!-- Validation handled by JavaScript instead -->
  <input type="email" name="email">
  <button type="submit">Submit</button>
</form>

Atributo target em form

O atributo target controla onde a resposta é exibida:

<form action="/search" target="_blank">
  <!-- Response opens in a new tab -->
</form>
<!-- Values: _blank, _self, _parent, _top, or a frame name -->
<!-- Rarely used — most forms stay on the same page or use AJAX -->

autocomplete em form

O atributo autocomplete controla o preenchimento automático do navegador:

<!-- Off: disable autofill for the entire form -->
<form autocomplete="off">

<!-- On (default): allow autofill -->
<form autocomplete="on">

<!-- Better: control at the field level:
<input type="email" autocomplete="email">
<input type="current-password" autocomplete="current-password">
-->

Envio de formulário com JavaScript

Impeça o envio padrão e gerencie-o com JavaScript:

<form id="contact-form" action="/contact" method="post">
  <input type="text" name="name">
  <button type="submit">Send</button>
</form>

<script>
document.getElementById('contact-form').addEventListener('submit', async (e) => {
  e.preventDefault();  // stop normal browser submission
  const data = new FormData(e.target);
  const res = await fetch('/contact', { method: 'POST', body: data });
  // handle response...
});
</script>

action e method em conjunto

Exemplo completo de formulário com action e method corretos:

<form action="/api/newsletter" method="post">
  <label for="email">Email address</label>
  <input type="email" id="email" name="email" required>
  <button type="submit">Subscribe</button>
</form>
<!-- POST because: creating a subscription = server state change -->

Verificação rápida

Qual método de formulário deve ser usado ao enviar um arquivo?

Recapitulação: elemento form

Princípios essenciais do elemento form:

  • action — URL que recebe os dados do formulário
  • method="get" — dados na URL (pesquisas, filtros)
  • method="post" — dados no corpo (dados confidenciais, alterações de estado)
  • enctype="multipart/form-data" — obrigatório para envio de arquivos
  • novalidate — desativa a validação do navegador

Perguntas Frequentes

A aula “O elemento form: action, method e enctype” é grátis?

Sim — o texto completo de “O elemento form: action, method e enctype” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de HTML Academy, atualize para CoddyKit PRO. O curso de HTML Academy inclui 4 aulas no total.

O que vou aprender em “O elemento form: action, method e enctype”?

Configurar um elemento form com action, method e enctype. Você pratica HTML Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar HTML Academy?

Nenhuma experiência prévia é necessária. HTML Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 1 de 4.

Quanto tempo leva a aula “O elemento form: action, method e enctype”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de HTML Academy?

Sim. Cada aula de HTML Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

  1. O elemento form: action, method e enctype
  2. Tipos de input: text, password, email, number e tel
  3. O elemento label e a acessibilidade
  4. O elemento button: submit, reset e button
← Voltar para HTML Academy