Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-02-26

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

2 <h2>Поисковые формы</h2>

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

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

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

6 <ul><li>action. Здесь можно указать адрес для отправки данных формы. По умолчанию используется адрес текущей страницы</li>

7 <li>method. Он принимает два возможных параметра - get или post, что соответствует HTTP-методам</li>

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

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

10 <ul><li><a>input</a></li>

11 <li><a>button</a></li>

12 <li><a>select</a></li>

13 <li><a>textarea</a></li>

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

15 <ul><li>Множественный выбор checkbox</li>

16 <li>Одиночный выбор radio</li>

17 <li>Кнопка отправки формы submit</li>

18 <li>Поле для ввода пароля password</li>

19 <li>Поля для ввода телефона tel или электронной почты email</li>

20 </ul><h2>Атрибуты поисковых форм</h2>

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

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

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

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

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

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

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

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

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

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

31 <ol><li>Передать данные в шаблон:

32 </li>

33 <li>Подставить данные в саму форму:

34 </li>

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