В этом задании мы попробуем поработать с формами так, как они работали до эпохи веб-приложений: при каждой отправке перезагружалась страница, сервер формировал новую в ответ.
Будем делать форму для выбора себе питомца!
-
Поставь зависимости и запусти сервер. Перейди в директорию задачи и выполни команду
npm install
. После установки зависимостей, выполни командуnpm run server
. После запуска, перейди по адресу localhost:3000. Все следующие пункты выполняются в файлеindex.html
в директорииstatic
. -
Создай форму, в которая будет отправлять свои данные методом
POST
по адресу/pets/orders
. Попробуй отправить форму и узнаешь, какие поля требуется в ней передавать. -
Сделай такую форму с такими типами данных, которая будет приниматься сервером. Не забудь к каждому полю дописать
label
(иplaceholder
тем полям, у которых он есть). Задача предполагает, что каждое поле уникального типа или сделано уникальными тегами. -
Сделай кнопку для сброса всех значений на дефолтные.
Подсказки:
- Чтобы узнать, что отправляется на сервер, в браузерных инструментах разработчика есть вкладка
Network
, в ней можно поставить галочкуPreserve log
, чтобы при обновлении страницы запросы не стирались и так узнать, что твоя форма отправляет на сервер. Подробнее о работе с DevTools можешь почитать в этой статье - Чтобы не вводить постоянно значения в форму, полям можно указать дефолтное значение при помощи атрибутов
value
иselected