# Отправка форм в JavaScript

Вы уже умеете работать с элементами форм на JavaScript, обрабатывая их в браузере. Формы, однако, можно также отправлять на сервер, чтобы их обработала серверная часть сайта, написанная на PHP или NodeJS.

Это нужно для того, чтобы добавлять и изменять данные сайта, хранящиеся на сервере.

Давайте посмотрим, как это делается. Пусть у нас есть несколько инпутов и кнопка:

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

Обернем наши элементы в тег `form`. В этом случае у нас получится форма, которая по нажатию на кнопку будет отправляться на сервер:

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

Чтобы на сервере можно было получить данные формы, необходимо каждому инпуту дать свое имя:

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

В этом случае на сервер данные формы придут в виде пар ключ-значение, где ключами будут имена элементов формы, а значениями - введенные данные.

Для того, чтобы отправить форму, нет необходимости в сервере. Вы можете скопировать приведенный код формы в любой файл, запустить его в браузер и нажать на кнопку отправки - форма отправится и страница браузера перезагрузится.

При отсутствии сервера, однако, данные формы никуда не попадут. Поэтому давайте будем проверять работу формы вместе с сервером. Пока вы не знаете никаких серверных языков, поэтому потренируемся отправлять форму с помощью нашего учебного HTTP сервера.

Давайте разместим нашу форму в некотором файле так, чтобы она была доступна по адресу `http://localhost:8080/form.html`:

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

Добавим нашей форме атрибут `action`, указывающий адрес отправки нашей формы:

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

Теперь в файле `server.js` напишем обработчик адреса отправки формы:

`export default { '/handler/': function() { return 'form data received'; } }`

В параметр нашего обработчика попадут отправленные данные формы:

`export default { '/handler/': function(data) { console.log(data); // выведется в консоль сервера return 'form data received'; } }`

Создайте форму и файл для ее обработки. Отправьте форму и проверьте, что данные действительно пришли на сервер.

←→
↑
en ru