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) {
    $term = $request->getQueryParam('term');
    $courses = /* filter courses by term */;
    $params = ['courses' => $courses];
    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. Добавьте шаблон для списка пользователей.
  2. Добавьте массив $users = ['mike', 'mishel', 'adel', 'keks', 'kamila']
  3. Выведите эти имена на странице /users.
  4. Реализуйте на странице /users поисковую форму, в которой можно указать часть имени пользователя, по которому произойдет поиск этого пользователя. Форма должна отправляться на эту же страницу.
  5. Допишите обработчик /users так, чтобы внутри производилась фильтрация имен (через проверку strpos).
  6. Попробуйте отфильтровать пользователей. Запрос mi должен вернуть три имени: mike, mishel и kamila.
Мы учим программированию с нуля до стажировки и работы. Попробуйте наш бесплатный курс «Введение в программирование» или полные программы обучения по Node, PHP, Python и Java.

Хекслет

Подробнее о том, почему наше обучение работает →