Oбработка событий

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

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

   Для определения текстовой строки мы задаем параметр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="Введите текст">
</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;">
    Введите любой текст
    </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="Нажать" 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>

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