Тема: Валідація та збереження даних форм.
1. Опрацювати презентацію до уроку.
2.Виконай завдання за зразком
Завдання 1.
Проста валідація.
Створи веб-сторінку за зразком. Спробуй натиснути кнопку "Відправити" не заповнивши поля, або не поставивши позначки. Досліди що відбувається. За допомогою якого атрибута тегу input це відбувається?
Завдання 2.
Обмеження кількості символів та мінімального числа.
Створи веб-сторінку за зразком. Спробуй ввести логін довший 6 символів, або вік менше 18 років. Досліди що відбувається. За допомогою яких атрибутів тегу input це відбувається?
Обмеження кількості символів та мінімального числа.
Створи веб-сторінку за зразком. Спробуй ввести логін довший 6 символів, або вік менше 18 років. Досліди що відбувається. За допомогою яких атрибутів тегу input це відбувається?
Завдання 3.
Виділення елементів форм з правильно та неправильно введеними даними.
Створи веб-сторінку за зразком. Досліди що відбувається, коли форми не заповнені, заповнені правильно, або неправильно. За допомогою яких елементів веб-сторінки це відбувається. Код сторінки можна скопіювати.
<!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>
<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>
3. Опрацювати в підручнику §11.20. (ст. 213-215).
Результат надішліть на електронну адресу ось мої контакти LunLo1919@gmail.com (можна відправляти скрін-фото завдання, файл з завданням).😉
(електронне листування за правилами: тема, завдання, клас, від кого)
Результат надішліть на електронну адресу ось мої контакти LunLo1919@gmail.com (можна відправляти скрін-фото завдання, файл з завданням).😉
(електронне листування за правилами: тема, завдання, клас, від кого)
Немає коментарів:
Дописати коментар