86. Формы и их обработка

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

Форма представляет собой несколько полей, где пользователь может ввести некоторую информацию, либо выбрать какую-то опцию. После того, как пользователь отправит информацию, она обрабатывается программой (скриптом), размещенной на сервере. Существует также возможность обрабатывать формы "на стороне клиента", встраивая в свои страницы скрипты, написанные на языках JavaScript и Visual Basic Script.

Форма открывается тагом <FORM>, имеющим несколько опций.

Опция action="url" указывает URL, который примет и обработает данные формы. Если эта опция не указана, данные отправляются по адресу страницы, на которой размещена форма.

Опция method="стиль" указывает метод передачи данных программе-обработчику формы. "Стиль" может принимать одно из двух значений. Значение get, используемое по умолчанию, предписывает посылать информацию формы вместе с URL, а значение post предписывает посылать информацию формы отдельно от URL. Значение post используется обычно только в случае отправки данных формы по электронной почте.

Опция name="имя" указывает имя формы. Это необходимо, если требуется доступ к данным формы с помощью встроенного скрипта на JavaScript или Visual Basic Script, а также в том случае, если данные формы предназначены для отправки по электронной почте.

Опция enctype="кодирование" задает способ кодирования данных формы. В случае отправки данных как текста указывается в виде enctype="text/plain".

Примеры:

Заголовок формы, используемой на поисковой машине Яndex, имеет вид:

<form name="web" method="get" action="/yandsearch">

Заголовок формы, отправляющей информацию на адрес E-mail, может иметь вид:

<form action="mailto:vita@lvs.ru?subject=Internet-Test"

method="post" enctype="text/plain" name="Q" onSubmit="return Validate()">

Здесь форма имеет имя Q, в качестве action указана отправка сообщения по E-mail на адрес vita@lvs.ru с темой "Internet-Test", опция enctype предписывает отправлять данные формы как текст, а опция onSubmit связывает отправку формы с функцией Validate(), написанной на Javascript. Этот прием широко используется для проверки корректности заполнения формы.

Внутри тага <form> находятся поля формы. Перечислим основные из них:

<textarea name="имя" cols="число столбцов" rows="число строк" wrap="стиль">...</textarea>

Таг предназначен для создания многострочного поля ввода. Опции cols и rows указывают число строк и столбцов в поле, опция wrap указывает на режим автоматического распределения текста в ячейке. Она может принимать одно из значений off (выключен), virtual (распределять текст по всей ячейке, но на сервер передавать как одну строку) или physical (распределять текст по всей ячейке и передавать на сервер так, как он отображается). Опция name здесь и далее обозначает имя поля и предполагается обязательной. Текст, написанный в таге <textarea>, становится его значением по умолчанию.

Таг <select name="имя" size="размер" multiple>...</select> определяет в форме меню с одним или несколькими вариантами выбора или список с полосой прокрутки. Если опция size указана в виде size="1", отображение элементов будет организовано в виде ниспадающего меню, в противном случае будет использован список прокрутки, включающий указанное число элементов. Опция multiple, если она указана, разрешает выбирать из списка более одного значения. Это можно сделать, например, выбирая элементы списка при нажатой клавише Ctrl.

Внутри тага <select> размещаются элементы меню или списка, каждый - в своем таге <option>, имеющем общий вид

<option value="значение" selected>текст</option>

Опция value указывает значение, возвращаемое программе обработки при выборе пользователем данной опции, опция selected указывает на элемент списка, выбранный по умолчанию. Внутри тага <option> пишется текст, видимый в меню или списке на экране.

Таг <input>, в отличие от <textarea> и <select>, не должен закрываться и предназначен для сбора информации различными способами, включая текстовые поля, поля для ввода пароля, переключатели, флажки, кнопки для отправки данных и очистки формы.

<input type="text" name="строка" maxlength="максимальный размер" size="число символов" value="строка">

Создает поле ввода. Опция maxlength ограничивает максимальную длину вводимого текста, а опция size показывает максимальное количество отображаемых символов. Опция value указывает исходное значение поля ввода.

Текстовое поле с защитой вводимых символов (то есть, с заменой их на звездочки, как принято при вводе паролей) можно создать, если заменить опцию type="text" на type="password". Остальные опции поля ввода пароля - те же самые.

<input type="checkbox" name="строка" value="строка" checked>

Создает флажок. Опция value определяет значение, возвращаемое программе обработки при выборе пользователем флажка, опция checked, если она указана, делает флажок выбранным по умолчанию.

<input type="radio" name="имя" value="строка" checked>

Создает радиокнопку. Радиокнопки можно группировать, задавая одно и то же значение опции name. Опции value и checked имеют те же значения, что и у флажка.

<input type="reset" value="строка">

Создает кнопку для очистки формы. Значение опции value позволяет указать надпись для кнопки. После очистки все элементы формы принимают значения, которые они имели по умолчанию.

<input type="submit" value="строка">

Создает кнопку для отправки данных формы приложению-обработчику. Опция value позволяет указать надпись на кнопке.

Для создания произвольной кнопки вместо reset или submit указывается значение button. В основном это требуется при написании скриптов, работающих на стороне клиента. Например, кнопка, созданная тагом <INPUT TYPE="button" VALUE="Вывести" onClick="Look()"> подписана словом "Вывести", а при нажатии на нее вызывает функцию Look(), написанную на JavaScript.

Работа с формами

Создайте документ HTML, содержащий форму для заполнения заказа на товар. Заказ должен быть отправлен по электронной почте.

Форма предусматривает поле ввода номера банковского счета, поле ввода личного номера пользователя (этот номер следует защитить от "подглядывания" при вводе), список выбора товаров (можно выбрать как один, так и несколько товаров), поле ввода произвольного комментария пользователя.

Также пользователь должен указать один из двух методов оплаты - наличным или безналичным расчетом. Пользователь должен иметь возможность указать, какую дополнительную информацию он хочет получить при ответе - данные об остатках на счете и/или список последних платежей по счету. Любая из этих двух опций может быть включена или выключена.

Предусмотрите также возможность сброса введенных в форму данных.

Фреймы

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

Документ, использующий фреймы, содержит только описание внешнего вида фреймов, которое выполняется в таге <frameset>...</frameset>, используемом вместо тага <body>. У тага <frameset> есть две главных опции - rows="список величин" и cols="список величин", описывающие, соответственно, строки и столбцы таблицы фреймов.

Строка "список величин" представляет собой разделенный запятыми перечень значений в пикселах, процентах или относительных величинах. Например, таг <frameset rows="100,240,140"> создает сетку из 3 кадров, высота которых равна 100, 240 и 140 пикселов соответственно, <frameset cols="25%,75%"> создает 2 кадра с шириной 25 и 75 процентов от ширины окна браузера, а <frameset cols="*,2*"> - 2 кадра с шириной 1/3 и 2/3 ширины окна браузера.

Эти способы можно использовать и совместно - например, <frameset cols="128,*"> указывает оставить 128 пикселов слева под первый фрейм, а все остальное пространство - под второй. При определении обоих атрибутов rows и cols, например, <frameset rows="*,2*" cols="*,2*"> получается сетка кадров.

Другие опции тага <frameset>:

border="ширина" - указывает ширину обрамления всех рамок для всех кадров, в пискелах;

frameborder=yes или frameborder=no - включает или выключает отображение обрамления кадров. В случае yes рамка имеет трехмерную форму, иначе она невидима, то есть имеет цвет фона окна по умолчанию. Некоторые браузеры "понимают" эту опцию только в виде frameborder=1 или frameborder=0, поэтому обычно указывают оба способа;

framespacing="ширина" - указать ширину промежутка между смежными кадрами в пискелах. Не действует в Netscape Navigator.

Внутри тага <frameset> находятся описания отдельных кадров, каждое в собственном таге <frame>, закрывать который не нужно. Число тагов <frame> должно быть равно числу кадров, определенных в таге <frameset>, при этом считается, что кадры описываются слева направо и сверху вниз.

Перечислим основные опции тага <frame>:

опция src="url" указывает URL исходного документа для данного кадра;

опция name="строка" указывает имя кадра. Это необходимо сделать, если предполагается ссылаться из одних кадров на другие;

опция scrolling="значение" управляет линейками прокрутки кадра. Значение может быть задано в виде yes (линейки есть всегда), no (никогда) или auto (если необходимо);

опция noresize запрещает изменять размеры кадра. Опция noresize, указанная для данного кадра, влияет также и на все кадры, смежные с ним;

опция frameborder может указываться также внутри тага <frame>, со всеми замечаниями, которые сделаны относительно нее. Указание этой опции в таге <frame> отменяет указание, сделанное в таге <frameset> для данного кадра и всех, смежных с ним;

опции magrinheight="ширина" и marginwidth="ширина" задают размещение по верхней-нижней и боковым сторонам кадра областей свободного пространства, ширина которых указывается в пикселах.