|
Читайте также: |
Современные версии HTML (версия 4.0 и выше) дают возможность проектировать активные Web-страницы, поддерживающие диалог с пользователем и изменяющие свой вид в зависимости от этого диалога. Материал, изложенный в предыдущих разделах методических указаний, позволяет проектировать так называемые статические Web-страницы[4] и не рассматривает возможностей проектирования активных Web-страниц, так как предназначен для первоначального освоения Web-технологии. Возможности проектирования активных Web-страниц будут рассмотрены в других методических указаниях.
В настоящем разделе рассмотрим одну из возможностей проектирования активной Web-страницы на основе форм.
Форма предназначена для логического объединения элементов управления в группы и обеспечения взаимодействия пользователя с сервером WWW.
Механизм взаимодействия:
- На сервере WWW установлены программы (приложения CGI[5]), которые через протокол HTTP получают “упакованную” в форму информацию от удаленного пользователя.
- Полученная информация обрабатывается сервером и результат обработки возвращается удаленному пользователю в виде ссылки на существующий HTML-документ или на новый HTML-документ, созданный динамически.
В документе HTML, который создается для ввода информации, предназначенной для обработки, размещается форма ввода с элементами управления.
Элемент <FORM>. Синтаксис: элемент является контейнером.
<FORM атрибут_1="значение_1" атрибут_2="значение_2">... </FORM>
Для создания в форме разнообразных органов управления (полей ввода, списков выбора, переключателей, кнопок и так далее) используются элементы: <INPUT>, <TEXTAREA>, <SELECT> и другие.
Собственные атрибуты элемента <FORM>
| Наименование атрибута | Описание атрибута |
| action | action= "URI" указывает обработчик формы на сервере, которому передаются данные. URI содержит адрес сервера и программы на сервере. Например, http://server_name/ directory/ program_name. Альтернатива — передача данных action= "URI", используя почтовую программу клиента. Указывается почтовый префикс — mailto://uri. |
| method | Указывает метод отправки данных. Принимает значения: - get для передачи небольших сообщений; - post универсальный метод, используемый для передачи данных любого объема. |
| enctype | Применяется для метода post и указывает тип передаваемых серверу данных. По умолчанию — application/x-www-form-urlencoded. |
| name | Имя, которое используется для доступа к элементу<form>. |
| target | Указывает окно, в котором будет отображаться информация. Принимает значения: frame_name, _blank, _self, _parent, _top |
| accept | accept="content_type". Указывает тип данных, которые использует форма. |
| accept-charset | accept-charset ="content_type". Указывает кодировку символов, используемых пользователем. |
В качестве содержания контейнер <FORM>... </FORM> включает:
- блочные заголовки <H1>... <H6>, элементы: <P>, <DIV>, <DL>, <PRE>, <BLOCKQUOTE>, <FIELDSET>, <ADDRESS>, <HR>, <TABLE>, списки <UL>, <OL>, скрипты <SCRIPT>, <NOSCRIPT>;
- встроенные элементы:
- текст;
- элементы физического форматирования — <B>, <BIG>, <I>, <S>, <STRIKE>, <SMALL>, <TT>;
- элементы логического форматирования — <EM>, <STRONG>, <DFN>, <CODE>, <SAMP>, <KBD>, <VAR>, <CITE>, <ABBR>, <ACRONIM>;
- специального назначения — <A>, <IMG>, <MAP>, <APPLET>, <OBJECT>, <SCRIPT>, <SPAN>, <IFRAME>, <FONT>, <BASEFONT>, <BR>, <SUB>, <SUP>, <BDO>, <Q>;
- форм — <INPUT>, <SELECT>, <TEXTAREA>, <BUTTON>, <LABEL>.
Контейнер допускает отсутствие содержания.
Пример.2.23. Фрагмент программы для ввода пароля.
<FORM name="форма_пароль" action="http://server_domain_name/cgi-bin/processed_programm.cgi" method="get">
введите пароль:
<INPUT type="password" name=""user_login>
<INPUT type="submit" value="press">
</FORM>
Соответствующая форма — форма_пароль, будет иметь вид (рис.2.24):
Рис. 2.23. Просмотр примера 2.24 (форма_пароль)
Элемент <INPUT>. Оператор <INPUT> предназначен для ввода элементов управления в форму. В качестве элементов управления могут использоваться: поля ввода текстовой информации, поля ввода пароля, флажки, переключатели, кнопки, а также органы управления для передачи локального файла через навигатор в удаленный сервер WWW.
Синтаксис: одиночный оператор. Закрывающий оператор отсутствует. <INPUT type="тип_элемента" атрибут_2="значение">
Собственные атрибуты элемента <FORM>
| Наименование атрибута | Описание атрибута |
| type | Задает тип органа управления. Принимает значения: - text задает поле ввода одной строкой. Атрибут size задает число символов. По умолчанию присваивается и выводится на экран значение, заданное атрибутом value. Например, <INPUT type="text" size="35" maxlength="50" value="Sample of text">; - password аналогично text, символы высвечиваются в виде звездочек; - checkbox переключатель типа Check Box. Предназначен для использования отдельно или в наборе независимых переключателей. Начальное значение: value= "on" — "ложь" value="checked" — "истина"; - radioпереключатель для группы зависимых переключателей. Используется для выбора одного значения из нескольких. Переключатели одной группы имеют одинаковое значение атрибута name. Значение атрибута value различаются - fileсоздает элемент для выбора и передачи файла. Обычно, строка для ввода имени и кнопка; - hidden скрытое поле, которое не отображается. Анализируется сервером; - buttonкнопка с заданной надписью. Надпись кнопки определяется значением атрибута value: - value="submit" кнопка передачи данных из заполненной формы. Текст надписи задается значением атрибута value: - value="image" создается кнопка-изображение. В операторе указываются атрибуты src и alt; - value="reset" предназначена для “сброса” формы. Надпись на кнопке задается атрибутом value. |
| size | Определяет размер элемента ввода в символах или пикселях. В символах для text и password, в пикселях для остальных. |
| accept | Используется для указания типа данных. |
| name | Задает имя элемента. |
| value | Задает начальное состояние или значение элементов (по умолчанию). |
| maxlength | Указывает максимальное значение длины строки. |
| disabled | Делает элемент неактивным, то есть щелчки на нем не приводят к каким-либо последствиям. |
| readonly | Не позволяет изменять содержимое для элементов “ввод текста” и “ввод пароля.” |
| alt | Задает альтернативный текст. |
| usemap | Указывает на карту, обрабатываемую на стороне клиента. |
| ismap | Указывает на карту, обрабатываемую на стороне сервера. |
| tab-index | Определяет порядок перемещения по элементам ввода при помощи клавиши Tab. |
| accesskey | Назначает “горячую” клавишу для организации доступа к элементу. |
Элемент <TEXTAREA>. Оператор <INPUT> с параметром type, имеющим значение text, позволяет вставить в форму поле редактирования одной текстовой строки. Если необходимо использовать многострочный текст, то необходимо использовать оператор <TEXTAREA>, который применяется совместно с </TEXTAREA>.
Собственные атрибуты элемента <TEXTAREA>
| Наименование атрибута | Описание атрибута |
| name | Определяет имя элемента, которое используется при передаче данных. Аналогичен атрибуту id. |
| rows | Определяет число строк текста на экране. При необходимости создается вертикальная полоса прокрутки. |
| cols | Определяет число символов в каждой строке, то есть задает ширину поля ввода текста. При необходимости создается горизонтальная полоса прокрутки. |
| disabled | Делает элемент неактивным, то есть щелчки на нем не приводят к каким-либо последствиям. |
| readonly | Не позволяет изменять содержимое для элементов “ввод текста” и “ввод пароля”. |
| tab-index | Определяет порядок перемещения по элементам ввода при помощи клавиши Tab. |
| accesskey | Назначает “горячую” клавишу для организации доступа к элементу. |
Элемент <BUTTON> используется, если необходимо создать кнопку без использования элемента <INPUT>. В этом случае кнопка обладает большими функциональными возможностями и к ней можно “подключить” блочные и встроенные HTML-элементы, за исключением <a>, <input>, <select>, <textarea>, <label>, <button>, <form>, <fielset>.
Синтаксис: <button type=""...>... </button>
Собственные атрибуты элемента <button>
| Наименование атрибута | Описание атрибута |
| type | Указывает тип кнопки. Принимает значения: type="button" создается кнопка произвольного назначения type="submit" создается кнопка “Отправить” type="reset" создается кнопка “Очистить”. |
| value | Задает начальное состояние или значение элементов (по умолчанию). |
| name | Определяет имя элемента, которое используется при передаче данных. Аналогичен атрибуту id. |
| disabled | Делает элемент неактивным, то есть щелчки на нем не приводят к каким-либо последствиям. |
| tab-index | Определяет порядок перемещения по элементам ввода при помощи клавиши Tab. |
| accesskey | Назначает “горячую” клавишу для организации доступа к элементу. |
Элемент <SELECT> предназначен для организации меню, различных списков и выбора из них. Пункты списков создаются с помощью элемента <OPTION>. При отправке данных серверу передается имя списка вместе со значением, которое по умолчанию соответствует выбранной строке.
Синтаксис: <SELECT> <OPTION>... <OPTION>... </SELECT>
Собственные атрибуты элемента SELECT
| Наименование атрибута | Описание атрибута |
| name | Обязательный. Определяет имя элемента, которое передается на сервер. |
| size | Определяет видимое число строк списка. Создается полоса прокрутки. |
| multiple | По умолчанию список подразумевает одиночный выбор. Если атрибут multiple задан, то можно выбирать более одного элемента списка. |
| disabled | Делает элемент неактивным, то есть щелчки на нем Не приводят к каким-либо последствиям. |
| tab-index | Определяет порядок перемещения по элементам ввода при помощи клавиши Tab. |
Элементы <OPTION> и <OPTGROUP>. Элемент <OPTION> является элементом выбора в меню и используется совместно с элементом <SELECT>. Элемент <OPTGROUP> применяется для связывания нескольких элементов <OPTION> в логическую группу. Элемент <OPTGROUP> допускает вложенность.
Собственные атрибуты элемента <OPTION>
| Наименование атрибута | Описание атрибута |
| value | Задает начальное значение элементов (по умолчанию). Если атрибут не задан, то ему присваивается значение строки, которая записана в контейнере <OPTION>. |
| selected | Задает выбранный элемент. |
| label | Определяет метку элемента. |
| disabled | Делает элемент неактивным, то есть щелчки на нем не приводят к каким-либо последствиям. |
Связывание элементов формы. Эти элементы позволяют создавать логические связи элементов, в том числе и располагающихся на форме. Таким элементом является элемент <LABEL> Причем, каждый определенный элемент <LABEL> может быть связан только с одним элементом формы. В то же время, один элемент формы может быть связан с несколькими метками <LABEL>.
Синтаксис: <LABEL>... </LABEL>
Собственные атрибуты элемента <LABEL>
| Наименование атрибута | Описание атрибута |
| for | Определяет имя элемента, которому противопоставляется надпись. Сама надпись размещается в контейнере <LABEL>. |
| accesskey | Назначает “горячую” клавишу для организации доступа к элементу. |
Содержание контейнера <LABEL> может включать:
- текст;
- элементы физического форматирования — <B>, <BIG>, <I>, <S>, <STRIKE>, <SMALL>, <TT>;
- элементы логического форматирования — <EM>, <STRONG>, <DFN>, <CODE>, <SAMP>, <KBD>, <VAR>, <CITE>, <ABBR>, <ACRONIM>;
- специального назначения — <A>, <IMG>, <MAP>, <APPLET>, <OBJECT>, <SCRIPT>, <SPAN>, <IFRAME>, <FONT>, <BASEFONT>, <BR>, <SUB>, <SUP>, <BDO>, <Q>;
- форм — <INPUT>, <SELECT>, <TEXTAREA>, <BUTTON>, <LABEL>.
Элементы <FIELDSET> и <LEGEND>. Если необходимо организовать подпись не к одному, а к нескольким элементам и свести их в группу, то необходимо использовать элементы <FIELDSET> и <LEGEND>. Причем <FIELDSET> является контейнером, в которые вкладываются формы, а <LEGEND> объединяет подписи к группе.
Синтаксис:
<FIELDSET attribute="value">
<LEGEND>... </LEGEND>
<LEGEND>... <LEGEND>
</FIELDSET>
Собственные атрибуты элемента <LEGEND>
| Наименование атрибута | Описание атрибута |
| align | Выравнивание относительно блока <FIELDSET>. Принимает значения: top, left, right, bottom. |
| accesskey | Назначает “горячую” клавишу для организации доступа к элементу. |
Содержание для элемента <FIELDSET> может включать:
- блочные заголовки <H1>... <H6>, элементы: <P>, <DIV>, <DL>, <PRE>, <BLOCKQUOTE>, <FIELDSET>, <ADDRESS>, <HR>, <TABLE>, списки <UL>, <OL>, скрипты <SCRIPT>, <NOSCRIPT>.
Как <FIELDSET>, так и <LEGEND>могут включать встроенные элементы:
- текст;
- элементы физического форматирования — <B>, <BIG>, <I>, <S>, <STRIKE>, <SMALL>, <TT>;
- элементы логического форматирования — <EM>, <STRONG>, <DFN>, <CODE>, <SAMP>, <KBD>, <VAR>, <CITE>, <ABBR>, <ACRONIM>;
- специального назначения — <A>, <IMG>, <MAP>, <APPLET>, <OBJECT>, <SCRIPT>, <SPAN>, <IFRAME>, <FONT>, <BASEFONT>, <BR>, <SUB>, <SUP>, <BDO>, <Q>;
- форм — <INPUT>, <SELECT>, <TEXTAREA>, <BUTTON>, <LABEL>.
Пример 2.24. Положим, что мы проводим социологический опрос среди студентов. Форма, которая бы поставляла данные на сервер и там обрабатывалась, могла бы иметь вид:
Приведенной форме соответствует HTML-документ:
<HTML>
<HEAD>
<TITLE>Форма_экзамен</TITLE>
</HEAD>
<BODY>
<FORM ACTION="Экзаменационная_сессия" METHOD = "POST">
<P><STRONG>Какую оценку вы получили</STRONG></P>
<DL>
<DD><INPUT TYPE="RADIO" NAME="оценка" VALUE="отлично"> отлично
<INPUT TYPE="RADIO" NAME="оценка" VALUE="хорошо">хорошо
<INPUT TYPE="RADIO" CHECKED NAME="оценка" VALUE= "удовлетворительно">удовлетворительно
<INPUT TYPE="RADIO" NAME="оценка" VALUE= "неудовлетворительно"> неудовлетворительно</DD>
</DL> <P><STRONG>Экзамен по какой дисциплине вы сдавали? </STRONG>
<DL><DD><SELECT NAME="экзамен" SIZE="1">
<OPTION SELECTED>Информатика</OPTION>
<OPTION>Мат_анализ</OPTION>
<OPTION>Иностранный_язык</OPTION>
<OPTION>Управление_персоналом</OPTION>
<OPTION>Организация_производства</OPTION>
<OPTION>(другой)</OPTION>
</SELECT> другой: <INPUT TYPE="TEXT" SIZE="26" MAXLENGTH="256" NAME="объект_другой"></DD>
</DL>
<P><STRONG>Перечислите, пожалуйста, экзаменационные вопросы: </STRONG> </P> <DL> <DD><TEXTAREA NAME="вопросы" ROWS="5" COLS = "42"> </TEXTAREA></DD> </DL>
<P><STRONG>Ваши данные для контактов:</STRONG></P>
<DL>
<DD>
<TABLE>
<TR>
<TD>Имя
<TD><INPUT TYPE="TEXT" SIZE="35" MAXLENGTH="256" NAME= "USERNAME">
</TR>
<TR>
<TD>E-MAIL
<TD><INPUT TYPE="TEXT" SIZE="35" MAXLENGTH="256" NAME= "USEREMAIL">
</TR>
<TR>
<TD>Телефон
<TD><INPUT TYPE="TEXT" SIZE="35" MAXLENGTH="256" NAME= "USERTEL">
</TR>
<TR>
<TD>FAX
<TD><INPUT TYPE="TEXT" SIZE="35" MAXLENGTH="256" NAME="USERFAX">
</TR>
</TABLE>
</DD>
</DL>
<DL>
<DD><INPUT TYPE="CHECKBOX" NAME="Собственная оценка" VALUE= "Собственная оценка"> Соответствует ли, по вашему мнению, оценка вашим знаниям </DD>
</DL>
<P><INPUT TYPE="SUBMIT" VALUE="SUBMIT COMMENTS"> <INPUT TYPE="RESET" VALUE="CLEAR FORM"></P>
</FORM>
</BODY>
</HTML>
Форма, заполненная и готовая к пересылке на сервер, приведена ниже. Пересылка формы выполняется при нажатии кнопки Submit Comments. Сброс формы, то есть приведение формы в исходное состояние, выполняется кнопкой Clear Form.
[1] КОМПЬЮТЕРНЫЕ СЕТИ И СИСТЕМЫ: Методические указания по изучению раздела “Навигация в Интернете”/Академия ГА. С-Пб., 2002.
[2] Терминология спецификации стандарта языка HTML 4.01.
[3] Не рекомендуемый. Стандарт языка HTML 4.0 и последующие версии не рекомендуют или запрещают использовать некоторые операторы языка. Более того, стандарт рекомендует переходить на новую технологию проектирования Web-сайтов с использованием стилей.
[4] Статическая Web-страница — Web-страница, которая не изменяется во времени без вмешательства администратора сервера WWW
[5] CGI – стандартный шлюзовый интерфейс (Common Gateway Interface) для запуска внешних программ под управлением сервера WWW.
Дата добавления: 2015-10-02; просмотров: 59 | Нарушение авторских прав
| <== предыдущая страница | | | следующая страница ==> |
| Стили в операторах HTML | | | Владимир Серкин 6 страница |