Зарегистрируйтесь для доступа к 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 — неидемпотентный глагол, который используется при отправке форм, изменяющих состояние системы, например, во время регистрации нового пользователя.

По умолчанию значение атрибута methodget. После отправки формы этим методом ее данные передаются как параметры запроса. Если в форму выше ввести строчку 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);
});

Последняя деталь в работе поисковых форм — подстановка текущих значений. Обычно форма поиска продолжает отображаться на странице результатов, причем ее поля заполнены значениями, введенными пользователем. Чтобы реализовать это, нужно выполнить два действия:

  1. Передать данные из объекта запроса в шаблон $params = ['term' => $term]
  2. Подставить их в саму форму:
<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
Рекомендуемые программы
профессия
от 25 000 ₸ в месяц
Разработка веб-приложений на Laravel
10 месяцев
с нуля
Старт 7 ноября

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

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

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

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