Тег FORM устанавливает форму на веб-странице. Форма предназначена для обмена данными между пользователем и сервером. Область применения форм не ограничена отправкой данных на сервер, с помощью клиентских скриптов можно получить доступ к любому элементу формы, изменять его и применять по своему усмотрению.
Документ может содержать любое количество форм, но одновременно на сервер может быть отправлена только одна форма. По этой причине данные форм должны быть независимы друг от друга.
Когда форма отправляется на сервер, управление данными передается CGI-программе, заданной параметром action тега FORM. Предварительно браузер подготавливает информацию в виде пары «имя=значение», где имя определяется параметром name тега INPUT, а значение введено пользователем или установлено в поле формы по умолчанию. Если для отправки данных используется метод GET, то адресная строка может принимать следующий вид.
http://www..cgi? nick=%C2%E0%ED%FF+%D8%E0%EF%EE%F7%EA%E8%ED&page=5
Параметры перечисляются после вопросительного знака, указанного после адреса CGI-программы и разделяются между собой символом амперсанда (&). Нелатинские символы преобразуются в шестнадцатеричное представление (в форме %HH, где HH - шестнадцатеричный код для значения ASCII-символа), пробел заменяется на плюс (+).
Синтаксис
...
Закрывающий тег
Обязателен.
Параметры
action
- адрес CGI-программы или документа, которые обрабатывает данные формы.
enctype
- MIME-тип информации формы.
method
- метод протокола HTTP.
name
- имя формы.
target
- имя окна или фрейма, куда обработчик будет загружать возвращаемый результат.
Пример 1. Использование тега FORM
Как по вашему мнению расшифровывается аббревиатура "ОС"?
Офицерский состав
Операционная система
Большой полосатый мух
Описание
Указывает обработчик, к которому обращаются данные формы при их отправке на сервер. В качестве обработчика может выступать CGI-программа или HTML-документ, который включает в себя серверные сценарии (например, Parser). После выполнения обработчиком действий по работе с данными формы он возвращает новый HTML-документ.
Если параметр action отсутствует, текущая страница перезагружается, возвращая все элементы формы к их значениям по умолчанию.
Синтаксис
...
Аргументы
В качестве значения принимается полный или относительный путь к серверному файлу (URL).
Значение по умолчанию
Нет.
Пример 2. Добавление обработчика формы
...
В качестве обработчика можно указать адрес электронной почты, начиная его с ключевого слова mailto. При отправке формы будет запущена почтовая программа установленная по умолчанию. В целях безопасности в браузере установлено, что отправить незаметно информацию, введенную в форме, по почте невозможно. Для корректной интерпретации данных используйте параметр enctype="text/plain" в теге FORM.
Пример 3. Использование адреса электронной почты
...
Описание
Устанавливает MIME-тип для данных отправляемых вместе с формой. Обычно устанавливать значение параметра enctype не требуется, данные вполне правильно понимаются на стороне сервера. Однако если используется поле для отправки файла (INPUT type=file), следует определить параметр enctype как multipart/form-data.
Синтаксис
...
Аргументы
Имя MIME-типа в любом регистре. Допускается устанавливать сразу несколько значений, разделяя их запятыми.
Значение по умолчанию
application/x-www-form-urlencoded
Пример 4. Изменение типа данных
...
Описание
Метод сообщает серверу о цели запроса. Различают два основных метода: GET и POST. Существуют и другие методы, но они пока мало используются.
Синтаксис
...
Аргументы
Значение параметра method не зависит от регистра и его следует указывать без кавычек. Различают два метода - GET и POST.
GET
Этот метод является одним из самых распространенных и предназначен для получения требуемой информации и передачи данных в адресной строке. Пары «имя=значение» присоединяются в этом случае к адресу после вопросительного знака и разделяются между собой амперсандом (символ &). Удобство использования метода GET заключается в том, что адрес со всеми параметрами можно использовать неоднократно, сохранив его, например, в «Избранное» браузера, а также менять значения параметров прямо в адресной строке.
POST
Метод POST посылает на сервер данные в запросе браузера. Это позволяет отправлять большее количество данных, чем доступно методу GET, поскольку у него установлено ограничение в 4 Кб. Большие объемы данных используются в форумах, почтовых службах, заполнении базы данных и т.д
Значение по умолчанию
GET
Пример 5. Метод отправки формы
...
Описание
Определяет уникальное имя формы. Как правило, имя формы используется для доступа к ее элементам через скрипты.
Синтаксис
...
Аргументы
В качестве имени используется набор символов, включая числа и буквы. JavaScript чувствителен к регистру, поэтому при обращении к форме по имени через скрипты соблюдайте то же написание, что и в параметре name.
Значение по умолчанию
Нет.
Пример 6. Использование имени формы
function validForm() {
alert("Имя " + document.forms("form1").nick.value)
}
Имя:
Описание
После того, как обработчик формы получает данные, он возвращает результат в виде HTML-документа. Вы можете определить окно, в которое будет загружаться итоговая веб-страница. Для этого используется параметр target, в качестве его значения используется имя окна или фрейма. Если параметр target не установлен, возвращаемый результат показывается в текущем окне.
Синтаксис
...
Аргументы
В качестве аргумента используется имя окна или фрейма, заданное параметром name. Если установлено несуществующее имя, то будет открыто новое окно. В качестве зарезервированных имен используются следующие.
Blank
- загружает страницу в новое окно браузера.
_self
- загружает страницу в текущее окно.
_parent
- загружает страницу во фрейм-родитель, если фреймов нет, то этот параметр работает как _self.
_top
- отменяет все фреймы и загружает страницу в полном окне браузера, если фреймов нет, то этот параметр работает как _self.
Значение по умолчанию
_self
Пример 7. Открытие новой страницы
...
Не раз нам доводилось видеть Web-страницы, на которых нам предлагалось ввести некоторые данные в поля ввода. В HTML существует механизм получения данных от пользователя. Естественно, эти данные необходимо еще обработать, но этим занимаются специализированные программы. Рассмотрим механизм их взаимодействия с Web-страницами.
Итак, пользователь загрузил себе Web-страницу, на которой располагаются органы управления для ввода информации. Все они объединены в общую совокупность, называемую формой. Каждая форма обладает кнопкой, по нажатию на которую введенные пользователем данные передаются обрабатывающей программе. Эта программа размещается на Web-сервере, который и обслуживает данную страницу. Подобные программы могут создаваться при помощи самых различных технологий программирования. Объединяет их лишь единый порядок получения данных от Web-страницы. Данные передаются при помощи шлюзового интерфейса CGI (Common Gateway Interface). Поэтому обрабатывающие программы часто называют CGI-приложениями или CGI-скриптами.
Итак, приложение получает данные и обрабатывает их. Затем оно может либо послать некое электронное письмо, либо произвести некоторую операцию в базе данных, или передать пользователю новую Web-страницу, возможные действия ограничиваются лишь свойствами технологии и фантазией программиста. При помощи подобных программ действуют всевозможные системы регистрации, обратной связи, гостевые книга, форумы, чаты. С их помощью создаются и более разветвленные и сложные системы, например, online-магазины.
Для того чтобы создавать подобные приложения все-таки необходимо уметь программировать и знать соответствующие правила создания CGI-приложений. До, тех пор, пока мы этого не умеем, нам остается пользоваться опять-таки общедоступными CGI-скриптами. Но если мы и получим эти приложения, то форму для ввода данных пользователем необходимо все равно делать самостоятельно. В данном разделе мы научимся это делать.
Форма ограничивается тегами и . Между этими тегами располагаются теги, создающие органы ввода информации и теги создания обычного содержимого Web-страницы, т. е. сами органы ввода могут размещаться в таблице, которая в свою очередь полностью размещается в форме. Тег не создает какой-либо отображаемой структуры. Он, скорее предназначен для внутренней группировки объектов.
Тег , естественно, обладает целым рядом параметров, которые задают свойства создаваемой формы. Рассмотрим эти параметры.
- Параметр action является обязательным. Значением его является URL указывающий на расположение того CGI-приложения, которое и будет, обрабатывать данные, введенные пользователем при помощи органа управления данной формы.
- Параметр method предназначен для указания способа, которым данные будут передаваться обрабатывающему приложению. В качестве значения параметра используется одно из двух предустановленных ключевых cлов: get или post . Сейчас нам нет нужды узнавать, какие механизмы peaлизуются при помощи того или иного метода. Так или иначе, в сопроводительной документации CGI-приложения указывается, какой метод neредачи данных следует использовать. По умолчанию используется значек get.
- Параметр enctype используется для указания типа передаваемых данных из формы. Обычно нет нужды его использовать, так как значение application/x-www-form-urlencoded , используемое по умолчани идеально подходит для подавляющего большинства CGI-приложений.
- Параметр accept-charset используется в тех случаях, когда пользователь передает из формы приложению не только информацию, но и файлы. В этом случае мы можем явно указать кодировки передаваемых файлов. В качестве значения данного параметра используется текстовая строка, в которой записывается одно или несколько названий кодировок. В том случае, если применяется несколько кодировок, их наименование разделяются пробелами или запятыми. По умолчанию используется значение unknown, которое указывает серверу, что тот должен сам разобраться с используемыми кодировками
- Параметр accept задает типы передаваемых файлов. Обычно не используется, так как сервер вполне в состоянии сам адекватно распознать тип принимаемого файла.
- Параметр name позволяет задавать уникальное имя формы. Естественно на одной Web-странице может находиться несколько форм. В этом случае значения параметров name у них не должны совпадать.
Тег с его закрывающим близнецом , по сути, создают контейнер для размещения органов ввода информации. Большая часть этих органов ввода реализуется при помощи тега . Продемонстрируем это на небольшом примере (рис. 1.32).
Листинг 1.33
Поле для ввода строки текста < input type="text">
Рис. 1.32. Окно браузера с результатом отображения файла, приведенного в листинге 1.33
Итак, на иллюстрации видно, что мы смогли создать поле ввода текста и кнопку, при нажатии на которую введенная пользователем информация будет отправлена CGI-приложению для обработки. А если мы посмотрим на код листинга, то мы увидим, что и кнопка и поле ввода создавались при помощи одного и того же тега . Регулировка свойств этого тега производится при помощи его многочисленных параметров, которые мы сейчас и рассмотрим.
- Параметр type является, пожалуй, ключевым параметром. При помощи его значения мы можем устанавливать тип создаваемого органа управления. В качестве значения используется одно из следующих ключевых слов: text, password, checkbox, radio, submit, reset, file, hidden, image, button. По умолчанию используется значение text. Более подробно эти типы мы рассмотрим немного позже.
- Параметр name предназначен для установки уникальных имен для каждого органа управления. Несмотря на то, что параметр не является обязательным, настоятельно рекомендуется использовать его. В сопроводительной документации CGI-приложений обязательно указывается, как имена должны быть у соответствующих органов ввода информации.
- Параметр value используется для указания значения, отображаемого по умолчанию для кнопок и полей текстового ввода. Если мы используем переключатели, то значение параметра value не будет видно пользователю, но именно это значение получить обрабатывающее CGI-приложение если пользователь выберет соответствующий переключатель.
- Параметр cheked используется только для независимых переключателей и радиокнопок. Он устанавливает их начальное состояние. Если этот параметр будет введен в тег , то переключатель будет переведен во включенное состояние. Параметр используется без значений.
- Параметр disabled делает орган управления недоступным для использования пользователем. Параметр используется без значений.
- Параметр readonly применяется только для органов ввода типов text password. Использование этого параметра означает, что данные, отображаемые в этих полях, нельзя будет изменять.
- Параметр size обычно задает размеры органа ввода данных. Но для каждого отдельного типа органов ввода его действие специфично.
- Параметр maxiength позволяет устанавливать максимально возможно число символов, которые пользователь может внести в поля текстового ввода. Значением параметра является целое положительное число.
- Параметр src используется в тех случаях, когда мы создаем органы ввода связанные с графикой. Значением данного параметра является URL графического файла, который и содержит отображаемый рисунок.
- Параметр alt позволяет создавать краткие описания создаваемого органа ввода данных. Это описание может отображаться в виде маленького хинта-подсказки, когда пользователь наводит курсор мыши на данный орган ввода.
- Параметр tabindex задает номер органа управления в последовательности всех объектов, перемещение фокуса ввода между которыми осуществляется при помощи последовательных нажатий клавиши табуляции.
- Параметр accesskey позволяет задавать "горячую клавишу", при нажатии на которую пользователем фокус ввода будет переходить к данному органу управления.
Итак, мы рассмотрели параметры, применяемые в теге . Но мы уже знаем, что при помощи данного тега мы можем создавать самые различные объекты форм. Пришло время детально разобраться с ними.
Объекты, входящие в форму, разделяются на два типа - органы ввода данных и кнопки, инициирующие различные действия. Сначала посмотрим, как мы можем создавать органы ввода.
Одним из самых распространенных объектов форм является однострочное поле ввода. В листинге 1.33 мы видели, что оно создается при помощи параметра type со значением text. При этом достаточно часто нам надо задавать ограничения на максимально возможное количество символов, которые пользователь может внести в это поле. Это ограничение реализуется при помощи параметра maxlength.
Существует модификация однострочного поля ввода текста, которая предназначена именно для ввода секретной информации, например, паролей. Они в отображают вводимый текст, а заменяют его звездочками. Создание подобных полей ввода производится при помощи следующей конструкции:
Использование типа checkbox позволяет создавать независимые переключатели. Они представляют собой всем знакомые квадратики, в которых щелчком мыши мы можем устанавливать и снимать флажки в виде галочек. При этом используется параметр value. Значение этого параметра будет передана в обрабатывающее CGI-прияожение, если пользователь взведет флажок данном независимом переключателе.
Также мы можем создавать группы переключателей, которые часто называют зависимыми переключателями. В этой группе пользователь может выбирать и помечать только один переключатель. Каждый переключатель создается при помощи тега с параметром type, которому приписано значение radio. Чтобы браузер понял, что несколько переключателей принадлежат к одной группе, необходимо, чтобы их значения параметра name были одинаковыми. Но при этом у них обязательно должны различаться значения параметров value.
Рассмотрим на примере правила создания и отображения рассмотренных органов ввода информации.
Листинг 1.34
:! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
http://www.w3.Qrg/TR/html4/strict.dtd">
,
Поле для ввода строки текста
Поле для ввода пароля
Независимый переключатель
Группа переключателей
Альтернатива 1
Альтернатива 2
