Поисковые формы — JS: Веб-разработка

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

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. Он включает проверку обязательности заполнения на клиенте — например, в браузере. Представим, что пользователь не заполнил элементы с этим атрибутом и пытается отправить форму. В таком случае он увидит сообщение, которое попросит заполнить обязательное поле.

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

import fastify from 'fastify'
import view from '@fastify/view'
import pug from 'pug'

const app = fastify()
const port = 3000

await app.register(view, { engine: { pug } })
const state = {
  courses: [
    // ...
  ],
}

app.get('/courses', (req, res) => {
  const term = req.query.term
  if (term !== null) {
    // Фильтруем курсы по term
  }
  else {
    // Извлекаем все курсы, которые хотим показать
  }

  const data = { term, courses: state.courses }

  res.view('courses/index', data)
})

app.listen({ port }, () => {
  console.log(`Example app listening on port ${port}`)
})

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

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

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

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

   const data = { term, courses: state.courses }
   
   res.view('courses/index', data)
   

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

   form(role = 'form' method = 'GET' action = '/courses')
     input(type = 'search', name = 'term', value = term)
     input(type = 'submit' value = 'search')
   

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

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

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

В качестве списка курсов используйте любой список из предыдущих уроков или создайте свой.