HTML: Отправка формы
Последним шагом в создании формы является добавление кнопки для отправки результата на сервер. Для этого, используя парный тег button
, создадим кнопку отправки:
<form>
<button>Отправить</button>
</form>
После нажатия на кнопку «Отправить», данные будут переданы обработчику, который указан в атрибуте action
(если не указан, то данные отправятся на эту же страницу). После отправки данных страница будет перезагружена.
Теперь, используя элементы форм из прошлых уроков, создадим форму с разными полями.
<h2>Форма поиска</h2>
<form>
<label>
Введите ваш запрос
<input type="text">
</label>
<select>
<option disabled>В каком разделе искать?</option>
<option>JS</option>
<option>HTML</option>
<option>CSS</option>
</select>
<button>Искать</button>
</form>
Форма поиска
Если вы нажмёте на кнопку «Искать», то страница перезагрузится и данные должны будут уйти в обработчик на эту же страницу. Так как обработчика нет, то никаких видимых результатов, кроме перезагрузки страницы, не произойдёт.
Задание
Создайте форму, у которой файл с обработчиком данных лежит по адресу /people
. Внутри формы расположите следующие элементы:
* 2 текстовых поля input
* Список с возможностью множественного выбора
* Кнопку «Отправить»
Пожалуйста, авторизуйтесь, это необходимо для отслеживания прогресса выполнения уроков. Если у вас ещё нет учётной записи, то сейчас самое время создать аккаунт.