Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-02-26

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

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

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

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

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

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

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

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

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

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

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

12 <li>Поле для ввода пароля (password)</li>

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

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

15 В примере выше используется текстовое поле с типом search и именем term. Поэтому после отправки формы в адресе появляется запись?term=sql.

16 Также во всех формах почти всегда есть кнопка с типом submit. Она отвечает за отправку данных. Имя кнопки задается через атрибут value:

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

18 К общим атрибутам относится required. Он включает проверку обязательности заполнения на клиенте (в браузере). Если отправить форму с незаполненными элементами, помеченными этим атрибутом, то покажется сообщение о том, что требуется заполнение.

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

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

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

22 <ol><li>Передать данные из объекта запроса в шаблон $params = ['term' => $term]</li>

23 <li>Подставить их в саму форму:</li>

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