Раздел "Формы" посвящен созданию различных элементов:
- строки,
- кнопки,
- линейки прокрутки, и др.
Дальнейшая задача состоит в обработке этих элементов:
- чтение информации из элементов форм,
- получение информации о нажатии кнопок,
- обработка полученной информации.

Рассмотрим примеры работы с различными элементами Форм.

Получение информации из текстовой строки.

Для определения текстовой строки мы задаем параметр type="text" в операторе input.
После заполнения строки пользователь нажимает правой кнокой мыши на какую-либо точку экрана вне поля текста (то есть элемент теряет фокус ввода). При этом управление получает созданная нами функция getname, задаваемая в параметре onBlur.
В свою очередь, параметр этой функции this.value содержит значение строки текста.
Эту строку в функции getname мы выведем на экран в специальном окне с помощью стандартной функции alert.
И все это выглядит следующим образом:

<script language="JavaScript">
function getname(str) {
alert(str);
}
</script>
Введите Ваше имя:
<form>
<input type="text" name="name"
onBlur="getname(this.value); return true;" value="Insert text">
</form>

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

Введите Ваше имя:

(Боюсь, что программистам все ясно и беэ моих комментариев, а остальных я запутал окончательно. Но я советую разбирать этот пример, пока Вы не поймете, тогда будет легко понять дальнейшее.)
Данный пример можно упростить, удалив функцию getname, и записав: onBlur="alert(this.value); return true;".
Проверьте.

Кроме уже рассмотренного обработчика событий onBlur(), который вызывается, когда text утрачивает фокус ввода, существуют еще 2 обработчика событий:
- onchange() - вызывается, когда пользователь изменяет значение в элементе text и этот обьект утрачивает фокус ввода,
- onfocus() - вызывается, когда пользователь перемещает фокус ввода с клавиатуры в обьект text.
Вставьте каждый из этих обработчиков событий в вышеприведенный пример вместо onBlur() и проверьте действие программы.

Получение информации из текстового поля.

Этот пример строится на тех же принципах, что и предыдущий:

<script language="JavaScript">
function getname(str) {
alert(str);
}
</script>
Введите все, что Вы хотите:
<form>
<textarea name="name" cols=30 rows=5 wrap=virtual
onBlur="getname(this.value); return true;">
Insert any text
</textarea>
</form>

Посмотрите, как он выполняется:

Введите все, что Вы хотите:

Обработка нажатия кнопок.

Стандартная кнопка задается параметром type="button" в операторе input.
При нажатии кнопки выполняется созданная нами функция, заданная в параметре onclick, то есть onPush().
Эта функция выводит текст "H E L L O" в новое окно.
Ниже приведен этот пример:

<script language="JavaScript">
function onPush() {
alert("H E L L O !"); return true;
}
</script>
<form>
<input type="button" name="Button1"
value="Push" onclick="onPush(); return true;">
</form>

А теперь нажмите на нижеприведенную кнопку.

В первом примере данного раздела для указания значения текстового поля мы пользовались аттрибутом this.value, что означает "значение данного элемента". Но мы можем захотеть работать с полем другого элемента.
Тогда применим полное имя, имеющее следующий формат:
document.<Имя-формы>.<Имя-Элемента>.value, где:
Имя-формы - значение параметра name команды form,
Имя-Элемента - значение параметра name команды input.

В данном примере мы обрабатываем форму myForm1, содержащую одно текстовое поле, названное myText и 2 кнопки: Button1 и Button2.
Для каждой из этих кнопок создана функция, записывающая в текстовое поле сообщение о нажатии "своей" кнопки.
Программа выглядит следующим образом:

<script language="JavaScript">
function FirstFunction() {
document.myForm1.myText.value ="Вы нажали первую кнопку";
}
function SecondFunction() {
document.myForm1.myText.value ="Вы нажали вторую кнопку";
}
</script>
<form name="myForm1">
<input type="text" name="myText" size=30
value="Нажмите одну из кнопок"><p>
<input type="button" name="Button1"
value="Первая кнопка"
onclick="FirstFunction(); return true;">
<input type="button" name="Button2"
value="Вторая кнопка" onclick="SecondFunction(); return true;">
</form>

Посмотрите, как она выполняется:

Обработка кнопки отметки.

В форме, названной myForm2 , вводим 2 элемента:
- текстовую строку myText , служащую для вывода текстовой информации,
- кнопка отметки - при включении (отключении) символа отметки управление передается пользовательской функции myFunction2.
В этой функции вводится текстовая переменная myString , в которую вначале записывается текст "кнопка" . Если кнопка отмечена (то есть в ней присутствует символ "птичка" , то к тексту дописывается слово "отмечена" , иначе - "не отмечена".
Полученный текст передается в текстовый элемент формы.

<script language="JavaScript">
function myFunction2() {
var myString="Кнопка";
if (document.myForm2.myCheckBox.checked)
myString += " отмечена";
else
myString += " не отмечена";
document.myForm2.myText.value = myString;
}
</script>
<form name="myForm2">
<input type="text" name="myText" size=30
value="Нажмите кнопку"><p>
Кнопка отметки:<p>
value="Кнопка отметки" onclick="myFunction2(); return true;">
</form>

Нажмите несколько раз на кнопку отметки и посмотрите на изменения в текстовой строке.

Выполнение вычислений.

Текстовое поле можно использовать как входное для калькулятора.
В данном примере стандартная функция confirm создает новое окно с вопросом и принимает и анализирует ответ. Если он положителен, то надо вычислить (с помощью стандартной функции eval ) выражение в поле text1 и записать его в text2 .
Кнопка button вызывает обращение к пользовательской функции Function3 для выполнения вычислений.

<script language="JavaScript">
function myFunction3() {
var myString3="";
if (confirm("Compute?"))
document.myForm3.myText2.value = eval(document.myForm3.myText1.value);
else
document.myForm3.myText2.value = myString3;
}
</script>
<form name="myForm3">
Введите выражение для вычислений:
<input type="text" name="myText1" size=40
value="Поле для ввода"><p>
<input type="button" name="myCheckBox"
value="Вычисление: " onclick="myFunction3()"><p>
Результат:
<input type="text" name="myText2" size=40
value="Поле для вывода:"><p>
</form>

Для выполнения вычислений заполните поле для ввода и нажмите кнопку "Вычисление"

Числовые поля.

Здесь мы вводим 2 числовых поля (type="num") и складываем их.
Для перевода этих чисел в десятичную форму используется стандартная функция parceInt. <script language="JavaScript">
function myFunction4() {
var val1 = parseInt(document.myForm4.myNum1.value);
var val2 = parseInt(document.myForm4.myNum2.value);
var val3 = val1 + val2;
document.myForm4.myNum3.value = val3;
}
</script>
<form name="myForm4">
Сложение 2 чисел:<p>
Введите первое слагаемое:
<input type="num" name="myNum1" value=0 size=10><p>
Введите второе слагаемое:
<input type="num" name="myNum2" value=0 size=10><p>
<input type="button" name="Button4"
value="Сложение"
onclick="myFunction4(); return true;"><p>
<input type="num" name="myNum3" value=0 size=10><p>
</form>

Проверьте действие этой программы: