Властивості елемента 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. Додайте оброблювачі подій для елементів форми. Наприклад:
<input type=”button” value=”Click here” onClick=’alert(“Hello!”)’/>
<textarea name=”msg” onFocus=”eraseMsg()”> Some text </textarea>
До коду скрипта додати:
erased=false;
function eraseMsg()
{ if (erased==false)
{ document.forms[0].msg.value=””;
erased=true; }
}
2. Використайте подію onsubmit для перевірки коректності заповнення електронної адреси. Виведіть інформацію, що міститься у формі у нове вікно. Наприклад:
<form metod="post" id="lab6" onsubmit = create_window()>
До коду скрипта додати:
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. Використати форму розроблену у попередній лабораторній роботі.
2. Додати функції для перевірки обробки необхідних полів.
3. Додати функцію, що обробляє вміст форми та генерує нове вікно з отриманою інформацією.
6.4 Контрольні запитання
1. Який тег дозволяє включити JavaScrіpt в HTML документ?
2. Перелічіть основні конструкції мови JavaScrіpt.
3. Розкрийте ієрархію об'єктів документа.
4. Перелічіть основні властивості й методи об'єкта wіndow.
5. Перелічіть основні властивості й методи об'єкта document.
6. Які події використовують при обробці даних форми?
7. Що таке подія?
8. Як виконується доступ до властивостей форми?
9. Що зберігається в масиві elements?
10. Як одержати доступ до об'єктів форми?