Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-02-26

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

2 <h2>Основные элементы и атрибуты форм</h2>

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

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

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

6 Основной элемент формы - тег <form>. Все элементы формы должны быть вложены в него. У этого тега есть атрибут action, в котором можно указать адрес, куда отправятся данные формы. По умолчанию будет использован адрес текущей страницы.

7 Второй часто используемый атрибут - method. Он принимает два возможных параметра get или post, что соответствует HTTP-методам.GETиспользуется, чтобы читать информацию, он не изменяет состояние системы.POST- неидемпотентный глагол, который используется при отправке форм, изменяющих состояние системы, например, во время регистрации нового пользователя.

8 По умолчанию значение атрибута method - get. Когда форма с этим методом отправляется, ее данные передаются как параметры запроса. Если в форму выше ввести строчкутестыи нажать Enter, то браузер откроет страницу по адресу<a>https://help.hexlet.io/ru/search?query=тесты</a>. Такой страницей можно поделиться с другими людьми и они увидят те же данные. Это произойдет, если выдача не персонализированная.

9 Поисковые боты - программы, которые индексируют контент в интернете - распознают поисковые формы и пытаются их использовать. Так в индекс поисковых систем добавляется как можно больше данных.

10 Для элементов формы используются теги<a>input</a>,<a>button</a>,<a>select</a>и<a>textarea</a>.

11 Тег <input> благодаря атрибуту type может принимать различные формы:

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

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

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

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

16 <li>Множество других, например: tel, email, range</li>

17 </ul><h2>Общие атрибуты</h2>

18 У всех элементов формы есть общие и специфические атрибуты. К общим атрибутам относится имя. Его указание обязательно для всех элементов формы кроме кнопок, так как имя используется для доступа к содержимому.

19 В примере используется текстовое поле с типом search и именем query. Поэтому после отправки формы в адресе появляется запись?query=тесты. Кроме того, во всех формах почти всегда встречается кнопка с типом submit - отвечает за отправку данных. Имя кнопки задается через атрибут value:

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

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

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

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

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

25 <ol><li>Передать данные из объекта запроса в шаблон:

26 </li>

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

28 </li>

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

30 <h2>Выводы</h2>

31 <ul><li>Самые простые формы - поисковые. Они ничего не изменяют и не создают, а используются, чтобы фильтровать данные</li>

32 <li>Основной элемент формы - тег <form>. Все элементы формы должны быть вложены в него. У этого тега есть атрибут action, в котором можно указать адрес, куда отправятся данные формы</li>

33 <li>Атрибут method принимает два возможных параметра - get или post. Первый идет по умолчанию</li>

34 <li>К общим атрибутам формы относится имя. Его указание обязательно для всех элементов формы кроме кнопок</li>

35 <li>Еще один общий атрибут - required. Его наличие включает проверку обязательности заполнения на клиенте - в браузере</li>

36 <li>Чтобы заполненная форма поиска отображалась на странице результатов, необходимо передать данные из объекта запроса в шаблон и подставить данные в саму форму</li>

37 </ul>