нять функцию, указанную в атрибуте onSubmit. В следующем совете будет показано, как за — ставить браузер выполнять сценарий перед передачей результатов формы Web-серверу, даже если стандартная кнопка Submit заменена.

Глава 3. HTML-формы 15 9





Отправка результатов формы по электронной почте

без использования CGI-сценария

Как уже говорилось выше в этой главе, результаты (заполнения) формы пред — ставляют собой пары имя/значение, которые Web-браузер передает по адресу (т. е. по URL-адресу), указанному в атрибуте action дескриптора

формы, при нажатии посетителем кнопки Submit. Каждая пара имя/значение содержит имя name элемента формы и его значение value. Наверное, понять, что отправ- ляет Web-браузер Web-серверу легче всего, заставив браузер передать результаты заполнения формы по электронной почте.



ПРАКТИКУМ

Например, атрибут action дескриптора
в первой строке следующего кода формы заставляет Web-браузер передавать результаты заполнения формы в виде

Сообщени я ЭЛектрОННОЙ ПОЧТЫ ПО адрес у Konrad@NVBizNet. com. (Дл я ТОГО ЧТОбы отправить результаты заполнения формы по вашему адресу электронной почты, просто замените адрес Konrad@NVBizNet. com на требуемый.)



Если посетитель сайта заполнит форму, сгенерированную приведенным выше

кодом и указанную на рис. 3.15, а затем нажмет кнопку Submit, Web-браузер

отправит результаты формы электронной почте по Адресу, указанному после

mailto: В атрибуте action.

16 0 . Глава 3. HTML-формы







Обратите внимание, что результаты формы включают имена элементов формы

и введенные посетителем значения, разделенные знаками равно (=). Параметр

«text/plain » в качестве значения атрибута enctype (вторая строка определения формы) указывает Web-браузеру, что результаты формы должны передаваться в

виде открытого текста. Если бы в определение формы в качестве метода кодиро- вания было установлено используемое по умолчанию значение application /

x-www-form-uriencoded, Web-браузер передавал бы данные в виде одной строки

с разделяющими запятыми, в которой имена и значения были бы разделены ам —

персантами (&). Тем не менее, независимо от типа кодирования, важно пони —

мать, что Web-браузер передает результаты формы в виде пар имя/значение. Ре — зультаты заполнения формы включают имена всех полей ввода текста (как содержащих данные, так и пустых), но для флажков, переключателей и элемен —

тов списка выбора Web-браузер передает пары имя/значение только для выбран- ных элементов.

Следует иметь в виду, что использование maiito : в атрибуте action может

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

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

себе) без участия провайдера услуг Internet и без использования серверных CGI —

сценариев. В главе 10, посвященной РНР, и главе 11, посвященной ASP, будет

подробно рассказано об обработке результатов форм на Web-сервере. За счет ис — пользования серверных сценариев результаты заполнения формы можно отправ — лять по электронной почте (через почтовый сервер SMTP), даже если в системе посетителя не установлена почтовая программа.

Глава 3. HTML-формы 16 1





Управление расположением элементов и текста формы с помощью HTML-таблиц

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

какие другие элементы размещения объектов* на форме, кроме дескрипторов аб —

зацев () и новых строк (). Тем не менее, в некоторых случаях группу флажков или переключателей необходимо расположить вертикально или гори- зонтально, что позволяет улучшить внешний вид формы. Аналогично, при со — здании формы вопросов и ответов вопросы удобно расположить в левой части формы, а ответы на них — в правой части. К счастью, на форме можно исполь- зовать таблицы, при этом в ячейки таблицы можно помещать целые формы.

Предположим, например, что на форме содержится многострочное текстовое

поле ввода, как показано на рис. 3.16, надпись для которого расположена в ниж —

нем левом углу поля (такое расположение имеет место по умолчанию при поме- щении текста и графики в один абзац).



Разделите текст надписи и элемент формы, поместив их в отдельные ячейки таблицы. Таким образом, вы получите возможность независимо выравнивать над — пись и поле ввода (элемент формы). Вставьте надпись в левый столбец таблицы,

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

vaiign дескриптора равным «top11 . После этого задайте значение атрибута

height обоих дескрипторов равным высоте многострочного тестового поля

в пикселях. В результате браузер выведет на экран текстовую надпись возле верх — него левого угла текстового поля, как показано на рис. 3.17.

16 2 Глава 3. HTML-формы





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

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

писи, как ЭТО было сделано С наДПИСЬЮ «Сообщение:» И МНОГОСТРОЧНЫМ ПОЛем ввода в предыдущем практикуме.) Если поместить флажки, приведенные на рис.

13.17, в многострочную таблицу с несколькими столбцами, код которой находит —

ся ниже, можно расположить флажки, как показано на рис. 3.18.





Глава3.HTML-формы 16 3





Обратите внимание, что таблицы используются для выравнивания элементов формы, но сами остаются невидимыми. При создании формы иногда бывает

удобно установить значение атрибута border дескриптора формы рав — ным 1, что позволит увидеть ячейки таблицы. Затем, после выполнения вырав —

нивания элементов формы «сетку» таблицы можно снова отключить, установив значение атрибута border равным о.

Создание клавиши быстрой навигации по форме

с помощью дескриптора

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

значение текстового поля, переключателя или флажка, посетитель не может ис — пользовать буквы в таких надписях для перемещения по форме, установки «га- лочки» флажка или выбора переключателя. Для использования текста для

навигации по форме и выбора элементов формы, каждая текстовая надпись дол —

жна быть помещена между начальным и конечным дескрипторами метки

().



ПРАКТИКУМ

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



16 4 Глава 3. HTML-формы







С каждым дескриптором связаны два очень важных атрибута:

• for. Значение атрибута for дескриптора должно соответствовать значению атрибута id элемента формы, с которым вы хотите связать дан- ную надпись.

• accesskey. Клавиша быстрого доступа, которую посетитель может нажать

для перехода к полю ввода текста (если метка связана с полем ввода), вы —

бора переключателя (если метка связана с переключателем) и установки или снятия флажка (если метка связана с флажком). Для использования клавиши быстрого доступа посетитель должен нажать и удерживать клави — шу ALT, а затем нажать клавишу, соответствующую значению атрибута

accesskey.



Клавиша, соответствующая значению атрибута accesskey, не обязательно

должна присутствовать в тексте метки (т. е. в тексте, заключенном между началь — ным и конечным дескрипторами метки). Тем не менее, чтобы использовать кла — вишу быстрого доступа, посетитель должен ее знать. Поэтому, в качестве значе — ния атрибута accesskey используется одна из букв, присутствующая в тексте

метки, и в самой метке подчеркивается соответствующая буква (или цифра), на основе чего посетитель может определить клавишу быстрого доступа. Обратите внимание, что в приведенном примере для подчеркивания букв, соответствую — щих клавишам быстрого доступа, для каждой метки применяются начальный и

конечный дескрипторы подчеркивания (). Как результат, использование меток для навигации или выбора элементов формы сводится к аналогичным дей — ствиям, характерным для Windows-приложений.



ПРИМЕЧАНИЕ Несмотря на то что метки для элементов формы (определенные с помо — щью текста, помещенного между начальными и конечным дескрипторами

) являются частью стандарта HTML 4, их поддерживают только браузеры Internet

Explorer 4.0 (и выше) и Netscape Navigator 6.0 (и выше). Web-браузеры, не поддерживающие

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

Глава 3. HTML-формы 16 5



Указание Web-браузеру выполнять функцию проверки

данных формы с помощью атрибута onClick

В предыдущих советах этой главы было показано, как использовать атрибут

onSubmit в дескрипторе
для указания Web-браузеру на необходимость вы — полнения функции проверки данных перед отправкой результатов формы по ад — ресу, заданному в атрибуте actio n формы. К сожалению, при замене стандарт — ной кнопки Submit графическим изображением с гиперссылкой на метод submit () формы Web-браузер перед передачей результатов формы не будет вы — полнять сценарий, заданный в атрибуте onSubmit.



ПРАКТИКУМ

Чтобы браузер выполнял сценарий перед передачей результатов формы при ис- пользовании графического изображения в качестве кнопки Submit, установите значение атрибута onclick в гипперссылке, прикрепленной к изображению, рав —

ным имени функции проверки данных формы, а не вызову метода submit()

формы. Затем, если функция проверки определит, что данные формы не содер —

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

лядеть следу’ющим образом:



(В операторе if переменная Forin_Resuits_vaii d представляет собой всего лишь заполнитель, который указывает, что если результаты формы не содержат ошибок, выполняется операция передачи результатов формы, в противном случае будет выдано предупреждение посетителю и сценарий вернется к вводу данных формы.) Атрибут onclic k в гиперссылке, прикрепленной к графическому изоб — ражению, используемому в качестве кнопки Submit, в свою очередь, будет содер —

жать ссылку на функцию проверки данных формы, а не на метод submit () :

16 6 Глава 3. HTML-формы











(В этом примере ExampleForm представляет собой имя формы, результаты ко — торой посетитель пытается передать, а SubmitButtonGraphic. GIF — имя файла графического изображения, используемого вместо стандартной кнопки Submit.)

При использовании на форме стандартных кнопок (а не графических изобра — жений) в описании кнопок также можно использовать атрибут onclick, который

сначала проверяет правильность введенных данных, а затем передает результаты

заполнения формы. Просто замените стандартную кнопку Submit (созданную с

помощью дескриптора
, значение атрибута type которого равно

«submit») кнопкой, созданной с помощью следующего кода:

onClick==»validateAndSubmit(ExampleForm)»

Передача значений Web-серверу с помощью скрытых полей

Скрытое (hidden) поле представляет собой элемент формы, который, как и пред — полагает его название, не видим для человека, заполняющего форму. Скрытые поля можно использовать для передачи Web-серверу дополнительных пар имя/значение

помимо данных, введенных посетителем сайта. Например, следующий HTML-код

поиволит к ТОМУ, что Web-6Dav3eo визуализирует (ЬООМУ. показанную на оис. 3.20.



Глава 3. HTML-формы 167





Обратите внимание, что в приведенном примере атрибуты type трех полей

ввода в конце описания формы содержат значения «hidden» и не отображаются

на экране (как показано на рисунке). Несмотря на то что Web-браузер не визуа — лизирует скрытые поля, он передает серверу пары имя/значение для всех полей,

как видимых, так и скрытых (см. рис. 3.21).



значение скрытого поля можно задать, соответствующим образом установив ат — рибут value в дескрипторе
, как показано на примере первого и третьего скрытых полей в следующем коде:



Рис. 3.21. Результаты заполнения формы, переданные Web-серверу после

ввода «Konrad» в поле Username и «King» в поле Password

Независимо от того, были присвоены скрытым полям начальные значения или нет, скрытым полям можно присваивать значения в JavaScript-сценариях.

Например, функция vaiidateAndSubmito, выполняемая в приведенном выше примере при нажатии кнопки Submit, включает следующие строки:

ExampleForm. LoginAttempts. value++;

ExampleForm. LoginDateTime. value = new Date();

Первая строка увеличивает на 1 значение скрытого поля LoginAt tempts, a

вторая записывает в скрытое поле LoginDateTime текущее значение даты и вре — мени.

Сокрытие ввода пользователя от просмотра в поле ввода пароля

Поле ввода пароля представляет собой разновидность однострочного поля ввода текста. В отличие от скрытых полей (которые были рассмотрены в преды — дущем совете), Web-браузер визуализирует поле ввода пароля. Тем не менее, бра —

168 Глава 3. HTML-формы





узер не отображает на экране вводимый посетителем текст. Все символы теста заменяются символами звездочки (*). Поля ввода пароля используются в том случае, когда нежелательно, чтобы посторонний человек мог подсмотреть вводи — мый посетителем текст. Как правило, поля ввода пароля используются для ввода пароля или других кодов безопасности для входа на Web-сайт или регистрации под определенным именем учетной записи на Web-сайте. Некоторые сайты, осо — бенно обеспокоенные вопросами безопасности, требуют даже ввода имени пользователя или имени учетной записи в поле ввода пароля.

ПРАКТИКУМ

Для создания поля ввода пароля необходимо поместить в соответствующее место

HTML-кода дескриптор
следующего вида:

name=»Пароль:» id=»PW» size=»20″>



Значение атрибута type указывает, что создается поле ввода пароля, а не обычное поле ввода текста (для которого, как вы знаете,, значение атрибута type равно «text») . Задавая значение атрибута type равным «password» вы говорите Web-браузеру скрывать все символы вводимого в поле текста. (Хотя в приведен — ном примере значения атрибутов name, id и siz e установлены, соответственно, равными «Пароль:», «PW» и «20″, они могут быть любыми.)



ПРИМЕЧАНИЕ Несмотря на то что Web-браузер скрывает содержимое поля ввода пароля

от просмотра за счет замены символов текста звездочками (*), он не кодирует содержимое поля. Таким образом, при передаче данных, введенных в лоле ввода, по незащищенному со — единению человек с определенными знаниями может перехватить пароль (передаваемый в виде открытого текста) и использовать, преследуя какие-то неблаговидные цели.



В главах 10, 11 и 12 вы узнаете, каким образом можно использовать формы входа в систему (содержащие поля имени пользователя и пароля) для регистра- ции в онлайновых базах данных. Более того, в главе 12 будет рассказано об элек —

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

да пароля), что защитит их от просмотра посторонними. А сейчас важно пони- мать, что поля ввода пароля позволяют скрывать от просмотра данные, вводимые посетителем в однострочное поле ввода текста.



Вставка на форму кнопки общего типа

В предыдущих советах вы научились помещать на форму кнопки Submit и

Reset. Поскольку упомянутые кнопки присутствуют практически на всех формах, браузеры, которые поддерживают механизм форм, «знают», что должно происхо- дит, когда посетитель нажимает любую из этих двух кнопок. Например, Web-бра — узеры, поддерживающие формы, при нажатии кнопки Submit будут передавать результаты формы по URL-адресу, указанному в атрибуте actio n дескриптора

формы (конечно, если вы не изменили поведение кнопки Submit по

умолчанию, добавив в дескриптор
атрибут onSubmit). Аналогично, при нажатии кнопки Reset Web-браузер очищает все данные, введенные в объекты

Глава3.HTML-формы 16 9





формы, и возвращает их в исходное состояние, если только вы не изменили по —

ведение кнопки Reset по умолчанию, указав в дескрипторе
атрибут

onReset.

Для создания на форме кнопки Reset или Submit вставьте дескриптор
,’

значение атрибута type которого равно соответствующему значению (т. е.

type=»reset» для кнопки Reset и type=»submit» для кнопки Submit). Помимо со — здания кнопок Reset и Submit, дескриптор
можно использовать для со- здания кнопки третьего типа, функция которой заранее не определена. Как пра- вило, кнопки третьего типа применяются для запуска в Web-браузере сценариев.



ПРАКТИКУМ

Памятуя о синтаксисе создания кнопок Reset и Submit, для вас не будет сюрп —

ризом, что для вставки на форму кнопки «общего» типа необходимо вставить в соответствующем месте HTML-кода между начальным и конечным дескриптора — ми (
) следующую строку:

, Значение «button» атрибута type указывает Web-браузеру на необходимость создания на форме кнопки. После рисования кнопки браузер использует текст,

содержащийся в атрибуте value дескриптора
в качестве надписи на кнопке. (Необходимо убедиться, чтобы значение, присвоенное атрибуту value, го — ворило о назначении кнопки.) При нажатии кнопки посетителем Web-браузер вы — полнит сценарий, заданный значением атрибута onclick дескриптора
.

Кнопки такого типа можно использовать для выполнения сценариев, вычис —

ляющих сумму значений других элементов формы, вывода на экран сообщений,

загрузки в окно или фрейм новой Web-страницы или вставки в список выбора нового элемента. Таким образом, функция кнопки общего назначения ограниче —

на только вашим воображением и методами используемого вами сценарного языка.

Блокирование и разблокирование элементов

формы «на лету»

Иногда элементы формы могут носить взаимоисключающий характер. Напри —

мер, если вы зададите посетителю вопрос: «Состоите ли вы в браке?» и в каче — стве ответа на этот вопрос посетитель выберет переключатель нет, ему уже не

нужно будет вводить имя супруга в поле spouse. Аналогично, если на форме на — ходится группа флажков, в которой посетитель может выбрать любые устраиваю —

щие еГО ОПЦИИ, И ИМ был ВЫбраН флаЖОК Наподобие «Ничего» ИЛИ «Ничего из

перечисленного», он уже не должен выбирать другие флажки в группе. Каждый элемент формы имеет атрибут disabled, который можно использовать для зап — рещения пользователю изменять элемент.



ПРИМЕЧАНИЕ Некоторые устаревшие браузеры не поддерживают атрибут disabled. Та — ким образом, проверку правильности ввода в форму данных должна осуществлять функция

проверки, даже если имеется сценарий, который устанавливает атрибут disable d для со — ответствующих полей формы.

170 Глава 3. HTML-формы





ПРАКТИКУМ

Предположим, например, что форма, показанная на рис. 3.22, используется для запроса у посетителя его семейного положения. За счет выполнения следующей JavaScript-функции можно блокировать ввод в поле имени второй половины и запретить посетителю изменять его содержимое или даже устанавливать на него курсор, т. е. перемещать фокус (при этом само поле затеняется серым цветом).





Для указания Web-браузеру на необходимость запуска приведенной выше фун —

кции при выборе переключателя Maritaistatu s введите следующий код:



Состоите ли вы в браке?

name=»MaritalStatus» value=»Married»

onclick=»disableSpouseName(ExampleForm, false) » />Состою

type=»radio» name=»MaritalStatus» value=»Single»

onclick=»disableSpouseName(ExampleForm, true)» />He состокК/р>



Атрибут onclick дескриптора
для переключателя заставляет Web-бра —

узер ВЫПОЛНИТЬ фуНКЦИЮ disableSpuseName() при выборе ЭТОГО переключателя.

Передавая функции disableSpuseNameо значение False или True, Web-брау — зер блокирует или разблокирует поле SpouseName (на рис. 3.22 оно обозначе — но как «Имя супруга (и) :») . Так, например, если посетитель выберет пере —

ключатель «Состою в браке», функции disableSpuseName () будет передано значение False. Функция, со своей стороны, установит значение атрибута disabled элемента SpouseName формы равным False, что сделает элемент актив- ным (разблокирует его) и посетитель сможет ввести в поле имя своей половины.