#3 – Работа с формами и пользователем

#3 – Работа с формами и пользователем

За счет HTMX вы можете выполнять обработку различных форм и отправку данных из них на сторону сервера. В уроке мы научимся отправлять POST запросы, а также создадим фейковый поиск.

Видеоурок

Отправляем данные с помощью HTML

Атрибут hx-post позволяет отправить POST-запрос на сервер. Это удобно, например, когда вы хотите передать данные из формы: имя, комментарий, email и т.д.


HTMX сам соберёт данные из полей формы и отправит их на указанный адрес. Никакого JavaScript писать не нужно.


Чаще всего hx-post используют в форме, но его можно применять и на других элементах — главное, чтобы в DOM рядом были поля ввода с именами.


Управляем, когда отправлять запрос

По умолчанию HTMX отправит запрос при стандартном действии:

  • для формы — при её отправке (submit),
  • для кнопки — при клике (click),
  • для поля ввода — при изменении (change).


Но иногда хочется точно указать, когда запускать запрос. Например:

  • при наведении (mouseover),
  • при потере фокуса (blur),
  • при вводе текста (keyup enter),
  • при загрузке элемента на экран (revealed).


Вот тут и нужен hx-trigger. Он позволяет задать любое событие, которое вызовет запрос.

Материалы для курса

Чтобы скачивать материалы к видеокурсам необходимо оформить подписку на сайт

Задание к уроку

Необходимо оформить подписку на проект, чтобы получить доступ ко всем домашним заданиям

Большое задание по курсу

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

Также стоит посмотреть

Изучение CSS/CSS3 для новичка: от нуля до гуру
10 уроков
Изучение технологии Bootstrap (верстка сайта)
16 уроков
Современная вёрстка адаптивного веб-сайта
Создание сайта с нуля | Полноценная верстка сайта
11 уроков
Изучение препроцессора SASS / SCSS
7 уроков
Изучение ASP.NET Core MVC. Создание сайтов на C#
10 уроков
Комментарии
Добавить комментарий

Пока комментариев нет