Главная | Обратная связь | Поможем написать вашу работу!
МегаЛекции

Интерактивные формы на 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-адрес сайта;

· Секретные имя пользователя и пароль, которые необходимы администратору сайта для его редактирования.

 

Поделиться:





Воспользуйтесь поиском по сайту:



©2015 - 2024 megalektsii.ru Все авторские права принадлежат авторам лекционных материалов. Обратная связь с нами...