русс | укр

Языки программирования

ПаскальСиАссемблерJavaMatlabPhpHtmlJavaScriptCSSC#DelphiТурбо Пролог

Компьютерные сетиСистемное программное обеспечениеИнформационные технологииПрограммирование

Все о программировании


Linux Unix Алгоритмические языки Аналоговые и гибридные вычислительные устройства Архитектура микроконтроллеров Введение в разработку распределенных информационных систем Введение в численные методы Дискретная математика Информационное обслуживание пользователей Информация и моделирование в управлении производством Компьютерная графика Математическое и компьютерное моделирование Моделирование Нейрокомпьютеры Проектирование программ диагностики компьютерных систем и сетей Проектирование системных программ Системы счисления Теория статистики Теория оптимизации Уроки AutoCAD 3D Уроки базы данных Access Уроки Orcad Цифровые автоматы Шпаргалки по компьютеру Шпаргалки по программированию Экспертные системы Элементы теории информации

Формы в HTML | Примеры | Html код формы

ОГЛАВЛЕНИЕ

1 Использование технологии "клиент-сервер" при разработке Web-страниц
2 Создание формы в HTML
2.1 Параметры тэга <FORM>
2.2 Параметры тэга <INPUT>
2.3 Параметры тэга <TEXTAREA>
2.4 Параметры тэга <SELECT>
3 Интерфейс CGI
Пример 1

1 Использование технологии "клиент-сервер" при разработке Web-страниц

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

Чтобы сделать Web-страницу активной (динамической), необходимо разработать программу, которая выполняется на стороне сервера, с помощью которой происходит обработка и изменение содержимого Web-страницы.
Одним из средств, которые позволяют осуществить взаимодействие между клиенской и серверной частями приложения, является интерфейс CGI (Common Gateway Interface - стандартный шлюзовый интерфейс). Серверная часть приложения, использующая CGI-интерфейс, называется CGI-приложением.

При использовании CGI-приложений необходимая информация на Web-странице предствляется в виде форм.

Оглавление

2 Создание формы в HTML

2.1 Параметры тэга <FORM>

Для создания формы на Web-странице в HTML-документе используется тэг-контейнер <FORM> . . . </FORM>. Его содержимым являются тэги <INPUT>, <TEXTAREA> и <SELECT>, которые предназначены для создания различных органов управления формы (полей ввода данных, кнопок, переключателей и др.).

Тэг <FORM>содержит следующие параметры:

  •  ACTION - указывает URL-адрес программы (CGI-приложения) для выполнения действий над формой;
  •   METHOD - указывает один из двух основных способов передачи данных от формы на сервер:
    • GET - CGI-приложение получает данные из формы на Web-странице через переменную среды с именем QUERY_STRING;
    • POST - CGI-приложение получает данные из формы на Web-странице через стандартный поток ввод
  •  ENCTYPE - указывает MIME-тип передаваемых данных.

Оглавление

2.2 Параметры тэга <INPUT>

Тэг <INPUT> содержит такие параметры:

  •  TYPE - указывает тип органа управления, его значениями являются:
    • text - однострочное поле для ввода текстовой информации; размер поля и число вводимых символов определяется значениями параметров SIZE и MAXLENGTH тэга <INPUT>
    • textarea - многострочное поле для ввода текстовой информации; размер поля и число вводимых символов определяется значениями параметров SIZE и MAXLENGTH тэга <INPUT> (для ввода многострочных данных предподчтительнее использовать тэг <TEXTAREA>);
    • password - для ввода пароля, аналогичен параметру text , но текст, введенный пользователем не отображается на экране;
    • checkbox - независимый переключатель;
    • radio - переключатель, зависящий от состояния других переключателей, используется для выбора одного значения из нескольких;
    • file - для выбора и передачи файла;
    • button - кнопка с заданной подписью;
    • submit - кнопка, предначначенная для посылки данных из заполненной формы Web-серверу;
    • image - имеет такое же начначение, что и параметр submit , но в виде изображения;
    • hidden - скрытое поле, не отображается на экране, но может быть передано серверу.
  •  NAME - указывает имя органа управления, посылается программе обработки формы;
  •  VALUE - указывает значение или состояние органа управления;
  •  CHECKED - используется для установки начального состояния переключателей;
  •   SIZE - указывает ширину поля ввода для текстовой информации, по умолчанию принимается равным 20;
  •  MAXLENGTH - указывает максимальное количество символов, которое может быть введено в данном поле, по умолчанию не имеет ограничений;
  •  ALIGN - указывает выравнивание текста возле формы;
  •  SRC - URL-адрес графического изображения, если оно используется в органе управления.

В примере № 1 показано задание полей формы на Web-странице с помощью тэга <INPUT>.

Оглавление

2.3 Параметры тэга <TEXTAREA>

Для ввода многострочного текста лучше воспользоваться тэгом-контейнером <TEXTAREA> . . . </TEXTAREA>, для которого можно задать следующие три параметра:

  •   NAME - указывает имя многострочного поля, посылается программе обработки формы;
  •  ROWS - указывает размер поля по вертикали (в строках);
  •  COLS - указывает размер поля по горизонтали (в символах).

В примере № 1 показано задание полей формы на Web-странице с помощью тэга <TEXTAREA> .

Оглавление

2.4 Параметры тэга <SELECT>

С помощью тэга-контейнера <SELECT> . . . </SELECT> можно указать в форме на Web-странице заранее проинициализированный список произвольных текстовых строк. Выбранная строка или выбранные строки передаются Web-серверу наряду с содержимым других полей формы. Для тэга <SELECT> определены следующие параметры:

  •  NAME - указывает имя списка, которое вместе с выбранной строкой передается серверу;
  •  SIZE - указывает число строк списка, отображаемых на экране, остальные свернуты и для появления на экране требуют прокрутки списка;
  •  MULTIPLE - указывает на то, что могут быть отмечены и переданы на сервер не одна строка, а все отмеченные.

Каждая строка списка внутри контейнера <SELECT> . . . </SELECT> задается с помощью тэга <OPTION>, который содержит следующие параметры:

  •  SELECTED - отмечает первоначально выбранную строку;
  •  VALUE - задает значение выбранной строки.

Ниже приводится пример использования тэга <SELECT>, в котором задается набор из черырех строк. На экране отображаются две строки: "Example1_2" и "Example1_3", первая из них ("Example1_2") отмечается как выбраная. Для доступа к двум другим строкам необходимо выполнить прокрутку. Отметить можно любое число строк из заданного набора.
Каждая отмеченная строка передается на сервер в виде пары "имя=значение". В качестве имени берется имя набора, т.е. "number". В качестве значения берется значение параметра VALUE, а если он не задан - текст после тэга <OPTION>. Например, для второй строки на Web-сервер передается пара "number=second", а для третьей строки, если она будет выбрана, - "number=Example1_3".

<SELECT NAME="number" SIZE=2 MULTIPLE>
<OPTION VALUE="first"> Example_1
<OPTION SELECTED VALUE="second"> Example1_2
<OPTION> Example1_3
<OPTION VALUE="fourth"> Example1_4
</SELECT>

В примере № 1 показано использование и тэга <SELECT>на Web-странице.


Оглавление

3 Интерфейс CGI

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

Имя1 = Значение1&Имя2=Значение2& . . .

При этом используется так называемая URL-кодировка. В этой кодировке все символы пробелов заменяются символом "+". Кроме того, для представления кодов управляющих клавиш и некоторых других (в их число попали символы кириллицы) используется последовательность символов вида %xx, где символы xx представляют собой 16-ричный код в виде двух ASCII-символов.
Порядок обработки формы при использовании CGI-интерфейса:

  •  Пользователь заполняет форму на Web-странице и нажимает кнопку с типом submit (в примере № 1 она имеет имя "ПЕРЕДАЧА").
  •  Браузер анализирует URL-адрес CGI-приложения, заданный в параметре ACTION формы и устанавливает соединение с соответствующим Web-сервером (в качестве Web-сервера может быть использован, например сервер Apache).
  •  Web-сервер преобразует URL-адрес в путь к файлу на компьютере и определяет, что URL-адрес указывает на CGI-приложение, а не на статический файл.
  •  Web-сервер подготавливает переменные окружения и запускает CGI-приложение на выполнение.
  •   Эта программа в соответствии с заданным методом передачи данных на сервер (GET или POST) определяет переменные окружения и считывает данные в виде пар "имя=значение", осуществляя, если необходимо, их перекодировку.
  •  Программа выводит в стандартный выходной поток HTTP-заголовок и результаты обработки данных формы в виде динамически созданного HTML-документа.
  •  Web-сервер передает браузеру полученный документ и закрывает с ним соединение.
  •  Браузер отображает полученные данные на экране в виде Web-страницы.

Оглавление

В примере №1 приведен HTML-документ, реализующий на экране разные виды органов управления формы, заданной на Web-странице.
Щелкнув по кнопке "Пример №1", можно увидеть на экране форму с полями ввода однострочной и многострочной текстовой информации, с полем ввода пароля, с зависимыми и независимыми переключателями, с полем выбора элементов списка, с кнопками "СБРОС" и "ПЕРЕДАЧА". В качестве значения параметра ACTION указан URL-адрес "http://172.17.72.25/cgi-bin/form_cgi.exe". Это адрес программы "form_cgi.exe", которая находится на сервере с IP-адресом 172.17.72.25, является CGI-приложением и предназначена для обработки полей формы. Если эта программа не разработана, а также в случае, когда сервер недоступен или не настроен, для проверки работы кнопки "ПЕРЕДАЧА" в качестве значения параметра ACTION можно указать адрес одного из файлов с HTML-документом, например, prim2-1.htm:
<FORM METHOD=get ACTION= "prim2-1.htm">

Пример 1

<HTML>
<HEAD>
<TITLE> Формы в HTML на Web-странице </TITLE>
<LINK REL=stylesheet HREF="my_d.css"> <STYLE>
.form{background:#a0ffff;color:#004000;font-size:6mm}
.kn{background:#e0e0ff; border:outset 4 blue; font-size:4.5mm}
</STYLE>
</HEAD>
<BODY>
<FORM METHOD=get ACTION= "http://172.17.72.25/cgi-bin/form_cgi.exe">
<TABLE ALIGN=center STYLE="color:#000080; font-size:6mm">
<TR> <TD VALIGN=top> Поле ввода однострочной текстовой информации <BR> (text);
<TD><INPUT TYPE=text NAME="txt1" VALUE="Строка текста" SIZE=15 CLASS="form">
<TR> <TD VALIGN=top> Поле ввода пароля <BR> (password)
<TD><INPUT TYPE=password NAME="pass"
VALUE="www" SIZE=15 MAXLENGTH=3 CLASS= "form">
<TR> <TD VALIGN=top> Поле ввода многострочной текстовой информации <BR> (textarea)
<TD><TEXTAREA NAME="txt2" ROWS=3 CLASS= "form">
Многострочная информация</TEXTAREA>
<TR> <TD VALIGN=top> Независимые переключатели <BR> (checkbox)
<TD><INPUT TYPE=checkbox NAME="ch1" VALUE="on" CHECKED>1 <BR>
<INPUT TYPE=checkbox NAME="ch2" VALUE="on" >2<BR>
<INPUT TYPE=checkbox NAME="ch3" VALUE="on" CHECKED>3<BR>
<TR> <TD VALIGN=top> Зависимые переключатели <BR> (radio)
<TD><INPUT TYPE=radio NAME="rad" VALUE= "on1" CHECKED> Первый <BR>
<INPUT TYPE=radio NAME="rad" VALUE= "on2"> Второй <BR>
<INPUT TYPE=radio NAME="rad" VALUE= "on3"> Третий <BR>
<TR><TD VALIGN=top> Выбор из списка <BR> (select)
<TD><SELECT NAME="sel" SIZE=1 MULTIPLE CLASS="form">
<OPTION VALUE="first"> Пример №1
<OPTION SELECTED VALUE="second"> Пример №2
<OPTION VALUE="third"> Пример №3
<OPTION VALUE="fourth"> Пример №4
</SELECT>
</TABLE>
<P ALIGN=center><INPUT TYPE=reset VALUE= "СБРОС" CLASS="kn">
   <INPUT TYPE=submit VALUE="ПЕРЕДАЧА" CLASS="kn">
</FORM>
</BODY>
</HTML>

Перед тем как "нажать" кнопку "ПЕРЕДАЧА", осуществив передачу данных из формы на CGI-приложение и его запуск для обработки данных, необходимо выполнить следующее:

1. Все файлы, содержащие HTML-документы с использованием CGI-интерфейса, должны находится в подкаталоге "C:\Temp\Apache". Это ограничение связано с настройками Web-сервера Apache и тем, кто не имеет достаточного практического опыта работы с этим сервером, лучше не заниматься изменением его параметров. Поэтому файл "prim5-1.htm", содержащий, приведенный в примере №1 HTML-документ, а также все созданные файлы, содержащие документы с использованием CGI-интерфейса, должны быть скопированы в папку "C:\Temp\Apache".

2. Необходимо разработать CGI-приложение, обрабатывающее данные из формы, в виде испольнительного файла с именем, указанным в параметре ACTION формы (в примере №1 - это файл "form_cgi.exe"). Этот файл должен быть помещен в подкаталог "C:\Temp\Apache\cgi-bin". Это условие также связано с настройками Web-сервера. Отметим, что в параметре ACTION необходимо указывать полный адрес файла, включая IP-адрес сервера, как показано в примере №1 для компьютера №5 (для компьютера №4 IP-адрес будет 172.17.72.24 и т.д.).

Вопросы создания CGI-приложения рассмотрены в CGI-приложениях.

Оглавление

Просмотров: 19357

Вы можете --> заказать сайт - полноценный или в качестве обучения для студентов.

Вернуться воглавление


Карта сайта Карта сайта укр


Уроки php mysql Программирование

Онлайн система счисления Калькулятор онлайн обычный Инженерный калькулятор онлайн Замена русских букв на английские для вебмастеров Замена русских букв на английские

Аппаратное и программное обеспечение Графика и компьютерная сфера Интегрированная геоинформационная система Интернет Компьютер Комплектующие компьютера Лекции Методы и средства измерений неэлектрических величин Обслуживание компьютерных и периферийных устройств Операционные системы Параллельное программирование Проектирование электронных средств Периферийные устройства Полезные ресурсы для программистов Программы для программистов Статьи для программистов Cтруктура и организация данных


 


Полезен материал? Поделись:

Не нашли то, что искали? Google вам в помощь!

 
 

© life-prog.ru При использовании материалов прямая ссылка на сайт обязательна.