Guia Completo de Formulários HTML: Action e Method

Os formulários são uma parte fundamental de qualquer página web que precise receber dados do usuário. Eles permitem que o conteúdo digitado – como textos, seleções ou cliquesEventos no JavaScript: onClick, onChange e maisDescubra como os eventos em JavaScript, como onClick e onChange, possibilitam interações dinâmicas e melhoram a experiência do usuário em páginas web. em botões – seja enviado para alguma rota ou script que processará essas informações. Neste tutorial, vamos entender a estrutura básica de um formulário em HTML, explorando os atributos action e method, responsáveis por definir para onde e como os dados serão enviados.

A Tag <form>🔗

A tagTags e Elementos: Sintaxe e HierarquiaDescubra os fundamentos do HTML: aprenda sobre tags, elementos, hierarquia e boas práticas para criar páginas bem estruturadas e acessíveis. <form> delimita o espaço onde ficam os campos de entrada e as opções que o usuário pode preencher ou selecionar. Em outras palavras, é dentro dela que colocamos elementosTags e Elementos: Sintaxe e HierarquiaDescubra os fundamentos do HTML: aprenda sobre tags, elementos, hierarquia e boas práticas para criar páginas bem estruturadas e acessíveis. como <input>, botões de envio (por exemplo, <button type="submit">) e outros componentesTags e Elementos: Sintaxe e HierarquiaDescubra os fundamentos do HTML: aprenda sobre tags, elementos, hierarquia e boas práticas para criar páginas bem estruturadas e acessíveis. para coleta de dados.

O formato geral de um formulário é:

<form action="destino_do_formulario.php" method="POST">
  <!-- Campos de formulário -->
  <button type="submit">Enviar</button>
</form>

• Onde criar: Geralmente, posiciona-se o <form> em uma área da página onde se deseja receber dados de maneira organizada.
• Organização interna: Dentro do <form>, você pode agrupar campos, rótulos e botões de envio.

O Atributo action🔗

O atributo action indica _para onde_ os dados do formulário serão enviados ao clicar em um botão de envio (como Enviar). Se deixado em branco ou omitido, por padrão, o formulário será enviado para a mesma página atual.

<form action="processar.php" method="POST">
  <label for="nome">Nome:</label>
  <input type="text" id="nome" name="nome">
  <button type="submit">Enviar</button>
</form>

No exemplo acima, os dados preenchidos pelo usuário serão encaminhados ao arquivo processar.php.

O Atributo method🔗

O atributo method especifica como os dados do formulário serão enviados. Em geral, utilizam-se dois métodosClasses e Herança em ES6+Aprenda a dominar classes e herança em ES6+: escreva códigos JavaScript claros e eficientes com métodos, getters e setters.:

Exemplo (method GET):

<form action="buscar.php" method="GET">
  <label for="termo">Buscar termo:</label>
  <input type="text" id="termo" name="termo">
  <button type="submit">Buscar</button>
</form>

Exemplo (method POST):

<form action="salvar.php" method="POST">
  <label for="usuario">Usuário:</label>
  <input type="text" id="usuario" name="usuario">
  <button type="submit">Salvar</button>
</form>

Conclusão🔗

Compreender o uso do <form> e seus principais atributos (action e method) é essencial para poder receber e gerenciar informações fornecidas pelos usuários em qualquer aplicação web. Esses conceitos formam a base do que é necessário para, posteriormente, criar campos mais avançados, aplicar validaçõesValidação de Código: W3C Validator e DebuggingAprenda a validar e corrigir erros de HTML com o W3C Validator. Descubra técnicas de debugging para melhorar a compatibilidade e a manutenção do seu site., entre outras funcionalidades que enriquecem a interatividade da página.