Поисковые формы — Веб-разработка на PHP

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 может принимать множество различных форм:

• Множественный выбор (checkbox)
• Одиночный выбор (radio)
• Кнопка отправки формы (submit)
• Поле для ввода пароля (password)
• Множество других таких как: tel, email, range и т.п.

У всех элементов формы есть как общие, так и специфические атрибуты. К общим атрибутам относится имя. Его указание обязательно для всех элементов формы кроме кнопок, так как имя используется для доступа к содержимому. В примере выше используется текстовое поле с типом 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 и подставить туда текущее значение, не забыв его преобразовать в безопасную форму.

Самостоятельная работа

Остались вопросы? Задайте их в разделе «Обсуждение»

Вам ответят команда поддержки Хекслета или другие студенты.