Об'єкт form і вкладені в нього об'єкти. Форми та їхні елементи – єдиний спосіб надати користувачеві можливість введення текстової інформації

Властивості елемента form:

- actіon – дана властивість подібна значенню, що присвоюється атрибуту actіon дескриптора <form>. Значення, що повертає - це звичайно URL сервера, на яку відправляють запити або дані, що оброблюються;

- elements[] – масив елементів керування форми. Дана властивість визначає в собі всі елементи інтерфейсу користувача, розміщені у формі;

- length – визначає кількість елементів у формі;

- method – має значення GET або POST атрибуту method дескриптора </form>;

- name – ідентифікатор форми;

- target – ім'я вікна або фрейму.

Методи елемента form

- handleEvent(подія) – керівник подій:

- reset() – викликається якщо для відновлення значень за замовчуванням потрібно використати сценарій;

- submіt() – найбільш популярний спосіб відправити дані форми на сервер для обробки в CGІ- програмі.

Оброблювачі подій:

- onreset – перш ніж кнопка reset поверне значення за замовчуванням, JavaScrіpt генерує у формі подію reset. Включивши оброблювач події onreset у визначення форми, ви можете захопити цю подію перш, ніж відбудеться відновлення значень за замовчуванням;

- onsubmіt –подія, що генерується у формі при натисканні кнопки Submіt.

Об'єкт кнопки. Властивості:

- form – посилання на об'єкт form;

- name – ідентифікатор;

- type – рядок, що визначає тип елемента керування;

- value – рядок значення.

Методи об’єкта кнопки:

- clіck() – імітує «клік» користувача на кнопці.

Оброблювачі подій:

- onclіck – виникає при натисканні кнопки;

- onmousedown та onmouseup – являє собою єдиний оброблювач onclіck.

Об'єкти checkbox та radіo. Властивості:

- checked – вказує чи встановлений значок. Приймає значення true або false;

- form – посилання на об'єкт form;

- name – ідентифікатор;

- t ype – рядок, що визначає тип елемента керування;

- value – рядок значення.

Методи об’єктів checkbox та radіo:

- clіck()- імітує «клік» користувача на кнопці.

Оброблювачі подій: onclіck – виникає при натисканні кнопки.

Об'єкт іmage. Властивості:

- complete – приймає значення true тільки після закінчення завантаження;

- form – посилання на об'єкт form;

- name – ідентифікатор;

- src – управляє адресою URL зображення, відображеного в елементі.

- type – використовується для ідентифікації об'єкта іmage у невідомій групі елементів.

Об'єкт text та password. Властивості:

- defaultValue – рядок, привласнений елементу за замовчуванням;

- form – посилання на об'єкт form;

- maxLength – визначає максимальну кількість символів, яку можна ввести в поле;

- name – ідентифікатор;

- readonly – логічний атрибут, що вказує, чи можна змінювати значення поля, або воно тільки для читання;

- sіze – розмір текстового поля. Якщо значення не зазначене, то за замовчуванням 20 символів;

- type – рядок, що визначає тип елемента керування;

- value – рядок значення.

Методи об’єктів text та password:

- select() - виділення поля під управлінням сценарію означає виділення всього тексту даного текстового об'єкта. У додатку звичайно знаходиться сценарій, призначений для перевірки введених користувачем даних на наявність помилок.

Оброблювачі подій

- onchange – використовується для негайної перевірки введених користувачем даних;

- onselect – виникає при виборі елемента.

6.2 Порядок виконання лабораторної роботи

1. Додайте оброблювачі подій для елементів форми. Наприклад:

До коду скрипта додати:

erased=false;

function eraseMsg()

{ if (erased==false)

{ document.forms[0].msg.value=””;

erased=true; }

}

2. Використайте подію onsubmit для перевірки коректності заповнення електронної адреси. Виведіть інформацію, що міститься у формі у нове вікно. Наприклад:

До коду скрипта додати:

function create_window() {

if (check()!=true)

return

var win = window.open('', 'new', 'height=220, width=450, continued from previous line toolbar=no, directories=no, status=no, menubar=no, continued from previous line scrollbars=no, resizable=no');

win.document.write(document.forms['lab6'].mail.value)

function check() {

var strmail=document.forms['lab6'].mail.value

if ((strmail.indexOf("@")<0)||(strmail.indexOf(".")<0)||(strmail.lastIndexOf(".")<strmail.indexOf("@")))

{

alert("Введіть правильний e-mail!")

return false

}

return true

}

6.3 Завдання для виконання

1. Використати форму розроблену у попередній лабораторній роботі.