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

Про матеріал

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

Зміст архіву

Перегляд файлу

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

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

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

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

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

Перегляд файлу

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

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

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

Перегляд файлу

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

Попередній слайд 1 / 4 Наступний слайд

Зміст слайдів

Номер слайду 1

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

Номер слайду 2

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

Номер слайду 3

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

Номер слайду 4

Робота з комп'ютером. Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Завдання 3. Виділення елементів форм з правильно та неправильно введеними даними. Створи веб-сторінку за зразком. Досліди що відбувається, коли форми не заповнені, заповнені правильно, або неправильно. За допомогою яких елементів веб-сторінки це відбувається. Код сторінки можна скопіювати.Використання псевдокласів CSS

Перегляд файлу

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

, ви повідомляєте браузеру, які значення повинні бути в цій області. Це як зірочка (*), яку ми бачимо в більшості реєстраційних форм. Валідація (англ. Validation) — процес підтвердження відповідності або надання законної сили. Наприклад:<input type="checkbox" name="terms" required >" title="Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Веб-програмування. Основи мови HTMLОбов'язкові поля. Просто додавши "необхідний атрибут до <input>, <select>, </select><textarea>, ви повідомляєте браузеру, які значення повинні бути в цій області. Це як зірочка (*), яку ми бачимо в більшості реєстраційних форм. Валідація (англ. Validation) — процес підтвердження відповідності або надання законної сили. Наприклад:<input type="checkbox" name="terms" required >">
                                </div>
                                                            <div data-index="9" class="slide slide9 hide" slidenumber="9">
                                    <img class="slide_image" src="/uploads/files/289925/109870/117192_images/9.jpg" alt="Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Веб-програмування. Основи мови HTMLОбмеження. Можна встановити деякі основні обмеження, такі як максимальна довжина, мінімальні і максимальні значення для числових полів. Щоб обмежити довжину поля введення і textareas, використовуйте атрибут maxlength. Валідація (англ. Validation) — процес підтвердження відповідності або надання законної сили. Наприклад: <input type="text" name="name" required maxlength="15"> <input type="number" name="age" min="18" required>" title="Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Веб-програмування. Основи мови HTMLОбмеження. Можна встановити деякі основні обмеження, такі як максимальна довжина, мінімальні і максимальні значення для числових полів. Щоб обмежити довжину поля введення і textareas, використовуйте атрибут maxlength. Валідація (англ. Validation) — процес підтвердження відповідності або надання законної сили. Наприклад: <input type="text" name="name" required maxlength="15"> <input type="number" name="age" min="18" required>">
                                </div>
                                                            <div data-index="10" class="slide slide10 hide" slidenumber="10">
                                    <img class="slide_image" src="/uploads/files/289925/109870/117192_images/10.jpg" alt="Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Веб-програмування. Основи мови HTMLПідказки. При спробі відправити форму з невірно заповненими полями, з'являється спливаюче вікно. Встановивши атрибут  title наших полів, ми можемо додавати підказки про те, які дані очікуються Валідація (англ. Validation) — процес підтвердження відповідності або надання законної сили. Наприклад: <input type="text" name="name" title="Please enter your user name.">" title="Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Веб-програмування. Основи мови HTMLПідказки. При спробі відправити форму з невірно заповненими полями, з'являється спливаюче вікно. Встановивши атрибут  title наших полів, ми можемо додавати підказки про те, які дані очікуються Валідація (англ. Validation) — процес підтвердження відповідності або надання законної сили. Наприклад: <input type="text" name="name" title="Please enter your user name.">">
                                </div>
                                                            <div data-index="11" class="slide slide11 hide" slidenumber="11">
                                    <img class="slide_image" src="/uploads/files/289925/109870/117192_images/11.jpg" alt="Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Веб-програмування. Основи мови HTMLШаблони. Атрибут pattern дозволяє розробникам задавати регулярний вираз, який браузер буде регулювати введення даних користувачем, перш ніж дозволити відправку даних. Валідація (англ. Validation) — процес підтвердження відповідності або надання законної сили. Наприклад: <input type="email" name="email" required pattern="^\S+@\S+\.\S+$" title="example@mail.com">" title="Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Веб-програмування. Основи мови HTMLШаблони. Атрибут pattern дозволяє розробникам задавати регулярний вираз, який браузер буде регулювати введення даних користувачем, перш ніж дозволити відправку даних. Валідація (англ. Validation) — процес підтвердження відповідності або надання законної сили. Наприклад: <input type="email" name="email" required pattern="^\S+@\S+\.\S+$" title="example@mail.com">">
                                </div>
                                                            <div data-index="12" class="slide slide12 hide" slidenumber="12">
                                    <img class="slide_image" src="/uploads/files/289925/109870/117192_images/12.jpg" alt="Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Домашнє завдання. Вивчити тему. Продовжіть розробку веб-сторінки «Моя маленька батьківщина» з використанням перевірки (валідації) форм Заповнити словничок Валідація " title="Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Домашнє завдання. Вивчити тему. Продовжіть розробку веб-сторінки «Моя маленька батьківщина» з використанням перевірки (валідації) форм Заповнити словничок Валідація ">
                                </div>
                                                            <div data-index="13" class="slide slide13 hide" slidenumber="13">
                                    <img class="slide_image" src="/uploads/files/289925/109870/117192_images/13.jpg" alt="Робота з комп'ютером. Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Завдання 1. Проста валідація. Створи веб-сторінку за зразком. Спробуй натиснути кнопку "Відправити" не заповнивши поля, або не поставивши позначки. Досліди що відбувається. За допомогою якого атрибута тегу input це відбувається?" title="Робота з комп'ютером. Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Завдання 1. Проста валідація. Створи веб-сторінку за зразком. Спробуй натиснути кнопку "Відправити" не заповнивши поля, або не поставивши позначки. Досліди що відбувається. За допомогою якого атрибута тегу input це відбувається?">
                                </div>
                                                            <div data-index="14" class="slide slide14 hide" slidenumber="14">
                                    <img class="slide_image" src="/uploads/files/289925/109870/117192_images/14.jpg" alt="Робота з комп'ютером. Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Завдання 2. Обмеження кількості символів та мінімального числа. Створи веб-сторінку за зразком. Спробуй ввести логін довший 6 символів, або вік менше 18 років. Досліди що відбувається. За допомогою яких атрибутів тегу input це відбувається?" title="Робота з комп'ютером. Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Завдання 2. Обмеження кількості символів та мінімального числа. Створи веб-сторінку за зразком. Спробуй ввести логін довший 6 символів, або вік менше 18 років. Досліди що відбувається. За допомогою яких атрибутів тегу input це відбувається?">
                                </div>
                                                            <div data-index="15" class="slide slide15 hide" slidenumber="15">
                                    <img class="slide_image" src="/uploads/files/289925/109870/117192_images/15.jpg" alt="Робота з комп'ютером. Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Завдання 3. Виділення елементів форм з правильно та неправильно введеними даними. Створи веб-сторінку за зразком. Досліди що відбувається, коли форми не заповнені, заповнені правильно, або неправильно. За допомогою яких елементів веб-сторінки це відбувається. Код сторінки можна скопіювати.<html><head><title>Використання псевдокласів CSS</title><style>input:focus:invalid, textarea:focus:invalid{ border:1px solid #F5192 F;box-shadow:0 0 4px #F5192 F;}input:focus:valid, textarea:focus:valid{border: 1px solid #64 C364;box-shadow: 0 0 4px #64 C364;}</style></head><body><form><p>Введіть ваше ім'я (не більше 10 символів)</p> <input type="text" name="login" required maxlength="10"><p>Залиште свій коментар (не більше 100 знаків)</p> <textarea name="textarea" required maxlength="100">

Введіть свій вік

" title="Робота з комп'ютером. Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Завдання 3. Виділення елементів форм з правильно та неправильно введеними даними. Створи веб-сторінку за зразком. Досліди що відбувається, коли форми не заповнені, заповнені правильно, або неправильно. За допомогою яких елементів веб-сторінки це відбувається. Код сторінки можна скопіювати.Використання псевдокласів CSS">

Попередній слайд 1 / 16 Наступний слайд

Зміст слайдів

Номер слайду 1

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

Номер слайду 2

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

Номер слайду 3

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

Номер слайду 4

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

Номер слайду 5

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

Номер слайду 6

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

Номер слайду 7

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

Номер слайду 8

Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Веб-програмування. Основи мови HTMLОбов'язкові поля. Просто додавши "необхідний атрибут до , , ви повідомляєте браузеру, які значення повинні бути в цій області. Це як зірочка (*), яку ми бачимо в більшості реєстраційних форм. Валідація (англ. Validation) — процес підтвердження відповідності або надання законної сили. Наприклад:<input type="checkbox" name="terms" required ></p> </div> </div> </div> <div class="slide-transcript"> <div class="row"> <div class="col-md-5"> <a href="/uploads/files/289925/109870/117192_images/9.jpg" data-lightbox="slides" data-title="Слайд №9"><img src="/uploads/files/289925/109870/117192_images/thumb_9.jpg" width="100%" /></a> </div> <div class="col-md-7"> <div class="num">Номер слайду 9</div> <p>Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Веб-програмування. Основи мови HTMLОбмеження. Можна встановити деякі основні обмеження, такі як максимальна довжина, мінімальні і максимальні значення для числових полів. Щоб обмежити довжину поля введення і textareas, використовуйте атрибут maxlength. Валідація (англ. Validation) — процес підтвердження відповідності або надання законної сили. Наприклад: <input type="text" name="name" required maxlength="15"> <input type="number" name="age" min="18" required></p> </div> </div> </div> <div class="slide-transcript"> <div class="row"> <div class="col-md-5"> <a href="/uploads/files/289925/109870/117192_images/10.jpg" data-lightbox="slides" data-title="Слайд №10"><img src="/uploads/files/289925/109870/117192_images/thumb_10.jpg" width="100%" /></a> </div> <div class="col-md-7"> <div class="num">Номер слайду 10</div> <p>Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Веб-програмування. Основи мови HTMLПідказки. При спробі відправити форму з невірно заповненими полями, з'являється спливаюче вікно. Встановивши атрибут title наших полів, ми можемо додавати підказки про те, які дані очікуються Валідація (англ. Validation) — процес підтвердження відповідності або надання законної сили. Наприклад: <input type="text" name="name" title="Please enter your user name."></p> </div> </div> </div> <div class="slide-transcript"> <div class="row"> <div class="col-md-5"> <a href="/uploads/files/289925/109870/117192_images/11.jpg" data-lightbox="slides" data-title="Слайд №11"><img src="/uploads/files/289925/109870/117192_images/thumb_11.jpg" width="100%" /></a> </div> <div class="col-md-7"> <div class="num">Номер слайду 11</div> <p>Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Веб-програмування. Основи мови HTMLШаблони. Атрибут pattern дозволяє розробникам задавати регулярний вираз, який браузер буде регулювати введення даних користувачем, перш ніж дозволити відправку даних. Валідація (англ. Validation) — процес підтвердження відповідності або надання законної сили. Наприклад: <input type="email" name="email" required pattern="^\S+@\S+\.\S+$" title="example@mail.com"></p> </div> </div> </div> <div class="slide-transcript"> <div class="row"> <div class="col-md-5"> <a href="/uploads/files/289925/109870/117192_images/12.jpg" data-lightbox="slides" data-title="Слайд №12"><img src="/uploads/files/289925/109870/117192_images/thumb_12.jpg" width="100%" /></a> </div> <div class="col-md-7"> <div class="num">Номер слайду 12</div> <p>Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Домашнє завдання. Вивчити тему. Продовжіть розробку веб-сторінки «Моя маленька батьківщина» з використанням перевірки (валідації) форм Заповнити словничок Валідація </p> </div> </div> </div> <div class="slide-transcript"> <div class="row"> <div class="col-md-5"> <a href="/uploads/files/289925/109870/117192_images/13.jpg" data-lightbox="slides" data-title="Слайд №13"><img src="/uploads/files/289925/109870/117192_images/thumb_13.jpg" width="100%" /></a> </div> <div class="col-md-7"> <div class="num">Номер слайду 13</div> <p>Робота з комп'ютером. Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Завдання 1. Проста валідація. Створи веб-сторінку за зразком. Спробуй натиснути кнопку "Відправити" не заповнивши поля, або не поставивши позначки. Досліди що відбувається. За допомогою якого атрибута тегу input це відбувається?</p> </div> </div> </div> <div class="slide-transcript"> <div class="row"> <div class="col-md-5"> <a href="/uploads/files/289925/109870/117192_images/14.jpg" data-lightbox="slides" data-title="Слайд №14"><img src="/uploads/files/289925/109870/117192_images/thumb_14.jpg" width="100%" /></a> </div> <div class="col-md-7"> <div class="num">Номер слайду 14</div> <p>Робота з комп'ютером. Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Завдання 2. Обмеження кількості символів та мінімального числа. Створи веб-сторінку за зразком. Спробуй ввести логін довший 6 символів, або вік менше 18 років. Досліди що відбувається. За допомогою яких атрибутів тегу input це відбувається?</p> </div> </div> </div> <div class="slide-transcript"> <div class="row"> <div class="col-md-5"> <a href="/uploads/files/289925/109870/117192_images/15.jpg" data-lightbox="slides" data-title="Слайд №15"><img src="/uploads/files/289925/109870/117192_images/thumb_15.jpg" width="100%" /></a> </div> <div class="col-md-7"> <div class="num">Номер слайду 15</div> <p>Робота з комп'ютером. Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Завдання 3. Виділення елементів форм з правильно та неправильно введеними даними. Створи веб-сторінку за зразком. Досліди що відбувається, коли форми не заповнені, заповнені правильно, або неправильно. За допомогою яких елементів веб-сторінки це відбувається. Код сторінки можна скопіювати.<html><head><title>Використання псевдокласів CSS</title><style>input:focus:invalid, textarea:focus:invalid{ border:1px solid #F5192 F;box-shadow:0 0 4px #F5192 F;}input:focus:valid, textarea:focus:valid{border: 1px solid #64 C364;box-shadow: 0 0 4px #64 C364;}</style></head><body><form><p>Введіть ваше ім'я (не більше 10 символів)</p> <input type="text" name="login" required maxlength="10"><p>Залиште свій коментар (не більше 100 знаків)</p> <textarea name="textarea" required maxlength="100">
Введіть свій вік

Номер слайду 16

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

Середня оцінка розробки

Структурованість

5.0

Оригінальність викладу

5.0

Відповідність темі

5.0

Загальна:

5.0

Всього відгуків: 3

Оцінки та відгуки

Степенко Людмила Василівна 19.02.2023 в 13:21

Загальна:

5.0

Структурованість

5.0

Оригінальність викладу

5.0

Відповідність темі

5.0
Бенькович Євгеній Романович 21.11.2022 в 22:41

Дякую, дуже гарна розробка

Загальна:

5.0

Структурованість

5.0

Оригінальність викладу

5.0

Відповідність темі

5.0
Вишинська Галина Миронівна 08.05.2020 в 14:08

Загальна:

5.0

Структурованість

5.0

Оригінальність викладу

5.0

Відповідність темі

5.0