Теория: Поисковые формы

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

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

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

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

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

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

Основной элемент формы — тег <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:

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

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

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

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

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

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

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

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

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

   @app.route('/courses/')
   def courses_index():
       query = request.args.get('query')
       filtered_courses = # filter courses by query
   
       return render_template(
           'courses/index.html',
           courses=filtered_courses,
           # передаем введеные значения обратно в форму
           search=query,
       )

   Expand code

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

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

   Expand code

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

Выводы

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