Что такое HTTP 14 страница

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

Рис. 15.10. Пример формы. Вернее, только ее веб-интерфейс

СОВЕТ

Многие пользователи любят перемещаться межу полями форм с помощью клавиши Tab. Еда вы хотите указать какое-то особенное место, в которое должен попасть пользователь np«I этом, можете добавить к элементам формы атрибут tabindex. Он может принимать знамени от 0 до 32676. Понятно, что первым будет тот, у кого это значение меньше (таким образом, первый пункт должен иметь tabindex="1", второй — tabindex="2" и т. д.) После установки эти параметров переходы с помощью клавиши Tab будут полностью им соответствовать.

Возможно, вы заметили, что в элементе <form> значение атрибута action несколько необычное: используется URL типа mailto:.

Это означает, что введенные пользователем данные будут отправлены не просто на какой-то сервер для обработки скриптом, а на конкретный e-mail. Эта возможность чаще всего используется тогда, когда данные не нужно особо обрабатывать либо это можно сделать вручную. Возможен, впрочем, и третий вариант, когда программа-обработчик базируется на почтовом клиенте (в главе 16 это будет обсуждаться чуть подробнее).

Дизайн электронных бланков

Мм обсудили вопросы создания формуляров, но еще не затрагивали вопрос о том, как сделать их привлекательнее. Для этого придется немного подумать и кое-что написать на XHTML. После этого элементы формы станут выглядеть куда лучше, логичнее и интереснее. В этом разделе мы рассмотрим несколько подходов к оформлению электронных бланков.

Проблемы дизайна бланков

Центральной идеей оформления электронных формуляров является простота. Простота понимания пользователями, простота переходов с одной группы элемен-тов на другую, логическое разделение по темам. Дело это не такое простое, как кажется. Тут важно понимать еще и психологию посетителей сайта. Нужно чем-то очень хорошо привлечь их, иначе они не будут ничего заполнять. Краткое, компактное изложение того, что требуется от пользователя скорее привлечет его, чем долгие объяснения, извинения и просьбы.

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

• Используйте разнообразные разделители, чтобы сделать электронный бланк более понятным. В вашем распоряжении имеются такие элементы как <Ьг />, <hr />, теги-ограничители абзацев для разделения независимых частей бланка. Вместе с тем выделение текста с помощью <em>, <strong> можно использовать для создания визуальных меток и других элементов, улучшающих читабельность.
• Делайте бланки короткими. Это не всегда представляется возможным, однако, даже если бланк большой, следует разбивать его на несколько частей хотя бы с помощью <hr /> и подобных элементов. Чем короче секция, тем легче она воспринимается.
• Используйте интуитивный дизайн. Например, если расположить кнопку подтверждения отправки прямо посередине формуляра, то, очевидно, пользователь не станет заполнять то, что находится ниже ее. Общая тенденция заполнения бланков пользователями такова: заполнять как можно меньше. Поэтому если вариантов ответа не очень много, постарайтесь сделать как можно больше меню.
• Предупреждайте пользователей о незащищенных транзакциях. Нужно всегда честно сообщать о том, является ли ваш веб-сервер защищенным и как это можно проверить. Если вы запрашиваете у пользователей номера их кредитных карт или другую конфиденциальную информацию, нужно также давать им знать об этом.

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

Разрывы строк, абзацы и горизонтальные линии

В ориентированном на текстовую информацию XHTML вашим лучшим другом и товарищем при создании дизайна форм является отнюдь не элемент <р>, а, как ни странно, <bг />. А все почему? Потому что очень хочется напрямую редактировать вид формы, не давая вмешиваться браузеру. В результате вам придется проявить чуть больше активности, чем обычно, а ваша страница пополнится довольно большим числом элементов <bг />.

Рассмотрим следующий пример:

<form>
Введите свое имя и телефон:
Имя: <input type="text" name="f1rst" s1ze="30" />

<br />
Фамилия: <input type="text" name="last" s1ze="40" />

<br />
Телефон: <input type="text" name="phone" size="12" />

<br />
</form>

Добавление элемента <br /> приводит к тому, что каждое последующее текстовое поле появляется на новой строке. Это будет выглядеть намного привлекательнее и понятнее (рис. 15.11).

Рис. 15.11. Просто добавь <br />

СОВЕТ

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

Горизонтальные линии

Помещая внутри формы горизонтальную линию, вы тем самым четко и ясно говорите пользователю о том, что ниже располагается новый раздел. То ли последуют вопросы на другую тему, то ли окончание формы. В следующем примере добавлены элементы <hr />:

<form method="post" action="/cgi-bin/forml.pl ">
Имя: <input type="text" name="first_name" size="40"
maxlength="40" /><br /> E-mail: «input type=
" text" name="e-mail" size="40" maxlength="40 />"

<br />
Откуда вы узнали об этом сайте?<br />
put type="radio" name="where" value=
"web" checked="checked" />Поисковая программа
в Интернете или Интернет-ссылка.
<nput type="radio" name="where" value="advert" />
Реклама по радио или телевидению.
<nput type-" radio" name="where" value="press" />Из газеты.
<nput type="radio" name="where" value="other" />

Другое<bг />
свои комментарии относительно нашего сайта<bг />
<textarea name="comments" rows="10" cols="40">
Текстовое поле для ввода комментариев и замечаний
</textarea>

Если хотите подписаться на нашу рассылку,
поставьте флажок: <input type="checkbox" name''mailing" />
<br />
если хотите узнать телефон отдела продаж,
поставьте флажок: <input type="checkbox" name-"call" />
<br />
Если хотите получить печатный каталог,
поставьте флажок:<iпрut type="checkbox" narne="mailing"/>
<br />

<button name="submit" type="submit">
<span style="font-family: Courier: font-variant:
small-caps: font-size: 14рt">0тправить
</span>
</button>
<button name="reset" type="reset">
<span style="font-family: Courier: font-variant:
small-caps: font-size: 14pt">Очистить
</button>
</form>

Элемент <hr /> немного растягивает всю форму, это видно из рис. 15.12. Дело в том, что логичность формы и ее хорошо продуманная структура не менее важна, чем краткость представления.

Использование абзацев

Разбивать текст на абзацы — это хорошо. Удивляет обратное: иногда авторы никак не могут перейти от первого абзаца ко второму, и весь текст идет сплошной чередой. В нем трудно выделить основную мысль, он тяжело читается. Все то же самое касается и форм. Если вы не хотите очень сильно разрывать страницу большим количеством горизонтальных линий, используйте элементы <р>. На рисунке 15.13 представлены дальнейшие улучшения нашей формы, произведенные с помощью разделения ее на абзацы.

Рис. 15.12. Несколько горизонтальных линий сделают форму более изящной и логичной

Рис. 15.13. Использование элементов <р> для разделения частей формы пустым пространством

Рассмотрим исходный код страницы:

<form method="post" action="/cgi-Mn/forml.pl">
<р>Имя: <input type="text" name=
"first_name" size="40"

maxlength="40" /><br />
E-mail: <input type="text" name="e-mail" size="40"

maxlength="40" /><br />
<p>Откуда вы узнали об этом сайте?<bг />
<input type="radio" name="where" value="web"

checked="checked" />Поисковая программа в
Интернете или Интернет-ссылка<bг />
<input type="radio" name="where" value="advert" />
Реклама по радио или телевидению<bг />
<input type="radio" name="where"
value="press" />Из газеты<bг />
<input type="radio" name="where" value="other" />
Другое<bг />
<p>Введите свои комментарии относительно
нашего сайта<bг /> <textarea name="comments" rows="10"
cols="40"> Текстовое поле для ввода комментариев
и замечаний </textarea>
Если хотите подписаться на нашу рассылку,
включите флажок: <input type="checkbox"
name-'mailing" /><br />
Если хотите узнать телефон отдела продаж,
включите флажок: <input type="checkbox"
nauie="call" /><br />
Если хотите получить печатный каталог,
включите флажок:<iprut type="checkbox" name=
< mailing" /><br />
</p>
<hr />
<button name="submit" type="submit">
<span style="font-family: Courier: font-variant:
small-caps: font-size: 14рt">0тправить </span> </button>
<button name="reset" type="reset">
<span style="font-family: Courier: font-variant:
small-caps: font-size: 14рt">0чистить
форму</sраn>
</button>
</form>.

Другие элементы дизайна форм

Больше всего при создании форм раздражает кажущаяся невозможность вырав-нять текстовые поля. Сколько раз нам встречались поля «Имя» и «E-mail», столько раз они были сдвинуты друг относительно друга. Одним из решений проблемы является применение элемента <рге>. Все, что мы разместим между его открывающим и закрывающим тегами, будет в браузере выглядеть точно так же, как при редактировании исходного кода. <рге> позволяет, во-первых, выравнять поля ввода, а во-вторых, избежать применения элементов <br /> в конце <input>. Перед вами пример небрежно сделанной формы:

<Р>
Имя: <input type="text" name="first_name" size="40"
maxlength-"40" /><br />

Фамилия: <input type="text" name="last_name" size="40"

maxlength="40" /><br />
E-mail: <input type="text" name="e-mail" size="40"

maxlength="40" /><br />
</p>

Теперь добавляем элемент <рге> и форматируем страницу так, как нам нужно, прямо в исходном коде:

<рге>
Имя: <input type="text" name="first_name" size="40"

maxlength="40" />
Фамилия: <input type="text" name="last_name" size="40"

maxlength="40" />
E-mail: <input type="text" name="e-mail" size="40"

maxlength="40" />
</pre>

Вы, вероятно, еще помните о том, что пробелы создаются одноименной клавишем, а не клавишей Tab. Как всегда, придется немного повозиться с выравниваем. Проверять себя нужно как можно чаще, просматривая страницу в окне браузера. Тогда I ваша форма будет выглядеть так, как представлено на рис. 15.14 (внизу).

Рис. 15.14. Используйте контейнер <рге> для выравнивания элементов формы (нижние три строки рисунка)

СОВЕТ

По возможности используйте при редактировании страниц, содержащих элемент <рге>, моноширинный шрифт (типа Courier). В этом случае разметка исходного кода будет в точности совпадать с разметкой при просмотре результирующего файла, поскольку <рге> заставляет браузер осуществлять вывод именно таким типом шрифтов.

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

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

Откуда вы узнали об этом сайте?<br />
<dl>
<dd>
<input type="radio" name="where" value="web"

checked="checked" />
Поисковая программа в
Интернете или Интернет-ссылка</dd>
<dd>
<input type="radio" name="where" value="advert" />
Реклама по радио или телевидению
<inputtype="radio" name="where" value="press" />
Из газеты
</dd>
<input type="radio" name="where" value="other" />
Дpyroe

</dd>
</dl>

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

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

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

<form> <table>
<td>Имя</td> <td><input type="text" name="first_name"
size="40" maxlength="40" /></td>
<td>Фамилия</td> <td><input type="text" name=

"last_name" size="40" maxlength="40" </tr><td>
E-mail</td> <td><input type="text" name="e-mail"

size="40" maxlength="40" /></td> t </tr>
</table>
</form>

Можно поработать над свойствами таблицы и добиться того вида, который требу ется. Например, убрать границы, объединить ячейки, столбцы или строки и т. д. Вы все это уже знаете.

Структура формы

В последние версии стандарта HTML добавились два новых элемента: <fieldset> и <legend>, которые могут использоваться для задания определенной структуры формы. Как выясняется, они также удобны и для нестандартных браузеров, и для задания свойств таблиц стилей.

<fieldset> создает группы элементов формы. В некоторых браузерах эти группы еще и заключаются в рамки. В нашем примере в один <fieldset> можно заключить вопросы, касающиеся персональной информации, а в другой — все остальные. Этот элемент очень сильно напоминает <div>, а значит, может быть полезен при работе с таблицами стилей.

<legend>, как явствует из его названия, предназначен для создания меток групп элементов. Поскольку это обычный текст, то он может быть не только написан, но и прочитан специализированными речевыми браузерами. В листинге 15.1 представлен пример, который содержит и эти элементы, и многие другие, обсуждавшиеся в этом разделе. Обратите внимание, это XHTML-код той самой страницы, которая изображена в самом начале главы на рис. 15.1.

Листинг 15.1. Завершенный пример веб-формы

<!DOCTYPE html PUBLIC "\//W3C//DTD XHTML
1.0 Strict//EN"
" http: / /www. w3. org/TR/ xhtml 1 / DTD/ stri ct. dtd ">
<html xmlns="http: //www.w3.org/1999/xhtml">
<head>
<title>Книга жалоб и предложений</title>
</head>
<body>
<form method="post" action="/cgi-bin/forml.pl">

<h1>Книга жалоб и пpeдлoжeний</h1>
<fieldset style="background-color: #GCCCCC">
<legend><b>Koнтaктнaя информация</b></legend>
<table cellpadding="5">
<tr>
<td>
Имя: </td><td> <input type="text".name=
"first_name" size="40" maxlength="40"
</tr>
<tr>
<td>
Фамилия: </td><td><input type="text"
name="last_name" size="40" maxlength="40" />
</td>
</tr>
<tr>
<td>E-mail: </td><td><input type="text"

name="e-mail" size="40" maxlength="40" />
</td>
</tr>
</table>
</fieldset>
<fieldset style="background-color: #FFFFFF">
<legend><b>Bonpoсы и комментарии</b>
</ legend><p>
<b>Откуда вы узнали об этом сайте?</b></р>
<input type=" radio" name="where" value=
"web" checked="checked" /поисковая программа
в Интернете или Интернет-ссылка<bг />
<input type="radio" name="where" value="advert" />
Реклама по радио или телевидению<bг />
<input type="radio" name="where" value="press" />
Из газеты<bг />
<input type="radio" name="where" value="other" />дрyroe<br />
<р><b>Введите свои комментарии
относительно нашего сайта</b></р>
<р>
<textarea name="comments"
rows="10" cols="40">
Текстовое поле для ввода комментариев и замечаний
</textarea>
</р>
</fieldset>
<fieldset style="background-color: #CCCCCC">
<button name="submit" type="submit">
<span style="font-family: Courier: font-variant:
small-caps: font-size: 14pt">OTnpaBKTb
</span>
</button>
<button name=" reset" type="reset">
<span style="font-family: Courier; font-variant:
small-caps: font-size: 14рt">0чистить
форму</sрап>
</button>
</fieldset>
</form>
</body>
</html>

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

В последних версиях стандартов HTML и XHTML большое внимание уделяется цементам, обеспечивающим общедоступность веб-страниц. В частности, элемент <label> предназначен для создания связи между формой и предшествующим текстом. При этом элемент <form> обязательно должен иметь атрибут id. В контейнер <1abel> заключается текст, маркирующий форму. У него есть атрибут for, который ссылается на id формы. Рассмотрим пример:

<label for="first">Имя:</label><input type="text"

name="first_name" id="first" />

Элемент <label> говорит о том, что его содержимое является не просто текстом, а.меткой формы. На самом деле, он служит для обеспечения общедоступности, по скольку, например, речевые браузеры будут произносить метку особым «тоном». Нон для обычных браузеров он полезен тем, что хоть как-то связывает элементы управления и их описания между собой. Можно заключить в <lаbе1> и элемент формы целиком, как это сделано в следующем примере:

<lаbеl>Имя:
<input type="text" name="first_name" /> </label>

В этом случае уже не нужны ни for, ни id.

Хочется упомянуть об одном интересном атрибуте, который можно применять слюбыми элементами электронных бланков. Я имею в виду accesskey. Он позволяет определить клавишу для доступа к элементу. Например: Имя: <input type="text" name="first_name" accesskey="f" />
Нажимаете клавишу F в комбинации еще с какой-нибудь (обычно это Ctrl) и попадаете на поле ввода имени пользователя.

Резюме

В этой главе вы узнали практически все о создании интерфейса электронных бланков с помощью HTML. Вначале мы обсудили принцип их работы, элемент <form> него возможные составляющие. Затем познакомились с текстовыми полями, полями ввода, переключателями, флажками, полями ввода пароля, скрытыми полями и меню. После этого речь пошла уже о таких концептуальных вопросах, как создание интересного, понятного и привлекательного дизайна форм при помощи определенной разметки. Здесь мы обсудили некоторые методы структурной организации электронных бланков и их общедоступности, в частности возможности использования с нестандартными браузерами.

В следующей главе вы познакомитесь с CGI-скриптами и тем, как они обрабатывают данные HTML-форм.

Глава 16. CGI и сбор данных

• Что такое CGI?
• Языки CGI
• Простой CGI-скрипт
• Обращение к CGI
• Принцип работы скриптов
• Как я получаю данные из формы
• Свойство mailto:
• Выходная информация скрипта
• Поиск и использование скриптов
• Работа с готовыми скриптами
• Создание собственных скриптов
• Резюме

В предыдущей главе мы занимались созданием и разработкой интерфейса электронных бланков. Теперь мы зайдем за кулисы и посмотрим, что происходит по ту сторону форм. Увидим, как обрабатываются данные и готовятся к отправке обрат но, пользователю. Этим занимаются специальные небольшие программы, называю' щиеся скриптами. Скрипты хранятся на сервере. Они получают данные с пользовательских компьютеров, которые обращаются к ним с помощью значений атрибута acti on элемента <form>. После этого происходит обработка: считается все, что должно считаться, фильтруется все, что должно фильтроваться, и т. д. Наконец, результаты в какой-то форме отправляются пользователю. В этой главе мы обсудим ком поненты, составляющие прикладную систему, вы узнаете кое-что о скриптах, с помощью которых она работает.

Итак, в данную главу вошли следующие разделы:

• основы интерфейса CGI; языки, используемые для написания скриптов;
• принцип работы скриптов; передача данных; возвращение результатов;
• поиск в Сети и использование готовых скриптов; создание собственных скрип тов.

Что такое CGI?

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

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

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

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

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

Языки CGI

Вы не сможете написать скрипт на HTML. Вы никогда не напишете его на CSS. Даже на JavaScript вам сделать этого не удастся. Запомните, что все перечисленное - только лишь языки для написания веб-документов. Скрипты пишутся на языках программирования. Среди них можно назвать язык написания сценариев под Unix, Perl, С, AppleScript, а также Visual Basic. Чтобы успешно заниматься веб-программированием, вам необходимо знать хотя бы один из них. Следует помнить, что веб-дизайн и веб-программирование — это не одно и то же! Сценарий можно (и нужно) сохранять в отдельном файле на сервере. Приведем краткий обзор перечисленных языков:

• Язык написания сценариев для Unix-систем (нечто подобное представляет собой командный файл DOS или Windows).
  - Область применения. Это неплохой выбор для написания маленьких или временных CGI-пррограмм.
  - Сложность. Достаточно прост, результаты можно увидеть сразу же, однако он не подойдет для больших многопользовательских программ типа «Виртуальный супермаркет», размещаемых на коммерческих веб-сайтах.
• Perl.
  - Область применения. Программы средней сложности. Применение этого языка выгодно тем, что его поддерживает большинство платформ.
  -Сложность. Язык осваивается довольно быстро людьми, знакомыми с основами алгоритмизации и программирования. Программы являются интерпретируемыми, то есть их не нужно компилировать в некое стабильное, формализованное приложение типа того, что получается при работе, например, с языком С. К тому же существуют специальные библиотеки Perl, конвертирующие данные, поступающие в программу, в удобоваримый формат. Информацию по этому языку можно найти в Сети, например на
  http:// dir.yahoo.com/Computers_and_
  Internet/Programming_and_Development/Languages/
  Или на http://www.yahoo.com/Computers_and_
  Internet/Internet/World_Wide_ Web/Programming/PerLScripts.

ПРИМЕЧАНИЕ

Интерпретируемым языком называется такой язык программирования, который не требует для выполнения сценария или программы трансляции исходного кода в машинный. До момента запуска скрипт выглядит точно таким образом, как он был написан программистом. Только при запуске интерпретатор языка быстро переводит программу в машинные коды, распознаваемые сервером. Этот дополнительный шаг делает процесс работы сценария чуть более растянутым, но зато интерпретируемые программы гораздо проще редактировать и по необходимости обновлять.

• С.
  - Область применения. Манипуляции над данными любой сложности. Программы, написанные на этом полноценном транслируемом языке программирования, позволяют получить ответ на сложный запрос с самой высокой скоростью. Наиболее гибкий язык.
  - Сложность. Нормальный язык программирования, который знает большинство профессионалов. Существует огромное количество специализированных библиотек для создания веб-приложений, что сильно облегчает жизнь их разработчикам. Под некоторые платформы разработаны популярные ва риации на тему С, такие как Объектный С и C++.
• Веб-серверы Macintosh.
  - Область применения. Популярная альтернатива аналогичным серверам под Windows и Unix/Linux.
  - Сложность. Простой метод связывания серверных приложений с языками написания скриптов под Мае (типа AppleScript). Если заинтересовались, рекомендую ознакомиться с содержимым сайта http://www.scriptweb.com/, посвященным AppleScript.

Простой CGI-скрипт

CGI-программы могут быть как чрезвычайно сложными, так и довольно просты ми. Вот пример простого скрипта, написанного на языке сценариев Unix:

Дата добавления: 2014-12-29