JavaScript урок 9. Объектная модель документа (продолжение): идентификация формы

Форма: идентификация формы, события

На это уроке рассматриваются все эти понятия, связанные с формой.

Для идентификации формы и ее элементов через javaScript можно воспользоваться двумя атрибутами: name и id.

Пример обращения в javaScript к форме:

<form name="f1" id="f">
Ваш пол:<br>
<input type="radio" name="r1" id="id1">м<br>
<input type="radio" name="r1" id="id2">ж<br>
<input type="submit">
</form>
</body>

✍ Решение:
 

document.forms[0].  // первый элемент массива форм
document.getElementById("f").  // объект форма c id=f
document.getElementsByTagName("f1"). // массив объектов с именем f1

• В случае, когда мы используем javaScript для динамичности и интерактивности веб-страниц, но, при этом отправлять данные с формы на сервер не требуется, то для идентификации используется атрибут id.
• Атрибут name необходим для того, чтобы отправить форму на сервер.

<form action="..." method="..." enctype="..." id="...">
<input type="text" id="...">
...
<input type="submit" id="...">
</form>

Атрибуты формы:

Пример:

<form name="myForm" action="file.php" method="post" enctype="text/plain">

• В атрибуте action указывается серверный файл со скриптом, ответственным за основную обработку данных, пересылаемых из формы. Обычно код этого файла пишется на серверном языке программирования, например, на языке php или perl.
• Атрибут enctype указывает на тип передаваемой на сервер информации, если это просто текстовые данные — text/plain, если с формой отсылаются файлы, то следует указать multipart/form-data.
• Атрибут method указывает и определяет форму передачи данных. Подробно мы на этом останавливаться не будем, однако следует сказать, что для более надежной передачи следует указать метод post.

<form name="f_name" method="get" action="javascript:void(0);">
 <input name="i_name" size="30" type="text" value="текст">
 <textarea name="mess"></textarea>
 <input type="checkbox" name="chName" id="chId" value="yes" />да
 <input type="radio" name="rName" id="rId" value="yes" />да
 <input type="file" name="fName" id="fId" />
 <input type="password" name="pName" id="pId" />
 <input type="hidden" name="hName" id="hId"  value=“hid"/> 
 <select name="sName" id="sId" multiple="multiple" >
   <option name="opt1Name" id="opt1Id" value="1">text1
   <option name="opt2Name" id="opt2Id" value="2">text2
 </select>
</form>

О том, как правильно располагать элементы управления на форме с точки зрения юзэбилити, можно прочитать статью на сайте tproger по сслыке1 и ссылке2.

Методы формы

Submit() ~ использование кнопки submit
Reset() ~ использование кнопки reset

  
Метод submit() формы применяется для отправки формы из JavaScript-программы
  

Пример того как можно в javascript отправить форму по щелчку на гиперссылке:

<form name="s" method="post" action= 
"javascript:window.alert('данные подтверждены'); void(0);">
	<input type="text" size="1">
</form>
 
<a href="javascript:document.s.submit();">Отослать</a>

— void(0) — отмена пересылки данных на сервер
— при нажатии на ссылку происходит переход к выполнению action

Событие javascript onsubmit и onreset

Рассмотрим использование событий на примерах:

Скрипт:

…
function confirmOrder() { 
confirm ('Вы подтверждаете заказ?') ; 
}
…

<!-- функция confirmOrder() вызывается в качестве значения атрибута onsubmit формы -->
<form action="script.php" method="post" onsubmit="confirmOrder()"> 
<input type="submit" value="ok" />
</form>

В следующем примере происходит регистрация функции-обработчика в качестве свойства элемента:

<form action="process.cgi" id="f1" method="post">
<input type="text" value="John" />
<input type="reset" value="cancel" /> 
</form>

Скрипт:

document.getElementById("f1").onreset=function()
 {
   confirm ('Вы уверены, что хотите очистить форму?') ;  
 };

В скрипте происходит обращение к форме (f1) и в качестве ее свойства указывается функция-обработчик