Envio de formulários em JavaScript

Você já sabe como trabalhar com elementos de formulário em JavaScript, processando-os no navegador. No entanto, os formulários também podem ser enviados para o servidor, para serem processados pelo backend do site, escrito em PHP ou NodeJS.

Isso é necessário para adicionar e alterar dados do site, armazenados no servidor.

Vamos ver como isso é feito. Suponha que temos vários inputs e um botão:

<input>
<input>
<input type="submit">

Vamos envolver nossos elementos na tag form. Neste caso, teremos um formulário que será enviado para o servidor ao clicar no botão:

<form>
	<input>
	<input>
	<input type="submit">
</form>

Para que o servidor possa receber os dados do formulário, é necessário dar um nome único a cada input:

<form>
	<input name="test1">
	<input name="test2">
	<input type="submit">
</form>

Neste caso, os dados do formulário chegarão ao servidor na forma de pares chave-valor, onde as chaves serão os nomes dos elementos do formulário e os valores serão os dados inseridos.

Para enviar o formulário, não é necessário um servidor. Você pode copiar o código do formulário fornecido para qualquer arquivo, abri-lo no navegador e clicar no botão de envio - o formulário será enviado e a página do navegador será recarregada.

Na ausência de um servidor, no entanto, os dados do formulário não irão a lugar nenhum. Portanto, vamos testar o funcionamento do formulário junto com um servidor. Como você ainda não conhece nenhuma linguagem de servidor, vamos praticar o envio do formulário com a ajuda do nosso servidor HTTP educacional.

Vamos colocar nosso formulário em um determinado arquivo de forma que ele fique acessível no endereço http://localhost:3001/form.html:

<form>
	<input name="test1">
	<input name="test2">
	<input type="submit">
</form>

Vamos adicionar ao nosso formulário o atributo action, que indica o endereço de envio do nosso formulário:

<form action="/handler/">
	<input name="test1">
	<input name="test2">
	<input type="submit">
</form>

Agora, no arquivo server.js, vamos escrever o handler para o endereço de envio do formulário:

export default {
	'/handler/': function() {
		return 'dados do formulário recebidos';
	}
}

Os dados do formulário enviados chegarão como parâmetro do nosso handler:

export default {
	'/handler/': function(data) {
		console.log(data); // será exibido no console do servidor
		return 'dados do formulário recebidos';
	}
}

Crie um formulário e um arquivo para seu processamento. Envie o formulário e verifique se os dados realmente chegaram ao servidor.