31 березня о 15:00Вебінар: Викладання хімії в умовах дистанційного навчання

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

Про матеріал

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

<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>

 

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

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

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

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


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


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

Введіть ваше ім'я (не більше 10 символів)

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


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


">
Зміст слайдів
Номер слайду 1

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

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

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

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

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

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

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

Введіть ваше ім'я (не більше 10 символів)

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


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


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








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


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

Введіть ваше ім'я (не більше 10 символів)

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


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


">
Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Працюємо за комп’ютером
Зміст слайдів
Номер слайду 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Обов'язкові поля. Просто додавши "необхідний атрибут до 
Введіть свій вік


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

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

zip
Додано
6 травня 2019
Переглядів
1365
Оцінка розробки
Відгуки відсутні
Безкоштовний сертифікат
про публікацію авторської розробки
Щоб отримати, додайте розробку

Додати розробку