Python: Веб-разработка (Flask)
2026-02-26 17:13 Diff
https://ru.hexlet.io/courses/python-flask/lessons/get-form/theory_unit

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Выводы

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