Май 2010

ФУНКЦИЯ countSelections( ) ВОЗВращает False. Функция ValidateFrom() (КОТО —

рая вызывает функцию countseiectionso) , в свою очередь, возвращает атри —

буту onSubmit дескриптора
значение, возвращаемое функцией

countSelections().

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

формы необходимо добавить атрибут onSubmit, ко —

торый должен выглядеть следующим образом:





Не пропустите ключевое слово «return», которое находится перед вызовом

функции vaiidateForm(). В противном случае Web-браузер передаст результаты

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

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

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





Если функция vaiidateForm() возвращает значение True, Web-браузер передаст

результаты формы по URL-адресу, указанному в атрибуте method дескриптора

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



Создание на форме выпадающего списка (меню выбора)

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

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



ПРАКТИКУМ

Например, для организации меню выбора (или выпадающего списка), показан —

ного в нижней части рис. ЗЛО, вставьте в HTML-код Web-страницы начальный и

конечный дескрипторы выбора ( ) и начальный и конечный дескрипторы опций (), как показано в конце следующего кода:





Как и ранее, текстовая надпись, которая описывает назначение выпадающего

СПИСКа (В Приведенном Примере «Выберите максимальный уровень ответ — ственности» не является частью HTML-кода списка выбора. Дескриптор

выпадающего списка может содержать следующие атрибуты:

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





• size. Количество пунктов меню (или опций), одновременно видимых на

экране. В приведенном примере (size=»i» ) в списке до нажатия кнопки раскрытия в правой части элемента на экране будет виден всего один пункт. Если значение атрибута siz e превышает единицу, Web-браузер бу — дет визуализировать выпадающий список в виде списка элементов (с поло — сой прокрутки, если это необходимо), а не в виде выпадающего списка с кнопкой раскрытия.

• id. Используется для присвоения выпадающему списку уникального име — ни. Значение атрибута id можно использовать для работы с выбранным в списке элементом в рамках внедренного на Web-страницу сценария.

• name. Используется для идентификации выпадающего списка на форме.

Значение атрибута name Можно использовать для работы с выбранным в

списке элементом в среде сценария, выполняемого Web-браузером. Более того, Web-браузер будет передавать Web-серверу значение атрибута name в

качестве части «имя» пары имя/значение для каждого выбранного посети —

телем элемента списка.

• multiple. Если в дескрипторе выпадающего списка присутствует

атрибут multiple, Web-браузер позволит посетителю сайта выбирать в списке несколько элементов. В противном случае при выборе нового эле — мента Web-браузер будет автоматически снимать выделение с предыдущего

элемента (если таковой существует).



Для вставки элемента в выпадающий список необходимо поместить текст

элемента между начальным и конечным дескрипторами опций (

), которые, в, свою очередь, находятся между начальным и конечным

дескрипторами списка () . Дескриптор имеет следу — ющие атрибуты:

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





• value. Строка, которая будет передаваться Web-серверу в качестве части

«значение» пары имя/значение, если посетитель выбрал элемент выпадаю — щего списка (или списка выбора). При нажатии кнопки Submit Web-брау — зер передает только значения атрибутов name (выпадающего списка) и value (опции), т. е. пару имя/значение для выбранного элемента (или эле — ментов) списка. Если дескриптор не содержит атрибута value, Web-браузер в качестве части «значение» пары имя/значение передает сер- веру текст выбранного элемента (который находится между начальным ко —

нечным ДеСКрИПТОраМИ ОПЦИЙ ()).

• selected. Указывая атрибут selecte d в дескрипторе, вы говорите

Web-браузеру при начальной визуализации формы с выпадающим списком

и после нажатия кнопки Reset выбирать соответствующий данному деск — риптору элемент в качестве элемента по умолчанию.



Web-браузер выделяет выбранный в выпадающем списке элемент (или элемен —

ты) путем его (их) подсветки. Если в дескрипторе не указан атрибут multiple, посетитель может выбирать в списке только один элемент. В таком случае при выборе нового элемента Web-браузер будет автоматически снимать выделение с ранее выбранного элемента.

Чтобы разрешить посетителю сайта одновременно выбирать несколько эле —

ментов выпадающего списка, включите в дескриптор списка атрибут multiple. Более того, при обеспечении возможности выбора нескольких элемен — тов выпадающего списка желательно привести текст, например, «выберите все

нужные опции» И «для выбора нескольких элементов удерживайте нажатой клавишу Ctrl» . (Даже если выбор нескольких элементов из списка и разрешен, без удержания в нажатом состоянии клавиши Ctrl Web-браузер при выборе ново —

го элемента будет снимать выделение с ранее выбранного элемента.)





? С П \ А н е о б х о д и м о, ч т о б ы п о с е т и т е л ь в ы б р а л и з в ы п а д а ю щ е г о с п и с к а ( т. е.

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

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

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

торе атрибут multiple. Если же необходимо, чтобы посетитель сайта

имел возможность выбирать в меню одновременно несколько элементов, включи —

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





те в дескриптор атрибут multiple. Как и в случае с группой переклю —

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





Если вы хотите, чтобы посетитель выбрал из списка выбора хотя бы один эле —

мент, введите в качестве первого элемента списка текст наподобие » — выберите

один элемент —» ИЛИ «— Выберите хотя бы один элемент —» , ЧТО ПО — ЗВОЛИТ посетителю понять, что он просто обязан сделать выбор. Далее необходи — мо гарантировать, что посетитель не выбрал первый элемент списка (поскольку он фактически не является опцией). Приведенный ниже JavaScript-сценарий, на — пример, гарантирует, что посетитель сайта выбрал, по крайней мере, один эле — мент в выпадающем списке (причем не первый элемент, который имеет индекс

0):





Свойство seiectedindex содержит индекс выбранного посетителем элемента (элементов) выпадающего списка. Чтобы гарантировать, что посетитель не может выбрать первый элемент списка, необходимо проверить, что первый элемент (т. е. элемент с индексом 0) не выбран, а затем поверить, выбран ли хотя бы один из остальных элементов списка (со значениями индекса 1 и выше).

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

onSubmit.’

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

onSubmit=» return ValidateForm(ExampleForm) »

action=»http://NVBizNet2. com/_scripts/__pl/FrmScrpt. CGI»

method=»POST» ‘ .

enctype=»application/x-www-form-urlencoded»>



He пропустите ключевое слово «return» , которое находится перед вызовом

функции vaiidateForm(). В противном случае Web-браузер передаст результаты

формы Web-серверу, даже если функция vaiidateForm() вернет значение False, указывающее на наличие ошибок в результатах формы. Если все атрибуты деск —

риптора введены без ошибок (как в приведенном примере), атрибут onSubmit за — ставит Web-браузер после нажатия посетителем кнопки Submit выполнить

JavaScript-сценарий с целью проверки результатов заполнения формы. Если фун —

кция vaiidateForm() возвращает значение’True, Web-браузер передаст результа — ты формы по URL-адресу, указанному в атрибуте method дескриптора
. В противном случае Web-браузер вернется к форме ввода данных и поместит кур —

сор на элемент формы, указанный в методе focus () в коде JavaScript-сценария.



Изменение элементов списка выбора на основании

введенных посетителем данных

Ранее в этой главе мы говорили о том, что список выбора представляет собой меню, из которого посетитель может выбрать один или несколько элементов в

зависимости от того, присутствует ли атрибут multipl e в дескрипторе списка выбора. (Если атрибут multipl e указан, Web-браузер даст посетителю возможность выбирать из меню несколько элементов.) Несмотря на то что вы должны указать возможность или невозможность выбора в списке нескольких элементов в описании списка выбора, содержащиеся в списке элементы можно менять в любое время, даже после того как браузер визуализировал этот список.

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



ПРАКТИКУМ

В этом примере меню выбора (показанное на рис. 3.11 над кнопками Submit и

Reset ) СОДерЖИТ ТОЛЬКО ОДИН Элемен т — «— Имена члено в семь и —» («- —

Famil y Member Names — » ) . Чтоб ы ДОбаВИТЬ В СПИСОК Выбора НОВЫе Элемент ы (т. е. имена членов семьи), запрограммируем кнопку для вызова JavaScript-функ — ции, которая будет вставлять в список новый элемент:

onClick=»addToList (ExampleForm) «X/p>



Далее определим функцию addToListo, которую Web-браузер будет вызывать

при нажатии посетителем кнопки «Добавить имя в список». Для этого вставим следующий JavaScript-код после дескриптора в рамках HTML-кода Web- страницы. (Имя функции и значение атрибута value кнопки будет зависеть от функции, которая должна выполняться в результате нажатия кнопки.)

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





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





После проверки ввода пользователем хоть какой-нибудь информации в тек —

стовое поле имени члена семьи функция addToListo добавляет новый элемент

в список выбора с использованием следующего синтаксиса:

ИмяСпискаВыбора. option s [ИндексНовогоЭлемента] =

new Option(ТекстОпции, ЗначениеОпции, SelectedByDefault,

SelectedWhenAdded) ;



В нашем примере параметры SelectedByDefault И SelectedWhenAdded В ВЫ —

зове new Option имеют значения 0. Это значит, что вновь добавленные новые элементы списка по умолчанию являются невыбранными, и во время добавления нового элемента Web-браузер не выбирает его автоматически. Если же требуется, чтобы Web-браузер выбирал каждый елемент после его добавления пользовате — лем, установите значение параметра SelectedWhenAdded равным 1.



Передача всех значений списка выбора на

Web-сервер с использованием скрытых полей

В предыдущем практикуме вы посмотрели, как использовать JavaScript-опера — тор new для добавления дополнительных опций (то есть элементов) в список вы — бора в ответ на введенную посетителем инормацию в текстовом поле формы. Од —

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

В случае, когда вы предлагаете посетителю добавить в список выбора новые элементы, необходимо чтобы передавались не только выбранные в списке эле — менты, но также и невыбранные. Иначе какой же смысл предлагать посетителю вводить что-либо, можно сказать, впустую.

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

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

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

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

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





ПРАКТИКУМ

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





// Другие JavaScript-функции

function prepFormResuits(Form)

{

// Операторы для проверки, заполнены ли поля формы (если необходимо) .

// Вернуть значение false, если поля не заполнены,

var itemList = «»;

for (var i = 0; i

{

itemList = itemList +

Form. OldestFamilyMember. options[i].value;

}

Form. RelativeNameList. value = itemList;

return;

}

// Другие JavaScript-функции

// —>



Функция prepFromResuito в приведенном примере предполагает, что описа —

ние функции включает определение следующего скрытого поля, в которое она мо- жет поместить значения элементов списка выбора, объединенных в одну строку:

name=»RelativeNameList» value=»">



Кроме того, функция prepFromResuito предполагает, что дескриптор

формы содержит атрибут onSubmit, который указывает, что функция

prepFromResuito должна вызываться перед передачей результатов формы брау — зеру при нажатии кнопки Submit. (Нам необходимо, чтобы Web-браузер перед

передачей серверу результатов формы выполнял функцию prepFromResuito, ко —

торая помещает элементы списка выбора в скрытое поле формы с именем

RelativeNameList).



Создание на форме кнопки Reset

Большинство форм содержат кнопку сброса Reset, которую посетитель может нажать для приведения всех элементов формы (текстовых полей ввода, флажков,

переключателей> выпадающих списков) в исходное состояние.



ПРАКТИКУМ

Например, для помещения на форму кнопки Reset (показанной на рис. 3.12 в нижнем левом углу формы) необходимо вставить следующий дескриптор


со значением атрибута type, равным «reset » между начальным и конечным ат —

рибутами формы () в том месте, где эта кнопка должна находиться:

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





Если вы хотите изменить заголовок кнопки Reset, включите в дескриптор

кнопки Reset соответствующий тест в качестве значения атрибута value. Например, ЧТОбЫ назвать КНОПКУ Reset «Очистить форму» («Clear Form»), определите следующий дескриптор
:

value=»Очистить форму»>



Несмотря на то что при нажатии кнопки Reset Web-браузер возвращает все элементы формы в их исходное состояние, он не перемещает курсор (или фо —

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

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

В деСКрИПТОр
форМЫ ДЛЯ ВЫПОЛНеНИЯ браузером Сценария onRese t

после нажатия кнопки Reset.)

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



Предотвращение случайной очистки посетителем элементов формы

При нажатии кнопки Reset Web-браузер должен очистить все введенные посе — тителем сайта данные и восстановить исходное состояние для всех элементов

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

ПРАКТИКУМ

Аналогично тому, как атрибут onSubmit заставляет Web-браузер выполнить сце — нарий перед выполнением стандартной для кнопки Submit операции по переда —

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

вает браузеру при нажатии посетителем кнопки Reset выполнить JavaScript-функ — цию PreResetProc():



В свою очередь, JavaScript-функция может выполнять предварительную обра- ботку перед восстановлением состояния формы, начиная со стандартной очистки

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

Как и атрибут onSubmit, атрибут onReset указывает браузеру вызвать JavaScript —

функцию. Затем, если функция возвращает значение False, Web-браузер не бу — дет выполнять стандартную процедуру очистки формы, выполняемую при нажа — тии кнопки Reset. В противном случае, если возвращается значение True, выполняется стандартная очистка элементов формы и возврат их в исходное со — стояние.

Так, например», следующий JavaScript-код при использовании его совместно с формой из предыдущего примера выведет на экран показанное на рис. 3.13 диа- логовое окно подтверждения.





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





Если посетитель нажмет кнопку «Cancel» («Отмена»), метод confirm() и фун —

кция PreResetProcO вернут значение False, и Web-браузер не будет выполнять стандартную процедуру очистки элементов формы. Если же была нажата кнопка

ОК, метод confirm о и функция PreResetProcO вернут значение True, и Web — браузер очистит все элементы формы и вернет их в исходное состояние.



Создание на форме кнопки Submit

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

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

нарию), указанной в атрибуте actio n дескриптора
формы, о котором упоминалось в начале этой главы.



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

HTML-кода между начальным и конечным дескрипторами (
) вста —

вить, следующую строку кода:

value=»Отправить» name=»Bl»>



Кнопка Submit имеет следующие атрибуты:

• value. Текст, который будет выводиться Web-браузером на кнопке Submit в

качестве ее заголовка. В приведенном примере кнопка Submit будет содер —

жать надпись «Отправить» (как показано на рис. 3.11). Если атрибут value опустить, Web-браузер назовет кнопку Submit в соответствии с уста —

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





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

зеры Internet Explorer и Netscape Navigator по умолчанию называют кнопку

Submit как «Submit Query» («Передать запрос»)).

•’ name. Атрибут name можно использовать для присвоения кнопке Submit имени. Если необходимо, чтобы Web-браузер в результаты формы, которые он передает Web-серверу, включил пару имя/значение для кнопки Submit, установите в дескрипторе
кнопки оба атрибута — name и value.

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

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