Зарегистрируйтесь для доступа к 15+ бесплатным курсам по программированию с тренажером

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

HTML Формы — основной инструмент для создания интерактивных сайтов. Через них происходит регистрация пользователя, добавление в друзья, оплата покупок, фильтрация товара в магазине и тому подобное. Самые простые формы - поисковые. Они ничего не изменяют и не создают, а используются только для фильтрации данных. Такой поиск реализован на Хекслете на странице поиска https://ru.hexlet.io/courses. Аналогичная строка поиска используется и в поисковых системах.

Search Form

<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 и подставить туда текущее значение, не забыв его преобразовать в безопасную форму.


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

  1. Создайте шаблон для вывода списка пользователей templates/users/index.phtml.

  2. Добавьте в файл public/index.php массив $users = ['mike', 'mishel', 'adel', 'keks', 'kamila'];.

  3. Настройте обработчик маршрута /users и выведите имена пользователей из массива на странице /users.

  4. Реализуйте на странице /users поисковую форму, в которой можно указать часть имени пользователя, по которому произойдет поиск этого пользователя. Форма должна отправляться на эту же страницу.

    Форма поиска
  5. Допишите обработчик /users так, чтобы внутри производилась фильтрация имен (через проверку str_contains()).

  6. Попробуйте отфильтровать пользователей. Запрос mi должен вернуть три имени: mike, mishel и kamila.

    Отфильтрованные пользователи

Аватары экспертов Хекслета

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

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

Для полного доступа к курсу нужен базовый план

Базовый план откроет полный доступ ко всем курсам, упражнениям и урокам Хекслета, проектам и пожизненный доступ к теории пройденных уроков. Подписку можно отменить в любой момент.

Получить доступ
1000
упражнений
2000+
часов теории
3200
тестов

Открыть доступ

Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно

  • 130 курсов, 2000+ часов теории
  • 1000 практических заданий в браузере
  • 360 000 студентов
Отправляя форму, вы принимаете «Соглашение об обработке персональных данных» и условия «Оферты», а также соглашаетесь с «Условиями использования»

Наши выпускники работают в компаниях:

Логотип компании Альфа Банк
Логотип компании Aviasales
Логотип компании Yandex
Логотип компании Tinkoff
Рекомендуемые программы
Иконка программы PHP-разработчик
Профессия
с нуля
Разработка веб-приложений на Laravel
30 марта 10 месяцев

Используйте Хекслет по-максимуму!

  • Задавайте вопросы по уроку
  • Проверяйте знания в квизах
  • Проходите практику прямо в браузере
  • Отслеживайте свой прогресс

Зарегистрируйтесь или войдите в свой аккаунт

Отправляя форму, вы принимаете «Соглашение об обработке персональных данных» и условия «Оферты», а также соглашаетесь с «Условиями использования»