четвер, 30 квітня 2020 р.

Валідація та збереження даних форм. Хостинг сайту (30.04)

Використання форм. Основні елементи форми. Валідація те збереження даних форм.

Форма це елемент HTML-документа, що забезпечує взаємозв'язок з Web-вузлом. Форми використовуються для опитування відвідувачів, замовлення різних послуг та інших дій. 

<form>...</form>- це фундаментальний елемент всіх форм, парний тег. Форма може мати декілька атрибутів. Основні з них:
  • action, значенням якого є URL для передачі на вузол інформації з форми;
  • metod, що приймає значення get або post (визначення способу  передачі даних форми до  вузла).
<form method="post"  action="mailto:nadiya@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змініть стилі.
  • Додайте до форми елементи "повзунок", "дата".(Дивіться довідник). 
  • Поекспериментуйте з іншими елементами, які ще можна додати до форми. 

Створення динамічних елементів на веб-сторінках (29.04)

Опрацювати теоретичний матеріал

Об'єктна модель документа. Кнопки, події, функції (23.04)

Опрацювати теоретичний матеріал

Поняття про мови веб-скриптів та спосіб використання скриптів у гіпертекстових документах (22.04)

Опрацювати теоретичний матеріал
Таблиця тегів

Графіка та мультимедіа для веб середовища (16.04)

Опрацювати теоретичний матеріал
Графіка для веб-середовища. Анімаційні ефекти. 

Мультимедіа на веб-сторінках. Розміщення мультимедійних файлів і настроювання параметрів їх програвання

Адаптивна верстка. Кросбраузерна оптимізація сторінок сайту. (15.04)

Опрацювати теоретичний матеріал
Виконати тестування

вівторок, 7 квітня 2020 р.

Блокування модель CSS. Проектування та верстка веб-сторінок (09.04)
Опорний конспект
Презентація
Практична робота (Результат надіслати на email: vor16022009@gmail.com)
Таблиці та списки на веб-сторінках. Каскадні таблиці стилів. Стильове оформлення сторінок (09.04)
Опоний конспект
Презентація
Конспект уроку

Мова гіпертекстової розмітки. Гіпертекстовий документ та його елементи. Текстові елементи. Гіперпосилання(08.04)
Презентація
Теоретична частина
Конспект уроку