Форма: ідентифікація форми, події

Як і всі об'єкти, об'єкт форма має:

властивості (атрибути);
методи;
події.

На це уроці розглядаються всі ці поняття, пов'язані з формою.

Як отримати доступ до форми через javascript?

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

Приклад звернення до javaScript до форми:

Приклад: Створити форму з двома елементами типу radio (перемикачі) та кнопкою відправки форми на сервер (submit). Отримати доступ в скрипті до форми:

< 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. // перший елемент масиву форм
document. getElementById"f". // об'єкт форма c id = f
document. getElementByTagNamef1. // масив об'єктів з ім'ям f1

Коли використовувати name, а коли id?

У разі, коли ми використовуємо javaScript для динамічності та інтерактивності веб-сторінок, але, при цьому відправляти дані з форми на сервер не потрібно, то для ідентифікації використовується атрибут id.
Атрибут name необхідний для того, щоб відправити форму на сервер.

Всі елементи управління обов'язково розташовуються в формі:

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

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

action (англ. «дія») Файл на сервері з кодом для відпрацювання відісланих даних	http://inter.ptngu.com
enctype (англ. «тип кодування»)	text / plain (звичайний текст) application / x-www-dorm-urlencoded (для методу Post відправки форми) multipart / form-data (для методу Post, якщо прикріплюються файли)
method (метод отправки данных)	post get

Пример:

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

Пояснення: При натисканні на кнопці submit дані на сервер будуть пересилатися в формі змінна = значення в наступному форматі:

i_name = текст

mess = ""

chName = yes

rName = yes

fName = шлях до файлу

pName = ""

hName = hid

sName = 1 або 2

Про те, як правильно розташовувати елементи управління на формі з точки зору юзебіліті, можна прочитати статтю на сайті 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 ("Ви підтверджуєте замовлення?");
}
...

< form action = "script.php" method = "post" onsubmit = "confirmOrder()" >
< input type = "sibmit" value = "ok" />
</ form >

У наступному прикладі відбувається реєстрація функції-обробника в якості властивості елемента:

Приклад: При очищенні форми (елемент reset) видавати діалогове вікно для підтвердження очищення. Виконати у вигляді скрипта з посиланням на функцію

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

Скрипт:

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

В скрипті відбувається звернення до формі (f1) і в якості її властивості вказується функція-обробник

Завдання js9_1. Створити сторінку з текстовим полем і двома кнопками. При натисканні однієї з них відбувається передача даних вмісту текстового поля по електронній пошті (action = "mailto: address@domen.domen"), при натисканні іншої - відбувається очищення текстового поля

Завдання js9_2. Після клацання на кнопці очищення форми встановлювати напис «Готово!» На цій кнопці (властивість value)