Искусство оформления сайта. Практическое пособие

Прежде всего для отправки заказа в режиме он-лайн можно использовать контактную форму. Формы удобны, понятны, приятны. Ими легко и с удовольствием пользуются все посетители. Откроем html-код странички для формирования заказов (ссылки на которую ведут СО ВСЕХ ПРОЧИХ СТРАНИЦ ресурса) и в тело документа внесем описание простейшей формы:

‹Н2›Доброго времени суток, уважаемый посетитель нашего магазина!‹Н2›

‹p›Огромное спасибо вам за живой интерес к нашим товарам. Здесь вы сможете легко и быстро оформить заказ, после чего с вами непременно свяжется наш менеджер, и ваша покупка благополучно будет вам доставлена.‹/p›

‹form name=“mailer” method=“post”

enctype=“text/plain” onSubmit=“(document.mailer.action += mailtoandSubject)”›

Введите ваше имя:‹br›

‹input type=“text” name=“Name” size=“ 24”

onChange=“msg(this.form)”›‹br›

Укажите тему сообщения (Заказ/Дозаказ):‹br›

‹input type=“text” name=“Subject” size=“ 24”

onChange=“msg(this.form)”›‹br›

Сюда впишите наименование товара и ваши контактные данные:‹br›

‹textarea name=“Message” cols=“ 40” rows=“ 6”

onChange=“msg(this.form)”›‹textarea›‹br›

‹input type=“submit” value=“Отправить”

onClick=“return checkIt()”›

‹input type=“reset” value=“Очистить”›‹/form›

‹p›Благодарим за покупку! Пусть наши цветы всегда радуют ваш взгляд.‹/p›

Заметим, что приведенный здесь пример неудачен. Вместо слова «Очистить», которое поставлено намеренно, нужно написать «Сброс» или «Очистить форму». Дело в том, что два одинаковых по длине слова на букву «О» (отправить и очистить), расположенные на двух соседствующих кнопочках послужат причиной множества досадных ошибок, отчего ваш сайт невзлюбят посетители. Примите сказанное к сведению и запишите код в вашем редакторе, после чего проверьте через опцию просмотра. Форма готова, но она пока непригодна для отправки сообщений. Для этой цели нам нужно написать команду-скрипт, которая целиком помещается в заголовке документа. Напомню, что скрипты разумнее всего писать не промеж мета-имен, а непосредственно перед закрывающим тэгом ‹/head›:

‹script language=“JavaScript”›

function checkIt() {

//____________________

if (document.forms.mailer.Name.value!= “”) {

} else {

alert (“\nОбласть \ “Имя\” в форме. \n\nБудьте добры ввести свое имя.”);

document.forms.mailer.Name.focus();

return false;

}

//____________________

if (document.forms.mailer.Subject.value!= “”) {

} else {

alert (“\nОбласть \ “Тема\” в форме. \n\nБудьте добры указать тему.”);

document.forms.mailer.Subject.focus();

return false;

}

//____________________

if (document.forms.mailer.Message.value!= “”) {

} else {

alert (“\nОбласть \ “Сообщение\” в форме. \n\nБудьте добры назвать товар и контактные сведения.”);

document.forms.mailer.Message.focus();

return false;

}

//____________________

}

function msg() {

document.mailer.action = “mailto: здесь ваш почтовый адрес”

mailtoandSubject = ((`?Subject=` +

document.mailer.Subject.value) + ` amp;Body=` +

document.mailer.Message.value);

}

‹/script›

Совершенно очевидно, что три «присказки», которыми открывается скрипт и которые начинаются со слов «если документ…», – это функции проверки. Стоит покупателю забыть заполнить какую-нибудь ячейку формы, как компьютер немедленно оповестит его об этом. Но поскольку у нас диалоговых окошек только три, то, наверное, использовать данные функции будет чистой воды издевательством над собой. Выбрасываем их из скрипта, оставляя только функцию отправки, помещенную последней. Однако вы еще вернетесь к этой страничке, когда вам потребуется сверстать более сложную форму. Обратим внимание и на значок //____________________. Это обозначение разделителя функций, совершенно ненужное для компьютера, так что можете и от него отказаться. Но в больших формах все же стоит пользоваться подобным разделителем, чтобы не запутаться в собственных письменах.