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

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

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

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

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

image_processing.png

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

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

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

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

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

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

image_processing_2.png

image_processing_3.png


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

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

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

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

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

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

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

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

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

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

Логотип компании Альфа Банк
Логотип компании Aviasales
Логотип компании Yandex
Логотип компании Tinkoff
Рекомендуемые программы

С нуля до разработчика. Возвращаем деньги, если не удалось найти работу.

Иконка программы Python-разработчик
Профессия
с нуля
Разработка веб-приложений на Django
2 февраля 10 месяцев

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

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

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

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