Чашук О.Ф., вчитель інформатики ЗОШ№23, Луцьк
Чашук О.Ф., вчитель інформатики ЗОШ№23, Луцьк
Веб-програмування
Чашук О.Ф., вчитель інформатики ЗОШ№23, Луцьк
Що таке мова гіпертекстової розмітки
Які бувають об'єктні моделі взаємодії між HTML-кодом веб-сторінки та браузером
Ознайомитисьз поняттям валідації веб-сторінок формами
Ти дізнаєшся:
Веб-програмування
Чашук О.Ф., вчитель інформатики ЗОШ№23, Луцьк
Валідація та збереження даних форм
Чашук О.Ф., вчитель інформатики ЗОШ№23, Луцьк
Чашук О.Ф., вчитель інформатики ЗОШ№23, Луцьк
Веб-програмування
Основи мови HTML
Валідація
Валідація (англ. Validation) — процес підтвердження відповідності або надання законної сили
Види валідацій
в загальному праві — процес затвердження, легалізації, ратифікаці
в програмуванні — процес, що дозволяє визначити, наскільки точно з позицій потенційного користувача деяка модель представляє задані сутності реального світу
у виробничій діяльності — процедура, що дає високий ступінь впевненості в тому, що конкретний процес, метод або система буде послідовно приводити до результатів
Чашук О.Ф., вчитель інформатики ЗОШ№23, Луцьк
Чашук О.Ф., вчитель інформатики ЗОШ№23, Луцьк
Веб-програмування
Основи мови HTML
Проста валідація форм
Під час збору інформації, через форму, застосовуються перевірки. Недотримання цих вимог може призвести до втрати даних, небажаних даних в вашій базі даних або навіть слабких місць в системі безпеки вашого сайту
Валідація (англ. Validation) — процес підтвердження відповідності або надання законної сили
Валідація та тестування сайтів: онлайн-інструменти
Наприклад:
Форми в HTML мають вбудовану підтримку для перевірки за допомогою використання спеціальних атрибутів і нових типів введення, і надають вам широкий контроль над CSS-стилями.
Чашук О.Ф., вчитель інформатики ЗОШ№23, Луцьк
Чашук О.Ф., вчитель інформатики ЗОШ№23, Луцьк
Веб-програмування
Основи мови HTML
Спеціалізовані типи вводу
Вони можуть бути використані для створення полів вводу, які будуть приймати тільки певний тип даних
Валідація (англ. Validation) — процес підтвердження відповідності або надання законної сили
color
date
datetime
datetime-local
month
number
range
search
tel
time
url
week
<input type="email">
Наприклад:
Чашук О.Ф., вчитель інформатики ЗОШ№23, Луцьк
Чашук О.Ф., вчитель інформатики ЗОШ№23, Луцьк
Веб-програмування
Основи мови HTML
Обов'язкові поля
Просто додавши "необхідний атрибут до <input>, <select>, </select><textarea>, ви повідомляєте браузеру, які значення повинні бути в цій області. Це як зірочка (*), яку ми бачимо в більшості реєстраційних форм
Валідація (англ. Validation) — процес підтвердження відповідності або надання законної сили
Наприклад:
<input type="checkbox" name="terms" required >
Чашук О.Ф., вчитель інформатики ЗОШ№23, Луцьк
Чашук О.Ф., вчитель інформатики ЗОШ№23, Луцьк
Веб-програмування
Основи мови HTML
Обмеження
Можна встановити деякі основні обмеження, такі як максимальна довжина, мінімальні і максимальні значення для числових полів.
Щоб обмежити довжину поля введення і textareas, використовуйте атрибут maxlength.
Валідація (англ. Validation) — процес підтвердження відповідності або надання законної сили
Наприклад:
<input type="text" name="name" required maxlength="15">
<input type="number" name="age" min="18" required>
Чашук О.Ф., вчитель інформатики ЗОШ№23, Луцьк
Чашук О.Ф., вчитель інформатики ЗОШ№23, Луцьк
Веб-програмування
Основи мови HTML
Підказки
При спробі відправити форму з невірно заповненими полями, з'являється спливаюче вікно.
Встановивши атрибут title наших полів, ми можемо додавати підказки про те, які дані очікуються
Валідація (англ. Validation) — процес підтвердження відповідності або надання законної сили
Наприклад:
<input type="text" name="name" title="Please enter your user name.">
Чашук О.Ф., вчитель інформатики ЗОШ№23, Луцьк
Чашук О.Ф., вчитель інформатики ЗОШ№23, Луцьк
Веб-програмування
Основи мови HTML
Шаблони
Атрибут pattern дозволяє розробникам задавати регулярний вираз, який браузер буде регулювати введення даних користувачем, перш ніж дозволити відправку даних
Валідація (англ. Validation) — процес підтвердження відповідності або надання законної сили
Наприклад:
<input type="email" name="email" required pattern="^\S+@\S+\.\S+$" title="example@mail.com">
Чашук О.Ф., вчитель інформатики ЗОШ№23, Луцьк
Домашнє завдання
Валідація
Робота з комп'ютером
Чашук О.Ф., вчитель інформатики ЗОШ№23, Луцьк
Завдання 1. Проста валідація
Створи веб-сторінку за зразком. Спробуй натиснути кнопку "Відправити" не заповнивши поля, або не поставивши позначки. Досліди що відбувається. За допомогою якого атрибута тегу input це відбувається?
Робота з комп'ютером
Чашук О.Ф., вчитель інформатики ЗОШ№23, Луцьк
Завдання 2. Обмеження кількості символів та мінімального числа
Створи веб-сторінку за зразком. Спробуй ввести логін довший 6 символів, або вік менше 18 років. Досліди що відбувається. За допомогою яких атрибутів тегу input це відбувається?
Робота з комп'ютером
Чашук О.Ф., вчитель інформатики ЗОШ№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>
<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, Луцьк
Працюємо за комп’ютером