Веб-програмування. Що таке мова гіпертекстової розмітки?

1.

Чашук О.Ф., вчитель інформатики ЗОШ№23,
Луцьк

2.

Веб-програмування
Чашук О.Ф., вчитель інформатики ЗОШ№23,
Луцьк

Веб-програмування
Ти дізнаєшся:
Що таке мова
гіпертекстової
розмітки
Які бувають
об'єктні моделі
взаємодії між
HTML-кодом
веб-сторінки та
браузером
Ознайомитись
з поняттям
валідації вебсторінок
формами
Чашук О.Ф., вчитель інформатики ЗОШ№23,
Луцьк

4.

Валідація та
збереження даних
форм
Чашук О.Ф., вчитель інформатики ЗОШ№23,
Луцьк

5.

Веб-програмування
Валідація
Валідація (англ. Validation) — процес
підтвердження відповідності або надання законної
сили
Види валідацій
в загальному праві —
процес затвердження,
легалізації, ратифікаці
в програмуванні — процес, що
дозволяє визначити, наскільки
точно з позицій потенційного
користувача деяка модель
представляє задані сутності
реального світу
у виробничій діяльності
— процедура, що дає
високий ступінь
впевненості в тому, що
конкретний процес, метод
або система буде
послідовно приводити до
результатів
Чашук О.Ф., вчитель інформатики ЗОШ№23,
Чашук О.Ф., вчитель інформатики
ЗОШ№23,
Луцьк
Луцьк
Основи мови HTML

6.

Веб-програмування
Проста валідація форм
Під час збору інформації, через форму, застосовуються перевірки. Недотримання
цих вимог може призвести до втрати даних, небажаних даних в вашій базі даних
або навіть слабких місць в системі безпеки вашого сайту
Форми в HTML мають вбудовану підтримку для перевірки
за допомогою використання спеціальних атрибутів і нових
типів введення, і надають вам широкий контроль над CSSстилями.
Валідація та
тестування сайтів:
онлайнінструменти
Наприклад:
Валідація (англ. Validation) — процес підтвердження відповідності
або надання законної сили
Чашук О.Ф., вчитель інформатики ЗОШ№23,
Чашук О.Ф., вчитель інформатики
ЗОШ№23,
Луцьк
Луцьк
Основи мови HTML

7.

Веб-програмування
Спеціалізовані типи вводу
Вони можуть бути використані для створення полів вводу, які будуть приймати
тільки певний тип даних
color
date
datetime
datetimelocal
email
month
number
range
search
tel
time
url
week
Наприклад:
<input type="email">
Валідація (англ. Validation) — процес підтвердження відповідності
або надання законної сили
Чашук О.Ф., вчитель інформатики ЗОШ№23,
Чашук О.Ф., вчитель інформатики
ЗОШ№23,
Луцьк
Луцьк
Основи мови HTML

8.

Веб-програмування
Обов'язкові поля
Просто додавши "необхідний атрибут до <input>, <select>, </select><textarea>, ви
повідомляєте браузеру, які значення повинні бути в цій області. Це як зірочка (*),
яку ми бачимо в більшості реєстраційних форм
Наприклад:
<input type="checkbox" name="terms" required >
Валідація (англ. Validation) — процес підтвердження відповідності
або надання законної сили
Чашук О.Ф., вчитель інформатики ЗОШ№23,
Чашук О.Ф., вчитель інформатики
ЗОШ№23,
Луцьк
Луцьк
Основи мови HTML

9.

Веб-програмування
Обмеження
Можна встановити деякі основні обмеження, такі як максимальна довжина,
мінімальні і максимальні значення для числових полів.
Щоб обмежити довжину поля введення і textareas, використовуйте
атрибут maxlength.
Наприклад:
<input type="text" name="name" required maxlength="15">
<input type="number" name="age" min="18" required>
Валідація (англ. Validation) — процес підтвердження відповідності
або надання законної сили
Чашук О.Ф., вчитель інформатики ЗОШ№23,
Чашук О.Ф., вчитель інформатики
ЗОШ№23,
Луцьк
Луцьк
Основи мови HTML

10.

Веб-програмування
Підказки
При спробі відправити форму з невірно заповненими полями, з'являється
спливаюче вікно.
Встановивши атрибут title наших полів, ми можемо додавати підказки про те, які
дані очікуються
Наприклад:
<input type="text" name="name" title="Please enter your user
name.">
Валідація (англ. Validation) — процес підтвердження відповідності
або надання законної сили
Чашук О.Ф., вчитель інформатики ЗОШ№23,
Чашук О.Ф., вчитель інформатики
ЗОШ№23,
Луцьк
Луцьк
Основи мови HTML

11.

Веб-програмування
Шаблони
Атрибут pattern дозволяє розробникам задавати регулярний вираз, який браузер
буде регулювати введення даних користувачем, перш ніж дозволити відправку
даних
Наприклад:
<input type="email" name="email" required
pattern="^\S+@\S+\.\S+$" title="example@mail.com">
Валідація (англ. Validation) — процес підтвердження відповідності
або надання законної сили
Чашук О.Ф., вчитель інформатики ЗОШ№23,
Чашук О.Ф., вчитель інформатики
ЗОШ№23,
Луцьк
Луцьк
Основи мови HTML

12.

Домашнє завдання
Вивчити тему
Продовжіть розробку веб-сторінки
«Моя маленька батьківщина» з використанням
перевірки (валідації) форм
Заповнити словничок
Валідація
Чашук О.Ф., вчитель інформатики ЗОШ№23,
Луцьк

13. Робота з комп'ютером

Завдання 1. Проста валідація
Створи веб-сторінку за зразком.
Спробуй
натиснути
кнопку
"Відправити" не заповнивши поля,
або не поставивши позначки. Досліди
що відбувається. За допомогою якого
атрибута тегу input це відбувається?
Чашук О.Ф., вчитель інформатики
ЗОШ№23, Луцьк

14. Робота з комп'ютером

Завдання 2. Обмеження кількості символів та мінімального числа
Створи веб-сторінку за зразком. Спробуй
ввести логін довший 6 символів, або вік
менше
18
років.
Досліди
що
відбувається. За допомогою яких
атрибутів тегу input це відбувається?
Чашук О.Ф., вчитель інформатики
ЗОШ№23, Луцьк

15. Робота з комп'ютером

Завдання 3. Виділення елементів форм з правильно та
неправильно введеними даними
Створи веб-сторінку за зразком. Досліди
що відбувається, коли форми не заповнені,
заповнені правильно, або неправильно. За
допомогою яких елементів веб-сторінки це
відбувається.
Код сторінки можна скопіювати.
<html>
<head>
<title>Використання псевдокласів CSS</title>
<style>
input:focus:invalid, textarea:focus:invalid{ border:1px solid #F5192F;
box-shadow:0 0 4px #F5192F;}
input:focus:valid, textarea:focus:valid{border: 1px solid #64C364;
box-shadow: 0 0 4px #64C364;}
</style>
</head>
<body>
<form>
<p>Введіть ваше ім'я (не більше 10 символів)</p>
<input type="text" name="login" required maxlength="10">
<p>Залиште свій коментар (не більше 100 знаків)</p>
<textarea name="textarea" required maxlength="100"></textarea>
<br> Введіть свій вік<br>
<input type="number" name="age" min="18" required>
<br>
<br>
<input type="submit" value="Відправити">
</form>
</body>
Чашук О.Ф., вчитель інформатики
</html> ЗОШ№23, Луцьк

16.

Працюємо за комп’ютером
Чашук О.Ф., вчитель інформатики ЗОШ№23,
Луцьк

English Русский Rules