Vamos aprender como o evento submit funciona com formulários HTML. Primeiro, precisamos entender como enviar um formulário. Existem três maneiras de um formulário ser enviado. O primeiro é quando o usuário clica em um botão no formulário que tem o atributo type definido como submit. O segundo é quando o usuário pressiona a tecla Enter em qualquer campo de entrada editável no formulário. O terceiro é por meio de uma chamada JavaScript aos métodos requestSubmit() ou submit() do elemento form. Mas o que acontece quando um formulário é enviado? Existem algumas coisas que acontecem e o comportamento do formulário depende de seus atributos. O primeiro atributo que precisamos analisar é o atributo action. O atributo action deve conter uma URL ou um caminho relativo para o domínio atual. Este valor determina para onde o formulário tenta enviar os dados. Se você não definir um atributo action, o formulário enviará os dados para a URL da página atual. Aqui está um exemplo de um formulário com um atributo action definido para uma URL específica:

<form action="https://G.E.A.R ACADEMY.org">
  <input type="number" id="input" placeholder="Enter a number" name="number" />
  <button type="submit">Submit</button>
</form>

Quando este formulário for enviado, ele enviará dados para a homepage do G.E.A.R ACADEMY, que provavelmente não fará nada. Aqui está outro formulário, que envia para um caminho relativo:

<form action="/data">
  <input type="number" id="input" placeholder="Enter a number" name="number" />
  <button type="submit">Submit</button>
</form>

Este envia para o caminho /data no domínio atual. No nosso caso, ele enviaria para http://127.0.0.1:5500/data. O segundo atributo para controlar como uma submissão se comporta é o atributo method. Este atributo aceita um método HTTP padrão, como GET ou POST, e usa esse método ao fazer a requisição para a URL action. HTTP significa Hypertext Transfer Protocol e é usado para transferir dados pela web. Os métodos HTTP são usados para definir as ações que podem ser realizadas em recursos, como GET, POST, PUT, DELETE e assim por diante. Você aprenderá mais sobre esses métodos em lições futuras. Quando um método não é definido, o formulário usará por padrão uma requisição GET. Uma requisição GET é usada para recuperar dados de um recurso especificado sem fazer nenhuma alteração nele e os parâmetros são tipicamente adicionados à URL na forma de uma string de consulta. Os dados no formulário serão codificados em URL como pares name=value e anexados à URL action como parâmetros de consulta. Por exemplo, ao enviar o formulário do nosso exemplo anterior com o valor 3342 para o campo input, o formulário tentaria GET a URL http://127.0.0.1:5500/data?number=3342. Isso é ótimo para algo como um formulário de busca, onde seu usuário está consultando dados. Mas se você quiser que seu usuário envie novos dados, como em um formulário de registro, o método idiomático a ser usado seria o método POST. O método POST é usado para enviar dados ao servidor para criar ou atualizar um recurso. Vamos definir o atributo method com o valor POST:

<form action="/data" method="POST">
  <input type="number" id="input" placeholder="Enter a number" name="number" />
  <button type="submit">Submit</button>
</form>

Quando você envia uma requisição POST, um corpo pode ser incluído que contém os dados para sua requisição. Então, ao contrário de um GET, os dados não são anexados à URL e nosso formulário envia a requisição POST para http://127.0.0.1:5500/data. Os dados, em vez disso, podem ser encontrados no corpo da requisição, ainda como dados de formulário codificados em URL. Dados de formulário codificados em URL são quando os dados do formulário são convertidos em uma string de pares chave-valor, como name=John+Doe&email=john%40example.com, onde caracteres especiais são substituídos por versões codificadas para enviar os dados com segurança pela web. Você aprenderá mais sobre isso em lições futuras. Mas talvez você não queira enviar os dados como um payload de formulário codificado em URL? O elemento form aceita um atributo enctype, que representa o tipo de codificação a ser usado para os dados. Este atributo aceita apenas três valores: application/x-www-form-urlencoded (que é o padrão, enviando os dados como um corpo de formulário codificado em URL), text/plain (que envia os dados em formato de texto simples, em pares name=value separados por quebras de linha) ou multipart/form-data, que é especificamente para lidar com formulários com upload de arquivo. Nesta lição, você aprendeu o básico sobre envios de formulário. Em lições futuras, vamos nos aprofundar no trabalho com formulários e como eles interagem com o servidor.