Демонстрация возможностей DHTML

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

Вот пример кода Web-документа в котором имеется простая форма, включающая метки, кнопки с зависимой фиксацией, кнопку с независимой фиксациейи, кнопки очистки формы и отправки:

<HTML>
<HEAD>
<TITLE>Пример использования форм</TITLE>
<FORM action="http://somesite.com/prog/adduser" method="post">
<P>
<LABEL for="firstname">Имя: </LABEL>
<INPUT type="text" id="firstname"><BR>
<LABEL for="lastname">Фамилия: </LABEL>
<INPUT type="text" id="lastname"><BR>
<LABEL for="email">Адрес электронной почты: </LABEL>
<INPUT type="text" id="email"><BR>
<INPUT type="radio" name="sex" value="Male"> Мужской<BR>
<INPUT type="radio" name="sex" value="Female"> Женский<BR>
<input type="checkbox" name="uvl" value="uvlprog">Увлекаюсь программированием<BR>
<INPUT type="submit" value="Отправить"> <INPUT type="reset">
</FORM>
</BODY>
</HTML>

В результате на нашей страничке появится такая форма:

Задание. Попробуйте набрать в текстовом редакторе "Блокнот" код этой странички. Сохраните получившийся файл под именем form1.html, а затем откройте его в броузере.

Данные удобно представлять с помощью элемента управления - переключателя (или радиокнопки) в том случае, когда из нескольких вариантов может быть выбран лишь один. Элемент переключатель отображается в виде круглой кнопки, существует только в составе группы подобных элементов. Может быть осуществлен выбор лишь одного элемента группы. Переключатель определяется в теге <input> значением radio параметра type. (<INPUT type="radio" name="pol" value="Male" checked ="false"> Мужской<BR>).Все элементы группы должны иметь одинаковое значение параметра name. Обязательный параметр value должен иметь уникальное значение для каждого элемента группы. Свойство checked выдает значение true, если переключатель выбран, и false - в противном случае.

Элемент управления флажок используется в случае, когда из предложенных вариантов можно выбрать как один вариант, так и несколько. Каждый вариант выбора задается флажком, который можно либо установить, либо сбросить. Флажок определяется в теге <input> значением checkbox параметра type. Обязательным параметром является параметр value, значение которого будет передано на обработку в случае выбора кнопки.(<input type="checkbox" name="uvl" value="uvlprog">Увлекаюсь программированием).

Использование сценариев при обработке форм

Чтобы облегчить работу пользователя с формой, необходимо обеспечить интерактивность на страничке. В этом нам поможет язык сценариев JavaScript. Рассмотрим примеры использования сценариев для работы с элементами форм. Рассмотрим примеры работы с кнопками:

<HTML>
<HEAD>
<TITLE>Вставка сценариев в документ</TITLE>
<SCRIPT language=JavaScript>

</SCRIPT>
</HEAD>
<BODY BGCOLOR="white">
<TABLE width=600 border=0>
<TBODY>
<TR>
<TD width=395>
<P>Примеры работы с кнопками: <BR> Пример1 - реакция на событие Onclick - появление диалогового окна <br>
Пример2 - реакция на событие Onclick - событие на панели состояния<br>
Пример3 - реакция на событие Onclick - событие на панели состояния</P>
</TD>
<TD width=189>
<FORM name="" action="" method=post>
<P><INPUT onclick="MM_popupMsg('Вы нажали кнопку Пример1')" type=button value=Пример1 name=Пример1>
<P><INPUT onclick="MM_displayStatusMsg('Теперь вы нажали вторую кнопку!');return document.MM_returnValue" type=button value=Пример2 name=Пример2>
<P><INPUT class=lit onclick="MM_displayStatusMsg(' ');MM_popupMsg('Убрали событие из Status Massage');return document.MM_returnValue" type=button value="Пример 3" name="Пример 3 ">
</FORM></P></TD></TR></TBODY></TABLE>
</BODY>
</HTML>

В результате на Web-странице появится форма с кнопками:

<html>
<head>
<title>Обработка форм</title>
<script language="JavaScript">

</script>
</head>
<body>
<form>
<p>Введите своё имя (не менее 5 символов):<input type="text" name="text1" id="imya" size="40" alt="Не менее 5 символов"> </p>
<p align="center"><i><font size="4">
<input type="submit" value="Отправить сообщение" onClick="test1(this.form)" style="font-weight: 700; float:left" id="submit"></font></i>
<i><font size="4">
<input type="reset" value="Очистить поле" style="font-weight: 700; float:left"></font></i><br>
<br>
</p>
</form>
</body>
</html>

В результате на Web-страничке пользователь увидит следующее:

Задание. Попробуйте набрать в текстовом редакторе "Блокнот" код этой странички. Сохраните получившийся файл под именем form3.html, а затем откройте его в броузере. Попробуйте изменить код сценария так, чтобы минимальное количество вводимых символов равнялось семи.

Использование JavaScript для обработки элементов форм.