Поисковые формы — Python: Веб-разработка (Flask)

HTML-формы — основной инструмент для создания интерактивных сайтов. Через них регистрируются пользователи, добавляются в друзья, оплачивают покупки, фильтруют товары в магазине. В этом уроке разберем, какие есть формы для фильтрации данных.

Основные элементы и атрибуты форм

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

Аналогичная строка поиска используется и в поисковых системах.

На Хекслете поисковая строка выглядит следующим образом:

<form action="/search" method="get">
  <input type="search" required name="term">
</form>

Основной элемент формы — тег <form>. Все элементы формы должны быть вложены в него. У этого тега есть атрибут action, в котором можно указать адрес, куда отправятся данные формы. По умолчанию будет использован адрес текущей страницы.

Второй часто используемый атрибут — method. Он принимает два возможных параметра get или post, что соответствует HTTP-методам. GET используется, чтобы читать информацию, он не изменяет состояние системы. POST — неидемпотентный глагол, который используется при отправке форм, изменяющих состояние системы, например, во время регистрации нового пользователя.

По умолчанию значение атрибута method — get. Когда форма с этим методом отправляется, ее данные передаются как параметры запроса. Если в форму выше ввести строчку тесты и нажать Enter, то браузер откроет страницу по адресу https://help.hexlet.io/ru/search?term=тесты. Такой страницей можно поделиться с другими людьми и они увидят те же данные. Это произойдет, если выдача не персонализированная.

Поисковые боты — программы, которые индексируют контент в интернете — распознают поисковые формы и пытаются их использовать. Так в индекс поисковых систем добавляется как можно больше данных.

Для элементов формы используются теги input, button, select и textarea.

Тег <input> благодаря атрибуту type может принимать различные формы:

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

Общие атрибуты

У всех элементов формы есть общие и специфические атрибуты. К общим атрибутам относится имя. Его указание обязательно для всех элементов формы кроме кнопок, так как имя используется для доступа к содержимому.

В примере выше используется текстовое поле с типом search и именем term. Поэтому после отправки формы в адресе появляется запись ?term=тесты. Кроме того, во всех формах почти всегда встречается кнопка с типом submit — отвечает за отправку данных. Имя кнопки задается через атрибут value:

<input type="submit" value="Search">

Наличие кнопки отправки необязательно. По умолчанию достаточно нажать Enter, и браузер отправит форму на сервер.

К общим атрибутам относится атрибут required. Его наличие включает проверку обязательности заполнения на клиенте — в браузере. Не получится отправить форму с незаполненными элементами, которые помечены этим атрибутом. В этом случае покажется сообщение с требованием о заполнении.

Клиентская проверка данных легко обходится посылкой данных в обход браузера, например, через curl. Поэтому проверка на клиенте не может быть основной, она лишь дублирует серверные проверки.

С точки зрения серверной части — никакой формы не существует. Выполняется обычный обработчик, в который приходит типичный запрос с дополнительным набором параметров:

@app.route('/courses/')
def courses():
    term = request.args.get('term')
    filtered_courses = # filter courses by term

    return render_template(
        'courses/index.html',
        courses=filtered_courses,
    )

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

1. Передать данные из объекта запроса в шаблон:

  @app.route('/courses/')
  def courses():
      term = request.args.get('term')
      filtered_courses = # filter courses by term

      return render_template(
          'courses/index.html',
          courses=filtered_courses,
          search=term,
      )

1. Подставить данные в саму форму:

  <form action="/courses" method="get">
    <input type="search" name="term" value="{{ search }}" />
    <input type="submit" value="Search" />
  </form>

Для подобного поля ввода нужно указать атрибут value и подставить туда текущее значение. Не забываем преобразовать его в безопасную форму.

Выводы

• Самые простые формы — поисковые. Они ничего не изменяют и не создают, а используются, чтобы фильтровать данные
• Основной элемент формы — тег <form>. Все элементы формы должны быть вложены в него. У этого тега есть атрибут action, в котором можно указать адрес, куда отправятся данные формы
• Атрибут method принимает два возможных параметра — get или post. Первый идет по умолчанию
• К общим атрибутам формы относится имя. Его указание обязательно для всех элементов формы кроме кнопок
• Еще один общий атрибут — required. Его наличие включает проверку обязательности заполнения на клиенте — в браузере
• Чтобы заполненная форма поиска отображалась на странице результатов, необходимо передать данные из объекта запроса в шаблон и подставить данные в саму форму

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

1. Создайте шаблон для вывода списка пользователей templates/users/index.html
2. Добавьте в файл example.py массив users = ['mike', 'mishel', 'adel', 'keks', 'kamila']
3. Настройте обработчик маршрута /users и выведите имена пользователей из массива на странице /users
4. Реализуйте на странице /users поисковую форму, где можно указать часть имени пользователя, по которому произойдет поиск этого пользователя. Форма должна отправляться на эту же страницу
5. Допишите обработчик /users так, чтобы внутри производилась фильтрация имен
6. Попробуйте отфильтровать пользователей. Запрос mi должен вернуть три имени: mike, mishel и kamila

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

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