На главную

Библиотека Интернет Индустрии I2R.ru

Rambler's Top100

Малобюджетные сайты...

Продвижение веб-сайта...

Контент и авторское право...

Забобрить эту страницу! Забобрить! Блог Библиотека Сайтостроительства на toodoo
  Поиск:   
Рассылки для занятых...»
I2R » Сайтостроительство » HTML/DHTML

Основы языка разметки гипертекста - HTML (Ч.4.1. Использование форм.)

4. Формы и фреймы

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

4.1. Использование форм в документах

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

Для размещения форм в HTML применяется контейнерный тег FORM.../FORM, заключающий в себе составные элементы формы: текстовые поля, списки, поля ввода данных, флажки, переключатели и кнопки. Тег FORM имеет следующие атрибуты:

  • NAME - имя формы;

  • METHOD - метод отправки данных на сервер. GET - передача данных посредством переменных окружения сервера, POST - передача данных в стандартном потоке ввода/вывода сервера;

  • ACTION - URL получателя данных. В качестве получателя данных может выступать CGI сценарий обработки данных или ссылка на адрес электронной почты - mailto:e-mail;

  • TARGET - окно назначение для отображения результатов обработки данных на Web-сервере (по умолчанию текущее окно);

Например:

FORM NAME="Order" METHOD="GET" ACTION="/cgi-bin/get_order.pl" /FORM

FORM NAME="Comment" ACTION="mailto:mybox@mymail.ru"/FORM

Кроме вышеперечисленных элементов форм в контейнере FORM.../FORM могут находиться теги HTML задающие форматирование элементов формы и ее структуру. Рассмотрим элементы форм:

Текстовые панели

Текстовые панели определяются при помощи контейнерного тега TEXTAREA.../TEXTAREA. Текст заключенный в данный контейнер является содержимым данного элемента. Для определения параметров текстовых панелей, применяются следующие атрибуты:

  • NAME - имя элемента формы;

  • TITLE - подсказка в стиле ToolTip;

  • TABINDEX - номер элемента в форме, для переходов следующий/предыдущий;

  • ROWS - число строк текстовой панели;

  • COLS - число столбцов текстовой панели;

  • READONLY - содержимое текстовой панели не редактируется;

  • DISABLED - данный элемент формы не доступен (элемент затеняется и исключается при переходах от элемента формы к элементу);

Пример:

FORM NAME="txa_form"

TEXTAREA NAME="ta1" TITLE="Textarea 1" ROWS=3 COLS=25
Текстовая панель 1
/TEXTAREA

TEXTAREA NAME="ta2" TITLE="Textarea 2" ROWS=3 COLS=25 READONLY
Текстовая панель 2
/TEXTAREA

TEXTAREA NAME="ta3" TITLE="Textarea 3" ROWS=3 COLS=25 DISABLED
Текстовая панель 3
/TEXTAREA

/FORM

Раскрывающиеся списки

Раскрывающиеся списки определяются при помощи контейнерного тега SELECT.../SELECT. Для определения параметров раскрывающегося списка, применяются следующие атрибуты:

  • NAME - имя элемента формы;

  • TITLE - подсказка в стиле ToolTip;

  • TABINDEX - номер элемента в форме, для переходов следующий/предыдущий;

  • SIZE - длина списка (число строк раскрывающегося списка );

  • MULTIPLE - выбор значений в списке с данным атрибутом осуществляется в прокручиваемом окне;

  • DISABLED - данный элемент формы не доступен (элемент затеняется и исключается при переходах от элемента формы к элементу );

Элементы списка задаются при помощи тега OPTION, со следующими атрибутами:

  • VALUE - значение для отправки серверу (значение отображаемое в списке задается после тега option);

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

Пример:

FORM NAME="sel_form"

SELECT NAME="sel1" TITLE="Select 1" SIZE=1
OPTION VALUE="DJ310" SELECTEDHP Desk Jet 310
OPTION VALUE="DJ440"HP Desk Jet 440
OPTION VALUE="DJ690"HP Desk Jet 690
/SELECT

SELECT NAME="sel2" TITLE="Select 2" SIZE=1 DISABLED !-- нет на скдаде --
OPTION VALUE="FX1170" SELECTEDEpson FX-1170
OPTION VALUE="LX300"Epson LX-300
OPTION VALUE="LX100"Epson LX-100
/SELECT

/FORM

Поля ввода данных, флажки, переключатели и кнопки

Данные элементы форм определяются при помощи тега INPUT. Тип элемента задается при помощи атрибута TYPE, который может принимать следующие значения:

TEXT - текстовое поле ввода;

PASSWORD - поле ввода пароля (вводимые символы заменяются звездочками );

CHECKBOX - элемент флажок;

RADIO - элемент переключатель;

BUTTON - элемент управления-кнопка (используется для выполняется сопоставленного ей обработчика события onClick - сценария интерактивного управления, выполняемого броузером );

RESET - элемент управления-кнопка при нажатии на которую броузер очищает форму, от введенных пользователем значений;

SUBMIT - элемент управления-кнопка при нажатии нам которую броузер отправляет данные, введенные пользователем в форму, на обработку серверу (атрибут action ), заданным методом (атрибут method).

Для определения параметров элементов и их значений, применяются следующие атрибуты:

  • NAME - имя элемента формы. Элементы переключатели (radio) с одинаковым значением данного атрибута, объединяются в группу переключателей, работающих по принципу - выбор одного варианта из многих;

  • TITLE - подсказка в стиле ToolTip;

  • TABINDEX - номер элемента в форме, для переходов следующий/предыдущий;

  • SIZE - размер поля ввода для элементов текстовых полей (text) и полей ввода пароля (password);

  • MAXLENGHT - максимальная длина данных для элементов текстовых полей (text) и полей ввода пароля (password);

  • VALUE - для элементов кнопок (button, reset, submit) задает надпись, для элементов полей ввода (text, password) задает начальное значение поля, а для флажков и переключателей (radio, checkbox) задает значение передаваемое на обработку серверу;

  • CHECKED - атрибут включает флажок или переключатель;

  • READONLY - используется для запрета редактирования элементов полей ввода (text, password);

  • DISABLED - данный элемент формы не доступен (элемент затеняется и исключается при переходах от элемента формы к элементу);

Пример:

FORM NAME="inp_form"

INPUT TYPE="text" NAME="text1" SIZE=20 MAXLENGTH=30

INPUT TYPE="password" NAME="pass1" SIZE=5 MAXLENGTH=5

INPUT TYPE="checkbox" NAME="cbox1" VALUE="м" CHECKED мужской
INPUT TYPE="checkbox" NAME="cbox2" VALUE="ж" женский

INPUT TYPE="radio" NAME="rad1" VALUE="young" 10-18 лет
INPUT TYPE="radio" NAME="rad1" VALUE="adult" CHECKED 19-60 лет
INPUT TYPE="radio" NAME="rad1" VALUE="old" 60-80 лет
INPUT TYPE="radio" NAME="rad1" VALUE="decrepit" DISABLED 80-100 лет

INPUT TYPE="button" NAME="but1" VALUE="Нажми меня"

INPUT TYPE="reset" NAME="but2" VALUE="Очистка формы"

INPUT TYPE="submit" NAME="but3" VALUE="Отправить данные"

/FORM

Постараемся рассмотреть основные элементы форм на примере HTML-документа, в котором пользователь заполняет специальную анкету. Т.к. на нашем сервере нет CGI-сценария (мы его не разработали) для обработки данных из формы, мы используем метод отправки данных по электронной почте.

Пример 8. Использование форм ввода данных. [просмотр примера в окне]


HTML
HEAD
TITLEИспользование форм в документах/TITLE
/HEAD
BODY BGCOLOR ="WHITE", TEXT="BLACK", LINK="BLUE", ALINK="RED", VLINK="NAVY"
H1 ALIGN=CENTERЗаполните пожалуйста анкету/H1
HR
FORM NAME="anketa" ACTION="mailto:kadr@agency.ru"
table width="100%" align=center
col width="35%" align=left valign=topcol align=left valign=top
tr
thВведите ваше ФИО:
td
INPUT TYPE="text" NAME="fio" SIZE=30 MAXLENGTH=40
tr
thВведите пароль:
td
INPUT TYPE="password" NAME="pas" SIZE=5 MAXLENGTH=5
tr
thВаш род занятий:
td
SELECT NAME="work" TITLE="Род занятий" SIZE=1
OPTION VALUE="ittec" SELECTEDИнф. технологии
OPTION VALUE="bifin"Бизнес и финансы
OPTION VALUE="other"Прочее
/SELECT
tr
thПол:
td
INPUT TYPE="radio" NAME="sex" VALUE="men" CHECKEDМужской
INPUT TYPE="radio" NAME="sex" VALUE="led"Женский
tr
thСведения об образовании:
td
TEXTAREA NAME="edu" TITLE="Образование" ROWS=5 COLS=30
/TEXTAREA
tr
thВаши предпочтенияbr(один или несколько вариантов):
td
INPUT TYPE="checkbox" NAME="cbox1" VALUE="1" CHECKEDвсе равноbr
INPUT TYPE="checkbox" NAME="cbox2" VALUE="2"работа с клиентамиbr
INPUT TYPE="checkbox" NAME="cbox2" VALUE="3"работа с документамиbr
INPUT TYPE="checkbox" NAME="cbox2" VALUE="4" DISABLEDработа в одиночку
/table
p align=centerINPUT TYPE="reset" NAME="but2" VALUE="Очистить форму"
INPUT TYPE="submit" NAME="but3" VALUE="Отправка данных"
/FORM
HR
P ALIGN=CENTER&copy 2001 Вебмастер A HREF="mailto:myname@mail.ru"Попробуй связаться со мной/A
/BODY
/HTML


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

Dmitriy Krasyuk
¬°¬г¬Я¬а¬У¬н HTML

Спонсор раздела

Рассылки Subscribe.ru:

Библиотека сайтостроительства - новости, статьи, обзоры
Дискуссионный лист для web-разработчиков
Подписка на MailList.Ru
Автор: NunDesign
Другие разделы
Оптимизация сайтов
Web-студии
» Новое в разделе
Web-дизайн
Web-программирование
Интернет-реклама
Раскрутка сайта
Web-графика
Flash
Adobe Photoshop
Рассылка
Инструменты вебмастера
Контент для сайта
HTML/DHTML
Управление web-проектами
CSS
I2R-Журналы
I2R Business
I2R Web Creation
I2R Computer
рассылки библиотеки +
И2Р Программы
Всё о Windows
Программирование
Софт
Мир Linux
Галерея Попова
Каталог I2R
Партнеры
Amicus Studio
NunDesign
Горящие путевки, идеи путешествийMegaTIS.Ru

2000-2008 г.   
Все авторские права соблюдены.
Rambler's Top100