Отправка формы

Последним шагом в создании формы является добавление кнопки для отправки результата на сервер. Для этого, используя парный тег button создадим кнопку отправки:

<form>
    <button>Отправить</button>
</form>

После нажатия на кнопку отправить, данные будет переданы обработчику, который указан в атрибуте action (если не указан, то данные отправятся на эту же страницу). После отправки данных страница будет перезагружена.

Теперь, используя элементы форм из прошлых уроков, создадим форму с разными полями.

<h2>Форма поиска</h2>
<form>
    <label>
        Введите ваш запрос
        <input type="text">
    </label>
    <select>
        <option>В каком разделе искать?</option>
        <option>JS</option>
        <option>HTML</option>
        <option>CSS</option>
    </select>
    <button>Искать</button>
</form>

Форма поиска

Если вы нажмёте на кнопку «Искать», то данная страница перезагрузится, так как данные должны будут уйти в обработчик на эту же страницу. Так как обработчика нет, то никаких видимых результатов, кроме перезагрузки страницы, не произойдёт.

Задание

Создайте форму, у которой файл с обработчиком данных лежит по адресу /people. Внутри формы расположите следующие элементы:

  • 2 текстовых поля
  • Список с возможностью множественного выбора
  • Кнопку «Отправить»

Нашли ошибку? Есть что добавить? Пулреквесты приветствуютсяhttps://github.com/hexlet-basics

Упражнение доступно только авторизованным пользователям.

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