Embedded Files
Переглянь матеріали на сторінці та виконай завдання за зразком
Переглянь матеріали на сторінці та виконай завдання за зразком
Завдання 1.
Завдання 1.
Проста валідація.
Проста валідація.
Створи веб-сторінку за зразком. Спробуй натиснути кнопку "Відправити" не заповнивши поля, або не поставивши позначки. Досліди що відбувається. За допомогою якого атрибута тегу input це відбувається?
Завдання 2.
Завдання 2.
Обмеження кількості символів та мінімального числа.
Обмеження кількості символів та мінімального числа.
Створи веб-сторінку за зразком. Спробуй ввести логін довший 6 символів, або вік менше 18 років. Досліди що відбувається. За допомогою яких атрибутів тегу input це відбувається?
Завдання 3.
Завдання 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>
Google Sites
Report abuse