Поисковые формы — Java: Веб-технологии

• Поисковые формы
• Атрибуты поисковых форм

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

Поисковые формы

Самые простые формы — поисковые. Они ничего не изменяют и не создают, а используются только для фильтрации данных. Такие формы часто используются в поисковых системах. Аналогичный поиск реализован на Хекслете на странице поиска:

Так эта форма выглядит в коде:

<form action="/courses" method="get">
  <input type="search" required name="term">
  <input type="submit" value="Искать">
</form>

Основной элемент формы — это тег <form>. Все элементы формы должны быть вложены в него. У этого тега есть два важных атрибута:

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

Значение атрибута method по умолчанию — это get. После отправки формы этим методом, ее данные передаются как параметры запроса.

Если в форму выше ввести строчку sql и нажать Enter, то браузер откроет страницу по адресу https://ru.hexlet.io/courses?term=sql. Если поделиться такой страницей с другими людьми, они увидят тот же результат. Для элементов формы используются такие теги:

• input
• button
• select
• textarea

Благодаря атрибуту type, тег <input> принимает множество различных форм:

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

Атрибуты поисковых форм

У всех элементов формы есть общие и специфические атрибуты.

К общим атрибутам относится имя. Его указание обязательно для всех элементов формы кроме кнопок, потому что имя используется для доступа к содержимому. В примере выше используется текстовое поле с типом search и именем term, именно поэтому после отправки формы в адресе появляется запись ?term=sql.

Кроме того, во всех формах почти всегда присутствует кнопка с типом submit, которая отвечает за отправку данных. Имя кнопки задается через атрибут value.

Посмотрим на пример формы:

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

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

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

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

package org.example.hexlet;

import org.example.hexlet.dto.CoursesPage;
import io.javalin.Javalin;

public class HelloWorld {
    public static void main(String[] args) {
        // JavalinJte.init();

        var app = Javalin.create(config -> {
            config.bundledPlugins.enableDevLogging();
        });

        app.get("/courses", ctx -> {
            var term = ctx.queryParam("term");
            ArrayList<Course> courses;
            // Фильтруем, только если была отправлена форма
            if (term != null) {
                courses = /* Фильтруем курсы по term */
            } else {
                courses = /* Извлекаем все курсы, которые хотим показать */
            }
            var page = new CoursesPage(courses);
            ctx.render("courses/index.jte", model("page", page));
        });
        app.start(7070);
    }
}

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

Представим, что пользователь ввел какое-то значение в поисковую форму. Когда мы покажем ему страницу результатов, на ней все еще должна быть форма поиска с тем значением, которое пользователь ввел. Так работает большинство сайтов.

Чтобы реализовать эту возможность, нужно выполнить два действия:

1. Передать данные в шаблон:

   // Исправляем определение CoursesPage
   package org.example.hexlet.dto.courses;
   
   import java.util.List;
   
   import org.example.hexlet.model.Course;
   
   import lombok.AllArgsConstructor;
   import lombok.Getter;
   
   @AllArgsConstructor
   @Getter
   public class CoursesPage {
       public List<Course> courses;
       public String term;
   }
   
   // Передаем в него term в обработчике
   var page = new CoursesPage(courses, term);
   

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

   <form action="/courses" method="get">
   <input type="search" name="term" value="${page.getTerm()}" />
   <input type="submit" value="Search" />
   </form>
   

Теперь все сработает так, как пользователь ожидает: он введет запрос и отправит его, а затем получит страницу с результатами, на которой осталась поисковая форма и сам текст запроса. Можно не беспокоиться, что пользователь попробует ввести JavaScript-код — JTE автоматически предотвращает XSS-атаки.

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

1. Выполните все шаги из урока на своем компьютере
2. Откройте страницу просмотра всех курсов
3. Добавьте на нее возможность фильтровать курсы по названию
4. Добавьте возможность фильтровать курсы, которые содержат в своем описании введенную в поле подстроку. Так пользователи смогут искать курсы по описанию

---

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

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

Об обучении на Хекслете

• Статья «Как учиться и справляться с негативными мыслями»
• Статья «Ловушки обучения»
• Статья «Сложные простые задачи по программированию»
• Вебинар «Как самостоятельно учиться»