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

Созданы такие формы с момощью тега <form>, который и устанавливает форму на веб-странице. Форма предназначена для обмена данными между пользователем и сервером. Для отправки данных формы на сервер используется кнопка Submit, но если используется одно поле, можно отправлять данные клавишей Enter или с помощью специального события, например onchange="this.form.submit();"

Когда форма отправляется на сервер, управление данными передается программе, заданной атрибутом action тега <form>. Предварительно браузер подготавливает информацию в виде пары «имя=значение», где имя определяется атрибутом name элементов формы, а значение введено пользователем или установлено в поле формы по умолчанию.

Для тех, кто только начинает изучать HTML, это может показаться сложным, но на самом деле все просто, главное понять принцип передачи и обработки этих данных. Примеры ниже помогут вам понять этот механизм.

Сортировать документы мы будем с помощью сниппета Ditto. Для того, чтобы сниппет умел понимать данные, передаваемые формой, мы воспользуемся специальным экстендером request, который находится здесь: assets/snippets/ditto/extenders/request.extender.inc.php. Все имена параметров, передаваемых формой для обработки сниппетом Ditto, должны начинаться с префикса «ditto_», если в вызове сниппета используется уникальный идентификатор, то он добавляется к этому префиксу: «ditto_id_», а далее уже идет имя передаваемого параметра, например, так: «ditto_id1_sortDir». Значение параметра указывается после знака равно: «ditto_id1_sortDir=ASC». Другими словами, если наша форма отправит данные в таком виде, то сниппет Ditto, при помощи экстендера request, получит и обработает эти данные.

Существует два метода обработки данных формы, которые мы и рассмотрим ниже.

Метод GET

Данные методом GET передаются путем их добавления к URL-адресу вызываемого сценария, предназначенного для обработки полученной информации. Рассмотрим на примере. Создадим простую форму, где будем выбирать направление сортировки документов, выведенных сниппетом Ditto.

Пример 1

Форма будет выглядеть так:

<form action="[~[*id*]~]"  method="get">
<p>Сортировать по...</p>
<select name="ditto_id1_sortDir">
<option value="ASC">Возрастанию</option>
<option value="DESC">Убыванию</option>
</select>
<input name="Submit" type="submit" value="Ок">
</form> [!Ditto? &id=`id1` &parents=`0` &tpl=`@CODE [+pagetitle+]<br />` &extenders=`request` &sortBy=`pagetitle`!]

Давайте рассмотрим элементы формы:

  • action="[~[*id*]~]" - атрибут action указывает обработчика, к которому поступают данные из формы. В качестве обработчика может выступать HTML-документ. В данном случае [~[*id*]~] сформирует ссылку на текущий документ, т.е. после обработки запроса сервером, данные будут возвращены в текущий документ.
  • method="get" - это метод обработки данных. Атрибут method имеет значение по умолчанию get и в этом случае его можно было даже не указывать.
  • select name="ditto_id1_sortDir" - в атрибуте name находится имя параметра сниппета Ditto, к которому добавлен префикс ditto_ и идентификатор сниппета id1_.
  • value="ASC" и value="DESC" - значения для атрибута name. Таким образом, отправляемые данные из этой формы могут принимать два значения: «ditto_id1_sortDir=ASC» или «ditto_id1_sortDir=DESC».

Теперь рассмотрим вызов сниппета Ditto, где для нас будут важны следующие параметры:

  • &id=`id1` - уникальный идентификатор сниппета
  • &extenders=`request` - экстендер request необходим для того, чтобы Ditto понимал методы get и post
  • &sortBy=`pagetitle` - мы сразу определям, что найденные документы будут сортироваться по заголовку.

В адресной строке после отпраки данных добавляется такая конструкция:

?ditto_id1_sortDir=ASC&Submit=Ок 

или такая:

?ditto_id1_sortDir=DESC&Submit=Ок

Т.е. метод get добавил к адресу страницы знак ? после которого идут пары в виде имя=значение, разделенные знаком &. Благодаря экстендеру request сниппет Ditto обрабатывает эти значения и выводит результат в соответствии с переданными параметрами.

Пример 2

Давайте немного модифицируем предыдущую форму. Во-первых, научим нашу форму "запоминать" выбранные параметры, во-вторых, избавим наших посетителей от лишнего клика, т.е. уберем кнопку «Ок», чтобы сортировка происходила сразу после выбора параметра. Но хочу сразу предупредить, что вариант "без кнопки" применим только если в форме используется только один элемент формы. К примеру, если у вас будет несколько select в форме, то при использовании этого события данные будут отправляться после каждого изменения, так что используйте этот вариант только при необходимости.

Теперь форма будет выглядеть так:

<form action="[~[*id*]~]">
<select name="ditto_id1_sortDir" onchange="this.form.submit();">
<option disabled [!selected? &param=`ditto_id1_sortDir` &znach=``!]>Сортировать по...</option>
<option value="ASC" [!selected? &param=`ditto_id1_sortDir` &znach=`ASC`!]>Возрастанию</option>
<option value="DESC" [!selected? &param=`ditto_id1_sortDir` &znach=`DESC`!]>Убыванию</option>
</select>
</form> [!Ditto? &id=`id1` &parents=`0` &tpl=`@CODE [+pagetitle+]<br />` &extenders=`request` &sortBy=`pagetitle`!]

Рассмотрим изменения, которые мы сделали в форме:

  • method="get" - так как значение атрибута method по умолчанию равно get, опускаем этот атрибут
  • onchange="this.form.submit();" - данное событие возникает при изменении значений элементов формы, что позволяет нам отказаться от кнопки «Ок»
  • <option disabled>Сортировать по...</option> - переносим фразу в select и блокируем ее выбор атрибутом disabled, чтобы избежать ошибок в обработчике.

Обратите внимание, что здесь и везде далее в примерах используется синтаксис HTML. Для синтаксиса XHTML этот атрибут выглядит так: disabled="disabled".

Последним изменением в форме является сниппет selected. Данный сниппет присваивает атрибут selected тому элементу формы, который был выбран пользователем. Напоминаю, что атрибут selected делает пункт, у которого он установлен, выделенным. А берет сниппет эти данные из массива $_REQUEST, который содержит отправленные формой данные. Создаем сниппет selected с таким кодом:

<?php
if ($_REQUEST[$param]==$znach) {
echo "selected";
}
?>

Параметры сниппета selected:

  • &param - указываем имя передаваемого параметра
  • &znach - указываем значение передаваемого параметра

Если имя переданного формой параметра равно указанному значению, сниппет выведет атрибут selected, иначе, ничего не отобразится.

Значение Submit=Ок теперь не передается, так как мы убрали из формы эту кнопку.

Пример 3

Усложним форму, добавив пагинацию и дополнительные параметры:

<form action="[~[*id*]~]">
<p><select name="ditto_id1_sortBy">
<option disabled [!selected? &param=`ditto_id1_sortBy` &znach=``!]>Параметр для сортировки...</option>
<option value="pagetitle" [!selected? &param=`ditto_id1_sortBy` &znach=`pagetitle`!]>Название</option>
<option value="id" [!selected? &param=`ditto_id1_sortBy` &znach=`id`!]>Идентификатор</option>
<option value="createdon" [!selected? &param=`ditto_id1_sortBy` &znach=`createdon`!]>Дата создания</option>
</select> </p>
<p><select name="ditto_id1_sortDir">
<option disabled [!selected? &param=`ditto_id1_sortDir` &znach=``!]>Направление сортировки...</option>
<option value="ASC" [!selected? &param=`ditto_id1_sortDir` &znach=`ASC`!]>Возрастанию</option>
<option value="DESC" [!selected? &param=`ditto_id1_sortDir` &znach=`DESC`!]>Убыванию</option>
</select> </p>
<p>Показать на странице:</p>
<p><input type="radio" name="ditto_id1_display" value="all" [!checked? &param=`ditto_id1_display` &znach=`all`!]> Все
<input type="radio" name="ditto_id1_display" value="3" [!checked? &param=`ditto_id1_display` &znach=`3`!]> 3
<input type="radio" name="ditto_id1_display" value="5" [!checked? &param=`ditto_id1_display` &znach=`5`!]> 5</p>
<p><input name="Submit" type="submit" value="Ок"></p>
</form> [!Ditto? &id=`id1` &parents=`0` &tpl=`@CODE [+pagetitle+] - [+id+] - [+date+]<br />` &extenders=`request` &paginate=`1` &dateSource=`createdon` &dateFormat=`%d.%m`!]
<p>Страницы:  [+id1_previous+][+id1_pages+][+id1_next+]</p>

Создадим сниппет checked для отображения параметра checked для тегов input, с таким кодом:

<?php
if ($_REQUEST[$param]==$znach) {
echo "checked";
}
?>

Сам сниппет и его параметры аналогичны сниппету selected, только у тега input для выделения используется атрибут checked.

Все остальное в форме делается по аналогии с предыдущими примерами.

Метод GET имеет ряд ограничений, во-первых, количество передаваемых данных ограничено и не может превышать 4кб, во-вторых, посетителю будет виден адрес URL, что с точки зрения безопасности не очень хорошо. С другой стороны, плюсом может быть то, что вы можете использовать адрес с указанными параметрами, и менять параметры непосредственно в адресной строке.

Метод POST

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

Пример 4

Форма для метода POST будет совершенно идентична формам из предыдущих примеров, за одним исключением, тегу form добавим атрибут method="post".

method="post"

Форма работает абсолютно также, но теперь адрес страницы остается неизменным.

Вместо заключения

Данные примеры не охватывают все возможные варианты применения форм и предназначены только для облегчения знакомства с методами GET и POST и экстендером request для Ditto.

Примечание

На одном из форумов встретил ссылку на эту статью, где автор топика пишет, что не может понять, что это за @CODE, который я указываю в вызове сниппета. @CODE служит для того, чтобы размещать код шаблона непосредственно в параметре, не создавая чанков. Но имейте ввиду, что если у вас на сайте используется PHx, то он будет вырезать из этого кода плейсхолдеры.

Поделитесь ссылкой

Статистика

Яндекс цитирования
© 2011 - 2016 Школа MODX