Тема. Валідація те збереження даних форм.
І. Організаційний етапІІ. Актуалізація опорних знань
ІІІ. Мотивація навчальної діяльності
ІV. Вивчення нового матеріалу
V. Засвоєння нових знань
VІ. Фізкультхвилинка
VІІ. Формування вмінь та навичок
Повторення правил роботи за комп’ютером
Робота за комп’ютером
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<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>
VІІІ. Підбиття підсумків уроку
ІХ. Домашнє завдання Опрацювати конспект.
VІІ. Формування вмінь та навичок
Повторення правил роботи за комп’ютером
Робота за комп’ютером
Завдання 1. Проста валідація.
Створи веб-сторінку за зразком. Спробуй натиснути кнопку "Відправити" не заповнивши поля, або не поставивши позначки. Досліди що відбувається. За допомогою якого атрибута тегу input це відбувається?
Завдання 2.
Обмеження кількості символів та мінімального числа.
Створи веб-сторінку за зразком. Спробуй ввести логін довший 6 символів, або вік менше 18 років. Досліди що відбувається. За допомогою яких атрибутів тегу input це відбувається?
Завдання 3.
Виділення елементів форм з правильно та неправильно введеними даними
Створи веб-сторінку за зразком. Досліди що відбувається, коли форми не заповнені, заповнені правильно, або неправильно. За допомогою яких елементів веб-сторінки це відбувається. Код сторінки можна скопіювати.
<html>
<head>
<meta charset="UTF-8">
<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>
VІІІ. Підбиття підсумків уроку
ІХ. Домашнє завдання Опрацювати конспект.
