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

Данные элементы форм определяются при помощи тега <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 - данный элемент формы не доступен (элемент затеняется и исключается при переходах от элемента формы к элементу);

Пример:

<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 лет

</FORM>

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

Пример 7. Использование форм ввода данных.

<HTML>

<HEAD>

<TITLE>Использование форм в документах</TITLE>

</HEAD>

<H1 ALIGN=CENTER>Заполните пожалуйста анкету</H1>

<HR>

<tr>

<th>Введите ваше ФИО:

<td>

<tr>

<th>Введите пароль:

<td>

<tr>

<th>Ваш род занятий:

<td>

<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>

<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>

</FORM>

<HR>

<P ALIGN=CENTER>&copy 2001 Вебмастер <A HREF="mailto:myname@mail.ru">Попробуй связаться со мной</A>

</BODY>

</HTML>

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