 |
Интерактивные формы на Web-страницах
|
|
|
|
Интерактивные формы предназначены для сбора информации от посетителей Web-страницы. Внешне форма выглядит как анкета, в которую посетитель может вписать свой текст или выбрать значения из предлагаемых перечней. Разместим на странице «Анкета» анкету для посетителей, чтобы выяснить, кто из наших посетителей, с какими целями и с помощью каких программ получает и использует информацию из сети Интернет, а также выясним, какую информацию они хотели бы видеть на нашем сайте. Для получения этих данных разместим на форме два однострочных текстовых поля для ввода информации.
| Тэги и атрибуты | Обозначения |
| <FORM> </FORM > | Внутри заданного контейнера помещается форма. Там же обязательно находится кнопка, отправляющая заполненную анкету на сервер для последующей обработки данных. |
| <INPUT> c атрибутом TYPE=”text” | Данный тэг нужен для создания текстового поля. |
| NAME | Данный атрибут является обязательным и служит для идентификации полученной информации. |
| SIZE | Значением данного атрибута является число, задающее длину поля ввода в символах. |
| <BR> | Тэг перевода строки. |
| Открыть в Блокноте файл anketa.htm и добавить HTML-код, создающий текстовые поля для ввода данных. | |
| <FORM> Пожалуйста, введите ваше имя: <BR> <INPUT TYPE=”text” NAME =”name” SIZE =30> <BR> E-mail: <BR> <INPUT TYPE=”text” NAME =” e-mail” SIZE =30> <BR> </FORM > | |
| Далее хотим выяснить, к какой группе пользователь относит себя посетитель. Предложим ему выбрать один из нескольких вариантов: учащийся, студент, учитель. | |
| <INPUT> c атрибутом TYPE=radio | Для этого необходимо создать группу переключателей («радиокнопок»). Создается такая группа с помощью заданного тэга. |
| NAME=group | Все элементы в группе должны иметь одинаковые значения заданного атрибута. Например, как здесь. |
| VALUE | Обязательный атрибут. Значение этого атрибута должен быть уникальным для каждой «радиокнопки», так как при ее выборе именно они передаются серверу. |
| Добавить HTML-код, создающий группу переключателей для выбора одного варианта.. | |
| Укажите, к какой группе пользователей вы себя относите: <BR> <INPUT TYPE=radio NAME =group VALUE =”schoolboy” > учащийся <BR> <INPUT TYPE=radio NAME =group VALUE =”student” > студент <BR> <INPUT TYPE=radio NAME =group VALUE =”teacher” > учитель <BR> | |
| Далее хотим выяснить, какими сервисами Интернета наш посетитель пользуется наиболее часто. Здесь из предложенного перечня он может выбрать одновременно несколько вариантов, пометив их флажками. | |
| <INPUT> c атрибутом TYPE=checkbox | C помощью этого тэга создаются флажки |
| NAME=group | Все элементы в группе должны иметь одинаковые значения заданного атрибута. Например, как здесь. |
| VALUE | Обязательный атрибут. Значение этого атрибута должен быть уникальным для каждого флажка, так как при его выборе именно они передаются серверу. |
| Добавить HTML-код, создающий флажки для выбора нескольких вариантов. | |
| Какие из серверов Интернета вы используете наиболее часто: <BR> <INPUT TYPE=checkbox NAME =group VALUE =”www” > WWW <BR> <INPUT TYPE=checkbox NAME =group VALUE =”e-mail” > e-mail <BR> <INPUT TYPE=checkbox NAME =group VALUE =”ftp” > FTP <BR> | |
| Теперь выясним, какой из браузеров предпочитает посетитель сайта. Перечень браузеров представим в виде раскрывающегося списка, из которого можно выбрать только один вариант. | |
| <SELECT> </SELECT> | Для реализации такого списка используется заданный контейнер, |
| <OPTION> | в котором каждый элемент списка определяется заданным тэгом. |
| SELECTED | Выбираемый по умолчанию элемент задается с помощью этого атрибута. |
| Добавить HTML-код, создающий раскрывающийся список для выбора одного варианта. | |
| Какой браузер вы предпочитаете? <SELECT NAME=”browsers”> <OPTION SELECTED> Internet Explorer <OPTION > Netscape Navigator <OPTION > Opera <OPTION > Neo Planet </SELECT> | |
| В заключении поинтересуемся, что хотел бы видеть посетитель на наших страницах, какую информацию следовало бы в них добавить. Так как мы не можем заранее знать, насколько обширным будет ответ читателя, отведем для него текстовую область с линейкой прокрутки. В такое поле можно ввести достаточно подробный текст. | |
| <TEXTAREA> </TEXTAREA> | Создается такая область с помощью заданного тэга с обязательными атрибутами (ниже). |
| NAME | Задает имя области. |
| ROWS | Определяет число строк. |
| COLS | Задает число столбцов области. |
| Добавить HTML-код, создающий текстовую область для ввода комментариев. | |
| Какую еще информацию вы хотели бы видеть на нашем сайте? <BR> <TEXTAREA NAME =”resume” ROWS=4 COLS=30> </TEXTAREA> <BR> | |
| Отправка введенной в форму информации или очистка полей от уже введенной информации осуществляется с помощью кнопок. | |
| <INPUT> c атрибутом TYPE=submit VALUE=Отправить | Для создания кнопки, которая отправляет информацию. |
| <INPUT> c атрибутом TYPE=reset VALUE=Очистить | Для создания кнопки, которая производит очистку формы. |
| Добавить HTML-код, создающий кнопки. | |
| <INPUT TYPE=submit VALUE=Отправить> <INPUT TYPE=reset VALUE=Очистить> | |
| Заполнена форма отправляется на сервер, где обрабатывается специальной программой CGI-скриптом, или по электронной почте автору сайта, где он уже самостоятельно обрабатывает полученные данные. Для того чтобы при щелчке по кнопке «Отправить» данные из формы передавались на сервер и там обрабатывались, необходимо указать, куда их отправить и какая программа их будет обрабатывать. Эти параметры задаются с помощью атрибута ACTION контейнера <FORM>. | |
| <FORM ACTION=”URL”> </FORM> | Атрибут ACTION определяет URL-адрес программы, расположенной на Web-сервере, которая обрабатывает полученные данные из формы. |
| Пусть программой, которая заносит данные из формы в базу данных, будет программа bd.exe. Обычно такие программы хранятся в каталоге cgi-bin. Тогда атрибут ACTION будет выглядеть следующим образом: ACTION=”http:/www.mycompany.ru/cgi-bin/bd.exe” |
|
|
|
|
|
|
Тестирование и публикация Web-сайта
Прежде чем разместить свой Web-сайт на сервере в Интернете, его необходимо тщательно протестировать, так как потенциальными посетителями вашего сайта являются десятки миллионов пользователей Интернета.
|
|
|
Необходимо промотреть, как выглядят ваши страницы в наиболее распространенных браузерах Internet Explorer и Netscape Navigator (а они могут выглядеть по-разному). Необходимо проверить:
· нормально ли читается текст на выбранном фоне;
· правильно ли расположены рисунки;
· правильно ли работают гиперссылки.
Для публикации Web-сайта необходимо найти подходящее место на одном из серверов Интернета. Многие провайдеры предоставляют своим клиентам возможность бесплатного размещения Web-сайтов на своих серверах (бесплатный хостинг).
Для публикации Web-сайта необходимо получить от провайдера необходимые сведения:
· URL-адрес сайта;
· Секретные имя пользователя и пароль, которые необходимы администратору сайта для его редактирования.
|
|
|
