Урок на тему: "Javascript. Форми на веб-сторінках"

Тема. Мова програмування Javascript. Форми на Web-сторінках.

 

Теоретичні відомості

Форма ­­– документ, що об’єднує в собі логічно пов’язані елементи управління. В мові HTML форма є основним засобом введення і обробки інформації.

Введена інформація може бути відправлена як на сайт, так і на електронний адрес. Передана на сервер інформація обробляється програмою ­– CGI-сценарієм. CGI(Common Gateway Interface) – загальний шлюзовий інтерфейс – програми, що відповідає протоколам взаємодії зовнішніх програм з Web-сервером. З допомогою таких програм-сценаріїв Ви можете з сервера отримати перетворену Web-сторінку, можете відправити електронного листа або отримати результат пошуку по ключових словам і таке інше. Все залежить від алгоритму CGI-сценарію.

Одна  Web-сторінка допускає використання декількох форм, кожна з яких має свою область дії і функціонує незалежно від інших.

Форми вкладеними не можуть бути.

 Для задання форми використовують парний тег <FORM>. Даний тег має ряд атрибутів, що дозволяє створювати код форми.

Назва атрибута	Характеристика	Значення
name	задає ім’я форми	«ім’я форми»
action	задає URL-адрес, по якому будуть представлені дані форми	1.«http://ім’я сервера/ім’я папки/ім’я програми обробки даних» 2.«mailto: електронна адреса»
method	задає  метод передачі інформації	“get” – значення по замовчуванню, метод передачі форм з короткими полями “post” – метод використовується для передачі великих об’ємів інформації
Enctype	задає тип кодування інформації	Application/x-www-form-urlencoded – по замовчуванню, співпадає з правилами кодування URL-адреси

  

 Елементами управління форми можуть бути:

Вид	Характеристика	Назва
1	2	3
Текстове поле	Призначено для введення буквенно-цифрових даних	Text
Багаторядкове текстове поле	Призначено для введення тексту, що складається з декількох абзаців. Може мати вертикальну полосу прокрутки	Textarea
Прапорець	Означає деякий вибір. Декілька прапорців складають групу, що відповідає набору параметрів вибору	checkbox
Перемикач	Кнопка вибору або радіокнопка. Перемикачі мають два положення і дозволяють вибрати одне і тільки одне положення.	Radio
Список	Дозволяють користувачеві вибрати елемент із випадаючого списку  з полосою прокрутки	Select
Поле введення паролю	Текстове поле, в яке вводиться схований вміст у вигляді «*»	password
Поле введення файлів	Поле введення, що оснащене додатковими кнопками, що дозволяють вибрати на диску файл і включити його в форму для пересилки	file
Кнопка	Використовується для:
	представлення даних форми	Submit
	скидання даних форми	Reset
	створення ефектів для кнопки	button
1	2	3
Надпис		label
Група елементів	Використовується для об’єднання елементів зв’язаного змісту в групу	fieldset
Сховане поле	Використовуються для передачі не відкоригованих даних, не видимі на Web-сторінці	hidden

 

Створення елементів управління форми

Для створення деякого елемента управління форми використовується тег <INPUT>, всередині якого розміщуються необхідні атрибути.

 

Основні атрибути тега <INPUT>

Назва атрибута	Характеристика
1	2
Type	вказує тип елемента
Name	назначає ім’я елементу
Align	вирівнювання елемента по вертикалі
checked	визначає установку прапорця або перемикача
Size	розмір текстового поля
maxlength	задає максимальну довжину текстового поля
Value	визначає значення для елемента, що заданий атрибутом  type
tabindex	визначає порядок переміщення по елементам форми клавішею Tab
Src

 

Формування груп елементів управління

При створення форми можна логічно зв’язані елементи формувати в групи шляхом відображення їх в прямокутних областях. Для створення таких груп використовують теги <fieldset> (задає прямокутну область групи) і <legend>(визначає назву легенди групи).

 

Створення списків

В мові HTML існують такі види списків:

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

–        поле-список – поле, що складається з декількох рядків, має полосу прокрутки;

–        список з множинним вибором – поле, що складається з декількох рядків, має полосу прокрутки і дозволяє вибирати декілька позицій списку.

Для створення списків на Web-сторінці в HTML коді використовують тег <select>, що задає список як об’єкт і тег <option>, що визначає кожен елемент списку.

Наприклад:

<html>

 <head> <title> Назва документа </title>

 </head>

 <body>

  <form>

  … … … … … …

    <select атрибут1 = значення атрибут2 = значення … атрибутN = значення>

   <options> елемент1 списку

   <options> елемент2 списку

   … … … … … …

<options> елементL списку

    </select>

                         </form>

 </body>

</html>

Тег <select> може включати в себе наступні атрибути:

–name – задає ім’я списку;

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

–multiple – включає режим вибору декілька позицій списку, тобто визначає список з множинним вибором.

Одиночний тег <options> може містити атрибут <selected> – його присутність встановлює початкове виділення конкретної позиції списку.

 

  Завдання 1. Дано довжину основи і довжину висоти прямокутного трикутника. Створити програму обчислення площі використовуючи вказівки мови розмітки HTML та мови програмування Lavascript .

Код веб-сторінки матиме вигляд:

<!DOCTYPE html>

<html>

 <head>

     <title> Обчислення площі прямокутного трикутника </title>

    <meta http-equiv="content-type"  content="text/html; charset=utf-8" />

 <script language="Javascript">

  function area1 (a,h)                                         {   

      form1.output1.value=(a.value*h.value)/2;    }

 </script>

  </head>

  <body>

    <p> Обчислення площі прямокутного трикутника </p>

 <form name="form1">

   <fieldset style="width: 40%">

     <legend> Введення даних </legend>

      Основа: <input type="text" size=7  name="st1">

      Висота: <input type="text" size=7 name="st2">  <br>

   </fieldset> 

   <fieldset style="width: 40%">

  <legend> Обробка та виведення даних </legend>

  Площа:  <input type="text" size=7 name="output1" readonly > <br>

   <input type="button" value="Обчислити" style="margin:10px"    onClick="area1(form1.st1, form1.st2)">

   </fieldset>   

 </form>

  </body> 

</html>

 

Веб-сторінка матиме такий вигляд:

 

Завдання 2. В анкеті потрібно вказати ті мови, якими володіє перекладач. Нехай, за знання кожної мови призначається певна сума. Розмір винагороди визначається після заповнення анкети в залежності від тих мов, якими володіє перекладач. По результатах  заповненої перекладачем анкети напишемо сценарій визначення розміру винагороди.

Код сценарію матиме вигляд:

<html>

  <head>

     <title> Обробка даних представлених прапорцем. Анкета </title>

    <script language="JavaScript">

     function grant()

     {

  var d=document;

  var k=0;

      if ((d.form1.elements[0]).checked)

          k=k+Number(d.form1.elements[0].value)

   if ((d.form1.elements[1]).checked)

          k=k+Number(d.form1.elements[1].value)

      if ((d.form1.elements[2]).checked)

          k=k+Number(d.form1.elements[2].value)

  if ((d.form1.elements[3]).checked)

          k=k+Number(d.form1.elements[3].value)

      if ((d.form1.elements[4]).checked)

          k=k+Number(d.form1.elements[4].value)

      if ((d.form1.elements[5]).checked)

          k=k+Number(d.form1.elements[5].value)

    d.form1.output1.value=k;

 }

    </script>

  </head>

 </body>                                                     

   <h3> Анкета для перекладачів </h3>

     Вкажіть ті мови, якими ви володієте досконало: <br>

   <form name="form1">

     <input type="checkbox" name="lan" value=100> російська   <br>

  <input type="checkbox" name="lan" value=200> англійська  <br>

  <input type="checkbox" name="lan" value=300> французька  <br>

  <input type="checkbox" name="lan" value=400> німецька    <br>

  <input type="checkbox" name="lan" value=500> китайська   <br>

  <input type="checkbox" name="lan" value=600> японська    <br> <hr>

  <input type="text" name="output1" size=10>

  <input type="button"  value = Винагорода onClick="grant()">   <hr>

  <input type="reset"   value="Відмінити">

   </form> <hr> 

  </body>

</html>

  Веб-сторінка матиме вигляд:

 

  Завдання 3. Потрібно написати сценарій, в якому в залежності від довжини сторони або радіуса і форми вибраного вітражу обчислюється його площа. Для простоти будемо вважати, що вітраж може мати форму квадрата(задається його сторона), або форму круга(задається радіус), або форма рівностороннього трикутника(задається його сторона).

Площу фігури будемо розраховувати по формулі  k*a², де k – коефіцієнт, що залежить від форми вибраної фігури;  а – значення, що задається користувачем. Обчислення будуть простішими, якщо коефіцієнт k вказати як значення параметра value відповідного перемикача. Клацання на елементі «перемикач» відповідає події Click, обробка якої відбувається при визові функції  test. Функція має єдиний параметр, значення параметра – value перемикача, яке служить для обчислення площі фігури.

Код веб-сторінки матиме вигляд:

<html>

 <head>

      <title> Обробка даних із форми типу "перемикач" </title>

    <script language="JavaScript">

   function test(k)

 { var a=form1.data.value

    if (a!="")

     form1.res.value=k*Math.pow(a,2)

    else alert("Введіть значення")

 }

  </script>

  </head>

 <body>

  <form name="form1">

     Введіть значення: <input type="text" name="data" size=10>

       <hr>

       Вкажіть форму: <br>

    <input type="radio" name="fv" value=1

           onClick="test(form1.elements[1].value)"> квадрат    <br>

    <input type="radio" name="fv" value=3.14

           onClick="test(form1.elements[2].value)"> круг       <br>

       <input type="radio" name="fv" value=0.42

           onClick="test(form1.elements[3].value)"> трикутник  <br>

       <input type="reset" value="Відмінити">                     <hr> 

    Площа: <input type="text" name="res" size=10>

   </form>

 </body>

</html>

 Веб-сторінка матиме вигляд:

    

Контрольні запитання

1.Що таке форма в HTML-документі ?

2.В яких випадках використовуються форми ?

3.Скільки форм можна розмістити на одній сторінці ?

4.Чи можуть форми бути вкладеними ?

5.Який тег використовують для задання форми ?

6.Назвіть відомі вам атрибути тега форми.

7.Перерахуйте відомі вам елементи управління, які можуть створювати форму.

8.Який тег використовується для створення на сторінці будь-якого елемента ?

9.Для чого елементу присвоюється ім’я ? Чи можливий опис і використання елемента без нього ?

10.Які елементи управління відносяться до текстових полів ? Перерахуйте їх назви.

11.Якими атрибутами можна керувати параметрами текстового поля ?

12.В яких випадках використовуються елементи-перемикачі ?

13.Вкажіть синтаксис опису перемикачів в веб-документах ?

14.Які типи кнопок використовують в формах ? Які при цьому значення приймає атрибут type ?

15.Для чого в формі потрібні прапорці ? Які параметри має прапорець ?  Вкажіть синтаксис опису даного елемента.

16.Чим відрізняються такі елементи як прапорець і перемикач ?

17.Для чого в формі використовують об’єднання елементів у групи ? Які теги при цьому застосовують ?

18.Поясніть структуру веб-документа, що описує створення групи елементів управління.

 

Дані web-сторінки можна побачити на блозі «Вивчаємо Javascript» по адресу:  https://pishachok2.blogspot.com/ .