HTML Формы — основной инструмент для создания интерактивных сайтов. Через них происходит регистрация пользователя, добавление в друзья, оплата покупок, фильтрация товара в магазине и тому подобное. Самые простые формы - поисковые. Они ничего не изменяют и не создают, а используются только для фильтрации данных. Такой поиск реализован на Хекслете на странице поиска https://ru.hexlet.io/courses. Аналогичная строка поиска используется и в поисковых системах.
<form action="/courses" method="get">
<input type="search" required name="term">
</form>
Основной элемент формы тег <form>
. Все элементы формы должны быть вложены в него. У этого тега есть атрибут action
, в котором можно указать адрес на который отправятся данные формы (по умолчанию будет использован адрес текущей страницы). Второй часто используемый атрибут - method
. Он принимает два возможных параметра get
или post
, что соответствует HTTP методам. Напомню что семантика этих методов в том, что GET используется для чтения информации и не изменяет состояние системы, а POST неидемпотентный глагол, который используется при отправке форм изменяющих состояние системы, например, во время регистрации нового пользователя. По умолчанию значение этого атрибута get
. После отправки формы этим методом, ее данные передаются как параметры запроса. Если в форму выше ввести строчку sql и нажать Enter, то браузер откроет страницу по адресу https://ru.hexlet.io/courses?term=sql. Такой страницей можно поделиться с другими людьми и они увидят те же данные (если выдача не персонализированная).
Интересный факт. Поисковые боты (программы, индексирующие контент в интернете) распознают поисковые формы (смотрят что метод отправки GET) и пытаются их использовать для того чтобы добавить в индекс поисковых систем как можно больше данных.
Для элементов формы используются теги input, button, select и textarea.
В свою очередь тег <input>
благодаря атрибуту type
может принимать множество различных форм:
У всех элементов формы есть как общие, так и специфические атрибуты. К общим атрибутам относится имя. Его указание обязательно для всех элементов формы кроме кнопок, так как имя используется для доступа к содержимому. В примере выше используется текстовое поле с типом search
и именем term
. Именно поэтому после отправки формы в адресе появляется запись ?term=sql. Кроме того во всех формах почти всегда присутствует кнопка с типом submit
, она отвечает за отправку данных. Имя кнопки задается через атрибут value
.
<input type="submit" value="Search">
Наличие кнопки отправки не обязательно. По умолчанию достаточно нажать Enter и браузер отправит форму на сервер.
К общим атрибутам относится атрибут required
. Его наличие включает проверку обязательности заполнения на клиенте (в браузере). Попытка отправить форму с незаполненными элементами, помеченными этим атрибутом, приведет к показу сообщения о том что требуется заполнение. Не забывайте, что клиентская проверка данных легко обходится посылкой данных в обход браузера (например через Curl). Поэтому проверка на клиенте не может быть основной, она лишь дублирует серверные проверки.
С точки зрения серверной части - никакой формы не существует. Выполняется обычный обработчик, в который приходит типичный запрос с дополнительным набором параметров.
<?php
$app->get('/courses', function ($request, $response) use ($courses){
$term = $request->getQueryParam('term');
$filteredCourses = /* filter courses by term */;
$params = ['courses' => $filteredCourses];
return $this->get('renderer')->render($response, "courses/index.phtml", $params);
});
Последняя деталь в работе поисковых форм - подстановка текущих значений. Обычно форма поиска продолжает отображаться на странице результатов, причем её поля заполнены значениями, введёнными пользователем. Для реализации этой возможности нужно выполнить два действия. Во-первых, передать данные из объекта запроса в шаблон $params = ['term' => $term]
. Во-вторых, подставить их в саму форму:
<form action="/courses" method="get">
<input type="search" name="term" value="<?= htmlspecialchars($term) ?>" />
<input type="submit" value="Search" />
</form>
Для подобного поля ввода нужно указать атрибут value
и подставить туда текущее значение, не забыв его преобразовать в безопасную форму.
Создайте шаблон для вывода списка пользователей templates/users/index.phtml.
Добавьте в файл public/index.php массив $users = ['mike', 'mishel', 'adel', 'keks', 'kamila'];
.
Настройте обработчик маршрута /users и выведите имена пользователей из массива на странице /users.
Реализуйте на странице /users поисковую форму, в которой можно указать часть имени пользователя, по которому произойдет поиск этого пользователя. Форма должна отправляться на эту же страницу.
Допишите обработчик /users так, чтобы внутри производилась фильтрация имен (через проверку str_contains()
).
Попробуйте отфильтровать пользователей. Запрос mi должен вернуть три имени: mike, mishel и kamila.
Вам ответят команда поддержки Хекслета или другие студенты.
Базовый план откроет полный доступ ко всем курсам, упражнениям и урокам Хекслета, проектам и пожизненный доступ к теории пройденных уроков. Подписку можно отменить в любой момент.
Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно
Наши выпускники работают в компаниях:
Зарегистрируйтесь или войдите в свой аккаунт