2015-06-30
1107
Данные элементы форм определяются при помощи тега <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 - данный элемент формы не доступен (элемент затеняется и исключается при переходах от элемента формы к элементу);
Пример:
|
|
|
pascal/<FORM NAME="inp_form"> pascal/
pascal/<INPUT TYPE="text" NAME="text1" 0 MAXLENGTH=30> pascal/
pascal/<INPUT TYPE="password" NAME="pass1" SIZE=5 MAXLENGTH=5> pascal/
pascal/<INPUT TYPE="checkbox" NAME="cbox1" VALUE="м" CHECKED> мужской
<INPUT TYPE="checkbox" NAME="cbox2" VALUE="ж"> женский pascal/
pascal/<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 лет pascal/
pascal/<INPUT TYPE="button" NAME="but1" VALUE="Нажми меня"> pascal/
pascal/<INPUT TYPE="reset" NAME="but2" VALUE="Очистка формы"> pascal/
pascal/<INPUT TYPE="submit" NAME="but3" VALUE="Отправить данные"> pascal/
pascal/</FORM> pascal/
Постараемся рассмотреть основные элементы форм на примере HTML-документа, в котором пользователь заполняет специальную анкету. Т.к. на нашем сервере нет CGI-сценария (мы его не разработали) для обработки данных из формы, мы используем метод отправки данных по электронной почте.
|
|
|
Пример 8. Использование форм ввода данных.
pascal/<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=top><col 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=center><INPUT TYPE="reset" NAME="but2" VALUE="Очистить форму">
<INPUT TYPE="submit" NAME="but3" VALUE="Отправка данных">
</FORM>
<HR>
<P ALIGN=CENTER>© 2001 Вебмастер <A HREF="mailto:myname@mail.ru">Попробуй связаться со мной</A>
</BODY>
</HTML>
pascal/
В заключении рассмотрим область применения форм в HTML-документах. Наиболее часто они применяются для разработки интерфейса следующих приложений: поисковые службы, информационные базы данных, онлайновые справочники, заказные центры на товары и услуги, гостевые и регистрационные книги пользователей в различных электронных службах, различные финансовые и бизнес приложения в Web.
