Поняття об’єктної моделі документа. Веб-програмування та інтерактивні сторінки. Використання форм. Основні елементи форми. Валідація та збереження даних форм. Практична робота №5 «Створення та налагодження інтерактивної веб-сторінки з використанням форм та веб-програмування»

Форма це елемент HTML-документа, що забезпечує взаємозв'язок з Web-вузлом. Форми використовуються для опитування відвідувачів, замовлення різних послуг та інших дій. 
 
<form>...</form>- це фундаментальний елемент всіх форм, парний тег. Форма може мати декілька атрибутів. Основні з них:
  • action, значенням якого є URL для передачі на вузол інформації з форми;
  • metod, що приймає значення get або post (визначення способу  передачі даних форми до  вузла).
<form method="post"  action="mailto:nadya@ukr.net">
 
</form>
 
Основними елементами, що розміщуються на формі, є:
  • текстові поля;
  • перемикачі;
  • прапорці;
  • списки;
  • кнопки.
Більшість з них створюється за допомогою непарного тегу <input>
  • text - текстове поле.
  • password - поле з паролем.
  • radio - перемикач.
  • checkbox - прапорець.
  • hidden - приховане поле.
  • button - кнопка.
  • submit - кнопка для відправлення форми.
  • reset - кнопка для очищення форми.
  • image - кнопка із зображенням.
  • file - поле для відправлення файлу.
Тег <input> може мати різні атрибути. 
  • type – визначає елемент управління (button, checkbox та інші-23 значення. Детальніше);
  • name - ім'я елемента управління;
  • value – значення елемента управління (атрибут є обов'язковим лише для  перемикача radio);
  • size – ширина поля елемента управління в пікселях (для елементів text і password ширину поля визначають в символах);
  • maxlength – максимальна кількість символів, котрі приймає елемент управління;
  • checked – відмічений прапорець checkbox (перемикач radio);
  • src – вказівник на рисунок, що використовується в формі як графічна кнопка.
У HTML5 істотно розширений перелік таких елементів. Завдяки цим нововведенням форми стали привабливішими, а також значно спрощується перевірка правильності введення (валідация) клієнтом даних у форму. Детальніше.
Розглянемо приклад форми з різними елементами керування
 
    Заголовок форми
    <h1>Опитування</h1>
    <h2>Дайте відповіді на запитання анкети :)</h2>
   
 <form method="post" action="mailto:nadiya@ukr.net">
               Текстове поле
        <h3>Прізвище, ім'я *</h3>
        <input type="text"  name="name" value="" placeholder="Вкажи прізвище, ім'я"  />
              Перемикачі (радіокнопки)       
  <h3>Стать *</h3>
         Жінка    <input type = "radio" name = "sex" value ="female"/>
         Чоловік <input type = "radio" name = "sex" value ="male" checked/>
               
              Прапорці (чекбокси)    
<h3>Які супермаркети  відвідуєте? *</h3>
          <input type = "checkbox" name = "market" />"Рукавичка"<br>
          <input type = "checkbox" name = "market" />"АТБ"<br>
  <input type = "checkbox" name = "market" />"Близенько"<br> 
  <input type = "checkbox" name = "market" />"Сільпо"<br>  
              Списки    
<h3>Ваше заняття</h3>
        <select  name="zanyattya">
            <option>учень (учениця)</option>
            <option>студент (студентка)</option>
            <option>працюючий (працююча)</option>
            <option>безробітний (безробітна)</option>
            <option>пенсіонер (пенсіонерка)</option>
        </select>
              Текстове поле для електронної пошти
<h3>Eлектронна пошта*</h3>
        <input type="email"  name="email"  placeholder="nadiya@ukr.net"  />
              Текстове поле для телефона        
<h3> Телефон</h3>
        <input type="tel"  name="telephone"  />
              Текстове поле великої площі
        <h3>Ваші пропозиції щодо поліпшення обслуговування*</h3>
        <textarea  name="propozycii" 
          placeholder="У повідомленні має бути більше, ніж 20 символів"  >   
        </textarea> 
        
              Кнопка надсилання на сервер
        <input type="submit" value="Надіслати" id="my_button" />
              Кнопка очистки форми
        <input type="reset"  value="Очистити"  id="my_button" />
               Примітка       
<p>* Поля, обов'язкові для заповнення </p>
    </form>

Відеорозбір практичної роботи:

Практична робота 

Завдання практичної роботи.  
Створіть форму згідно зразка
Результат збережіть у файлі form2.html. 
Використайте як заготовку  файл form1.html, змініть стилі.
Додайте до форми елементи "повзунок", "дата".(Дивіться довідник)
Поекспериментуйте з іншими елементами, які ще можна додати до форми.