1 of 21

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

Валідація та збереження даних форм

2 of 21

Актуалізація опорних знань і життєвого досвіду

Розділ 4 § 26

Пропоную визначити свої асоціації до слова «валідація»

10�(11)

3 of 21

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

Веб-програмування

Основи мови HTML

Валідація

Валідація (англ. Validation) — процес підтвердження відповідності або надання законної сили

Види валідацій

в загальному праві — процес затвердження, легалізації, ратифікаці

в програмуванні — процес, що дозволяє визначити, наскільки точно з позицій потенційного користувача деяка модель представляє задані сутності реального світу

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

4 of 21

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

Веб-програмування

Основи мови HTML

Проста валідація форм

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

Валідація (англ. Validation) — процес підтвердження відповідності або надання законної сили

Валідація та тестування сайтів: онлайн-інструменти

Наприклад:

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

5 of 21

Валідація та збереження�даних форм

Розділ 4 § 26

Способи валідації даних форм:

Спеціалізовані типи вводу

Обов'язкові Поля

Обмеження

Стайлінг

Підказки

Шаблони

10�(11)

6 of 21

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

Веб-програмування

Основи мови HTML

Спеціалізовані типи вводу

Вони можуть бути використані для створення полів вводу, які будуть приймати тільки певний тип даних

Валідація (англ. Validation) — процес підтвердження відповідності або надання законної сили

color

date

datetime

datetime-local

email

month

number

range

search

tel

time

url

week

Наприклад:

7 of 21

Валідація та збереження�даних форм

Розділ 4 § 26

Обов'язкові Поля

Найпростішою функцією перевірки HTML для використання є required атрибут. Якщо ви хочете зробити введення обов'язковим, ви можете помітити елемент, використовуючи цей атрибут. Якщо цей атрибут встановлений, форма не буде відправлятися (і буде відображатися повідомлення про помилку.

10�(11)

8 of 21

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

Веб-програмування

Основи мови HTML

Обов'язкові поля

Просто додавши "необхідний атрибут до <input>, <select>, <textarea>, ви повідомляєте браузеру, які значення повинні бути в цій області. Це як зірочка (*), яку ми бачимо в більшості реєстраційних форм

Валідація (англ. Validation) — процес підтвердження відповідності або надання законної сили

Наприклад:

9 of 21

Валідація та збереження�даних форм

Розділ 4 § 26

Обмеження

Ми можемо встановити деякі основні обмеження, такі як максимальна довжина, мінімальні і максимальні значення для числових полів. Щоб обмежити довжину поля введення і textareas, використовуйте атрибут maxlength. Це означатиме, що забороняється введення значення, яке є більшим зазначеного в maxlength. Якщо користувач намагатиметься вставити з буферу рядок більший зазначеного, то форма просто обріже його.

10�(11)

10 of 21

Валідація та збереження�даних форм

Розділ 4 § 26

Обмеження

Поле <input type="number"> використовує мах та min атрибути, щоб створити діапазон можливих значень (в нашому прикладі ми зробили мінімальний допустимий вік 18).

10�(11)

11 of 21

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

Веб-програмування

Основи мови HTML

Обмеження

Можна встановити деякі основні обмеження, такі як максимальна довжина, мінімальні і максимальні значення для числових полів.

Щоб обмежити довжину поля введення і textareas, використовуйте атрибут maxlength.

Валідація (англ. Validation) — процес підтвердження відповідності або надання законної сили

Наприклад:

12 of 21

Валідація та збереження�даних форм

Розділ 4 § 26

Підказки

Ви, напевно, помітили, що при спробі відправити форму з невірно заповненими полями, з'являється спливаюче вікно. Встановивши атрибут title наших полів, ми можемо додавати підказки про те, які дані очікуються.

10�(11)

13 of 21

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

Веб-програмування

Основи мови HTML

Підказки

При спробі відправити форму з невірно заповненими полями, з'являється спливаюче вікно.

Встановивши атрибут title наших полів, ми можемо додавати підказки про те, які дані очікуються

Валідація (англ. Validation) — процес підтвердження відповідності або надання законної сили

Наприклад:

14 of 21

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

Веб-програмування

Основи мови HTML

Шаблони

Атрибут pattern дозволяє розробникам задавати регулярний вираз, який браузер буде регулювати введення даних користувачем, перш ніж дозволити відправку даних

Валідація (англ. Validation) — процес підтвердження відповідності або надання законної сили

Наприклад:

15 of 21

Валідація та збереження�даних форм

Розділ 4 § 26

Стайлінг

CSS3 псевдо-класи дозволяють нам стилювати будь-які поля форми в залежності від її стану.

У нашому демо ми об'єднали в valid та invalid селектори з псевдо-класом focus, щоб змінювати колір поля форми на червоний або зелений, якщо користувач вибирає їх і починає заповнювати.

10�(11)

16 of 21

Актуалізація опорних знань і життєвого досвіду

Розділ 4 § 26

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

Відображати явні повідомлення про помилки.

Будьте правдоподібні щодо формату введення.

Вкажіть, де саме відбувається помилка (особливо на великих формах).

10�(11)

17 of 21

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

Працюємо за комп’ютером

18 of 21

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

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

Завдання 1. Проста валідація

Створи веб-сторінку за зразком. Спробуй натиснути кнопку "Відправити" не заповнивши поля, або не поставивши позначки. Досліди що відбувається. За допомогою якого атрибута тегу input це відбувається?

19 of 21

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

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

Завдання 2. Обмеження кількості символів та мінімального числа

Створи веб-сторінку за зразком. Спробуй ввести логін довший 6 символів, або вік менше 18 років. Досліди що відбувається. За допомогою яких атрибутів тегу input це відбувається?

20 of 21

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

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

Завдання 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>

<p>Залиште свій коментар (не більше 100 знаків)</p>

<br> Введіть свій вік<br>

<br>

</form>

</body>

</html>

21 of 21

Запитання для рефлексії

Розділ 4 § 26

Яких знань і вмінь я набув на уроці?

Над чим мені потрібно ще попрацювати?

Про які успіхи на уроці слід розповісти батькам?

Про що хотілося б дізнатися ще?

10�(11)