Урок 5. Формы
Хотел я продолжить беседу о JavaScript, да вовремя одумался. Прежде чем повести серьёзный разговор о программировании поведения элементов интерфейса, стоит рассмотреть ещё один очень важный вид этих элементов, а именно — формы.
Что такое формы?
Против ожидания, речь пойдёт не о нежных профилях и манящих изгибах. ;-) Пользуясь казарменным языком, можно сказать, что формы — элементы интерфейса веб-страниц, позволяющие пользователю осуществлять ввод данных. После чего мы можем развлекаться уже по полной программе: обрабатывать эти данные при помощи JavaScript, чтобы менять страницу «на лету», или генерировать новую страницу, содержащую или учитывающую результаты ввода; можно (что чаще всего и делается) передавать информацию серверу, который поступит с ней так, как мы пожелаем.
Все эти кнопочки, списки, текстовые поля и прочая дребедень, с которой мы ежедневно сталкиваемся в гостевых книгах, чатах, форумах, и есть формы. Точнее — ЭЛЕМЕНТЫ ФОРМ, так как сами формы, как мы в этом скоро сможем убедиться, являются просто-напросто контейнерами для элементов, а потому невидимы.
Свойства форм
В самом общем виде контейнер FORM записывается так:
<FORM name ="имя_формы" target="имя_окна"
action="URL" method="GET или POST"
enctype="тип_кодировки_данных"
OnSubmit="обработчик">
...
элементы управления
...
</FORM>
А теперь поговорим подробнее о каждом параметре.
1. Параметр name задаёт имя формы. Если вы не будете его использовать, то и писать его не обязательно. Нужен он только в том случае, если вы собираетесь впоследствии сылаться на форму из сценария JavaScript, да и то, строго говоря, не обязателен.
2. Параметр target полностью соответствует аналогичному для тега <A> (ссылка). Если ответ сервера (результат обработки формы) должен отобразиться в специально выбранном для этой цели окне, присвойте этому параметру имя окна или одно из значений по умолчанию (_blank, _top и т. д.). В случае, если ответ должен отображаться в том же окне, в котором находится форма, параметр не обязателен.
3. Параметр action значительно более важен. Он содержит адрес (URL) серверного расширения, которое будет обрабатываеть данные, содаржащиеся в форме. Если данные из формы обрабатываются локально и не передаются серверу, этот параметр тоже можно не указывать.
4. Параметр method определяет метод передачи данных серверу. Он может принимать одно из двух значений: GET и POST. При локальной обработке данных не нужен. Да и при удалённой иногда опускается. ;-)
5. Параметр enctype используется нечасто. Для информации: он определяет тип MIME передаваемых данных. При локальной обработке формы не задаётся.
6. Параметр OnSubmit задаёт имя обработчика события Submit, самого главного в жизни любой формы. Когда вы в чате или гостевой книге после ввода текста нажимаете на Enter или на специальную кнопку («Отправить», «Послать» или ещё что-нибудь в этом духе), происходит событие Submit, то есть данные из формы передаются соответствующей программе для обработки. Как правило, этот параметр опускается, т. к. одним из типовых элементов формы является специальная кнопка, нажатие на которую инициирует событие Submit без использования дополнительного кода. Если же вы обрабатываете данные локально, например, проверяете правильность заполнения полей формы перед передачей её серверному приложению, или вовсе не отправляете ничего на сервер, имя обработчика не задаётся.
Как вы поняли, из приведённых параметров опустить можно почти все, а при локальном использовании формы — абсолютно все. В этом случае контейнер будет выглядеть следующим образом:
<FORM>
...
элементы управления
...
</FORM>
Скажу больше: и сам тег FORM не обязателен, можно было бы использовать элементы управления напрямую, безо всякого контейнера, но… не тут-то было. Как только на арену выходит Netscape, чтоб он был здоров, ни о какой свободе действий не приходится и мечтать: этот браузер просто не отобразит на странице ни один элемент, если он не заключён в контейнер FORM. Вот так-то.
Тем не менее, самый распространённый вариант использования контейнера выглядит примерно так:
<FORM action="http://host.com/cgi-bin/script.pl" method="POST">
...
элементы управления
...
</FORM>
Это означает, что по событию Submit содержащиеся в форме данные будут переданы серверному скрипту script.pl, написанному на языке Perl.
Виды элементов форм
Мы неоднократно упоминали элементы форм: давайте теперь рассмотрим их виды.
1. Button
Видел я этот баттон… кнопка-кнопкой! ;-) Выглядит вот так:
а код при этом пишется следующий:
<FORM>
<input type="тип_кнопки"
name="имя_кнопки" value="надпись_на_кнопке">
</FORM>
В зависимости для того, какую функцию должна выполнять кнопка, параметр type может принимать три разных значения. Если type="submit", кнопка предназначена для передачи данных обработчику события, по умолчанию — серверному скрипту, путь к которому определён полем action формы, содержащей элемент. Напоминаю, что такое поведение не нужно специально программировать, оно «встроено» в свойства кнопки типа submit. Если type="reset", после нажатия такой кнопки все элементы формы будут возвращены в исходное состояние, текстовые поля опустошены и т. д. Этот тип поведения тоже не нужно программировать, достаточно использовать для определения типа ключевое словов reset. Последний вариант — type="button" — означает, что после нажатия кнопки ничего не произойдёт, и любую желаемую реакцию интерфейса придётся программировать.
2. Checkbox
Переключатель. Выглядит вот так:
Код для его описания используется следующий:
<FORM>
<input type="checkbox" name="имя_переключателя"
value="значение" checked>
</FORM>
Ключевое слово checked, использованное в коде, соответствует второму переключателю, делая его включенным по умолчанию на момент загрузки страницы.
3. Radiobutton
Ещё один переключатель. Особено часто используется тогда, когда нужно организовать возможность выбора из нескольких вариантов. Примерно так:
Описывается это удовольствие вот так:
<FORM>
<input type="radio" name="имя_кнопки" value="значение">
</FORM>
Ключевое слово checked в этом случае использовано в описании первой кнопки. Заметим, что для связывания кнопок в группу, внутри которой нажатой может быть только одна кнопка из нескольких (при включении другой предыдущая автоматически выключается) достаточно дать всем нужным кнопкам одно и то же имя.
4. Listbox
Список. Также даёт пользователю возможность выбора, но может иметь два вида, первый из которых помогает экономить место на веб-странице, и несколько богаче возможностями.
Принципиально обе разновидности отличаются только наличием параметра size, присваивание которому значения > 1 сразу меняет внешний вид элемента. Код будет выглядеть так:
<FORM>
<select name="имя" size="2" multiple>
<option value=1>Ванкувер</option>
<option value=2>Монреаль</option>
<option value=3>Оттава</option>
<option value=4>Торонто</option>
<option value=5>Виктория</option>
</select>
</FORM>
Использование ключевого слова multiple, обозначающее возможность выбора нескольких пунктов одновременно (например, с использованием клавиш Shift или Control), относится только ко второму виду списков, т. к. для первого осуществить такой выбор просто невозможно.
Скроллер появляется автоматически в случае необходимости.
5. Text.
Однострочное текстовое поле. Используется для ввода простейшей информации: имена, адреса и пр. Выглядит так:
А вот и код:
<FORM>
<input type="text" name="имя_поля"
value="Начальное значение поля"
size="30" maxlength="255">
</FORM>
Параметр value задаёт исходный текст, параметр size — размер поля в символах, а maxlength определяет, какое максимальное количество символов это поле может содержать.
6. Textarea.
Многострочное текстовое поле. Отличий от предыдущего элемента не так уж много:
Код будет таким:
<FORM>
<textarea name="имя" cols="30" rows="2" wrap="off">
Ещё текст, но строк может быть несколько.
</textarea>
</FORM>
Параметры rows и cols определяют видимый размер многострочного поля редактирования, а wrap задаёт способ свёртки текста, принимая одно из следущих значений: off (строки отображаются так, как вводятся), virtual (свёртка включена, но новые строки не формируются) и physical (при свёртке в текст вставляется символ перевода строки).
7. Password.
Поле для ввода пароля. Ничем не отличается от однострочного текстового поля (кроме типа, разумеется: type="password"), но все вводимые символы отображаются звёздочками, сохраняя истинное значение для обработчика. Выглядит так:
8. Hidden.
Скрытое поле. Самое загадочное. Не выглядит, разумеется, никак, а пишется вот так:
<FORM>
<input type="hidden" name="имя" value="значение">
</FORM>
Зачем оно нужно? Когда данные из формы передаются серверу, каждый элемент представляется в виде пары имя / значение (name / value). Скрытое поле, которое пользователь не видит, может тем не менее содержать информацию, необходимую серверному скрипту для нормальной работы.
Немного о событиях
Уже несколько раз в тексте урока встретился термин ОБРАБОТЧИК СОБЫТИЯ. Что же это за великое событие, которое приходится всё время обрабатывать?
Нынешние программы ленивы. В отличие от тех простеньких задачек на бейсике, которые вам приходилось решать в школе, они оператора не исполнят без хорошего пинка.
Когда вы писали программу на бейсике и хотели, чтобы она реагировала на нажатие клавиш, иногда приходилось закручивать бесконечный цикл, условием выхода из которого было как раз это самое нажатие: что-то сделав, программа возвращалась к циклу и снова ждала.
Теперь всё работает значительно интереснее: в программировании чаще всего используется схема объект-событие-обработчик, при котором код начинает выполняться только в том случае, если с каким-то ОБЪЕКТОМ произошло то или иное СОБЫТИЕ. Объекты бывают разные. В нашем случае в роли объекта обычно выступает ссылка (<A>), а точнее — элемент веб-страницы, который ею помечен, или какой-то из компонентов форм.
События тоже бывают разные. Щёлкнули по кнопке — с ней случился onclick. Курсором мыши провели над ссылкой — она испытала mouseover. Увели мышь за пределы ссылки — произошёл mouseout. События могут инициироваться пользователем или задаваться программно, но нас с вами по большей части будет интересовать первый вариант.
Если с объектом происходит событие, запускается обработчик этого события: кусочек кода, например — подпрограмма-функция. Если, конечно, это событие предусмотрено и обработчик существует. Если нет — грустить интерфейсу и дальше.
Ссылка на обработчик события вставляется в описание элемента точно так же, как любой друго его параметр. Скажите, в чём разница между target="_blank" и onmouseover="DoSomething();"? Да нет её.
Ссылку на JavaScript-код можно сделать несколькими способами. Самый простой из них выглядит так: в описание элемента мы вставляем строчку наподобие onmouseover="DoSomething();", и это означает, что в том случае, если с нашим элементом случится событие onmouseover, т. е. по нему тихо поползёт курсор, будет запущена подпрограмма-обработчик этого события, которая хранится где-то в блоке заголовка страницы в контейнере <SCRIPT> и которая выполнит всё, что мы заранее договорились сделать на случай этого самого разнесчастного mouseover'а.
Всё понятно?
Заключение
Отвечаю на вопрос, который мне задал ещё в процессе написания урока один настырный молодой человек, имеющий доступ прямо к черновикам: нет, порядок перечисления параметров форм и их элементов значения не имеет. ;-)
Ну что ж: с формами мы более-менее разобрались. В следующий раз поговорим о ещё одном способе организации HTML-документов: о фреймах.
Урок 4. Основы JavaScript | Урок 6. Фреймы
наверх
| 
