Ступенька 49-ая

Формы.

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

Форма у нас будет не простая. Форму поиска мы возьмем с Яндекса. Эта поисковая система позволяет вам делать поиск по вашему сайту через нее, но для этого нужно, чтобы ваш сайт был зарегистрирован в Яндексе, и поисковая система уже знала все, или почти все страницы вашего сайта.

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

Вот так наша форма выглядит:

Начало формы

Конец формы

На первый взгляд тут всего два элемента формы (кнопка и строка для ввода текста), и форма кажется простой. Однако, все несколько сложнее, чем кажется. Посмотрите на код нашей формы:

<form name="web" method="get" action="http://www.yandex.ru:8081/yandsearch"> <input type=text name="text" size=18 value="" maxlength=80> <input type=submit value="искать"> <input type=hidden name="serverurl" value="http://narod.ru"> <input type=hidden name="server_name" value="Народные сайты"> </form>

Не пугайтесь, конечно, как я и обещала, все немного сложнее, чем кажется на первый взгляд, но не так страшно, как вы подумали. Давайте начнем разбор формы:

<form name="web" method="get" action="http://www.yandex.ru:8081/yandsearch"> </form>

Конечно же, начнем разбирать с основного, с тега <FORM>. Есть тег открывающий, есть тег закрывающий. Все в порядке, все понятно.

Теперь посмотрим на атрибуты тега <FORM>, они нам тоже все знакомы: action - указывает куда будут отправлены на обработку данные из формы, в нашем случае action=http://www.yandex.ru:8081/yandsearch - а значит данные из формы уйдут на обработку к скрипту, который располагается на сайте поисковой системы Яндекс, а именно по адресу - http://www.yandex.ru:8081/yandsearch.

Name - имя формы, обязательный атрибут. Разработчик задал имя форме - web, мы его менять не будем, чтобы не случилось ошибок при обработке формы.

Method - говорит КАК будут обработаны данные из формы. В отличие от прошлой главы, в данной форме используется метод GET. Разницу между GET и POST мы рассмотрим чуть позже. Но не смотря на то, что мы откладываем разговор об атрибуте method, вам пока что в данном коде формы должно быть все ясно.

Давайте разбираться дальше:

<form name="web" method="get" action="http://www.yandex.ru:8081/yandsearch"> <input type=text name="text" size=18 value="" maxlength=80> </form>

Этот элемент формы вам тоже знаком, type=text, а значит мы имеем дело со строкой для ввода текста. С ней тоже все в порядке, и все ее атрибуты вам знакомы: name - имя элемента (обязательно), size - размер (длинна поля), value - значение по умолчанию - не задано, но мы можем вписать что-нибудь свое для атрибута value, например, value="поиск по сайту", и последний атрибут maxlength - максимальное количество символов, которое сможет ввести ваш посетитель в поле для ввода текста.

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

<form name="web" method="get" action="http://www.yandex.ru:8081/yandsearch"> <input type=text name="text" size=18 value="" maxlength=80> <input type=submit value="искать"> </form>

Ну, тут совсем все просто: type=submit - говорит нам, что это кнопка для отправки информации, при нажатии на которую информация уйдет на обработку к скрипту, и будет произведен поиск по заданным словам. Value - надпись на кнопке.

Вот видите! А вы боялись! А мы уже с вами половину формы разобрали:) Но продолжим:

<form name="web" method="get" action="http://www.yandex.ru:8081/yandsearch"> <input type=text name="text" size=18 value="" maxlength=80> <input type=submit value="искать"> <input type=hidden name="serverurl" value="http://narod.ru"> </form>

А вот теперь мы добрались до непонятного нам. Хотя, почему же не понятного. Раз <INPUT>, то значит это какой-то элемент формы. Name - имя элемента, уникальное, обязательное. Value - значение, type - тип элемента формы. Осталось понять, что же за тип элемента такой hidden, а это такой особый скрытый (невидимый глазу), но нужный управляющий элемент. В нашем случае мы указали для скрипта, который будет обрабатывать нашу форму, что поиск будет осуществляться по сайту http://narod.ru. Пользователю не обязательно видеть эту информацию и ему не нужно ее изменять, поэтому мы скрыли элемент.

Опять же ничего сложного. Разбираемся дальше:

<form name="web" method="get" action="http://www.yandex.ru:8081/yandsearch"> <input type=text name="text" size=18 value="" maxlength=80> <input type=submit value="искать"> <input type=hidden name="serverurl" value="http://narod.ru"> <input type=hidden name="server_name" value="ETO_NAROD"> </form>

Ну, тут уж вас не удивишь и не испугаешь совсем. Еще одно скрытое поле, которое должно содержать название вашего сайта (имя сервера).

Весьма несложная форма получилась, при внимательном рассмотрении. Мы выучили с вами еще один тип элемента формы, а заодно закрепили наши знания, полученные ранее. Теперь же поговорим с вами об атрибуте method для тега <FORM>.

Как я уже упоминала, атрибут method указывает, КАК будут обработанны данные из формы. Атрибут method может принимать только два значения GET и POST.

Если мы указываем method=get, это значит, что action + все значения (value) элементов формы будут сплюсованы в один большой URL, и отправлены в таком виде на обработку к скрипту. Вот такой URL:

action?name=value&name=value&name=value.

Давайте, рассмотрим это на конкретном примере нашей формы для поиска, первое слагаемое мы знаем: action = http://www.yandex.ru:8081/yandsearch. Второе слагаемое - это слово, которые вы введете в текстовое поле для поиска, допустим, это слово "HTML", и к тому же прибаляются значения скрытых полей форм. Значит, URL, который уйдет на обработку к скрипту будет таким:

http://www.yandex.ru:8081/yandsearch?text=HTML&serverurl=http://narod.ru&server_name=ETO_NAROD

Т.е., запрос уходит ввиде URL (http://www.yandex.ru:8081/yandsearch) + "хвост".

Если же вы используете метод POST, то набор данных формы включается в тело формы и в таком виде (как блок отдельной информации) отправляется на обработку к скрипту.

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

Дата добавления: 2014-12-27