Проєктування та розробка веб-застосунків

Мета роботи

1. Навчитися створювати форми у HTML.

2. Освоїти основи стилізації форм за допомогою CSS.

3. Реалізувати базову перевірку даних на стороні клієнта (JavaScript).

Завдання

Частина 1. HTML — створення форми

1. Створіть файл form.html.

2. Додайте форму з такими полями:

   • Варіант 1 (реєстрація):

     • Ім’я

     • Email

     • Пароль

     • Повтор пароля

   • Варіант 2 (зворотний зв’язок):

     • Ім’я

     • Email

     • Повідомлення (textarea)

3. Додайте кнопку “Надіслати” (<button type="submit">).

Частина 2. CSS — стилізація

1. Створіть файл style.css та підключіть його до сторінки.

2. Застосуйте базове оформлення:

   • кольори та шрифти (фон, заголовок, кнопки),

   • відступи та вирівнювання елементів,

   • ефект наведення (hover) на кнопку.

3. Використайте селектори класів і псевдокласи (:hover, :focus).

Частина 3. JavaScript — перевірка введених даних

1. Створіть файл script.js та підключіть його до сторінки.

2. Додайте перевірку введення:

   • Поля “Ім’я” та “Повідомлення” не можуть бути порожні.

   • Email повинен відповідати формату (перевірка через регулярний вираз).

   • Пароль має бути мінімум 6 символів (якщо є).

   • Повтор пароля має збігатися з основним.

3. Якщо дані некоректні — відобразити повідомлення під полем або alert.

4. Якщо все добре — показати повідомлення “Форма успішно відправлена!”.

Частина 4. Робота з Git

1. Створіть гілку lab2.

2. Додайте файли form.html, style.css, script.js.

3. Зробіть коміт із повідомленням feat: add form with validation.

4. Об’єднайте гілку з main.

Що здати

1. Посилання на репозиторій GitHub/GitLab.

2. Файли:

   • form.html

   • style.css

   • script.js

   • .gitignore (якщо потрібно)

   • README.md з описом роботи.

3. Скриншоти прикладів роботи:

   • успішне відправлення,

   • помилки валідації.

Критерії оцінювання

• HTML-форма з усіма полями — 20 балів.

• Оформлення CSS (мінімум 3 стилі: фон, кнопки, відступи) — 20 балів.

• Перевірка даних у JS (мінімум 3 правила) — 30 балів.

• Правильна робота форми (успіх + помилки) — 20 балів.

• Git-репозиторій і README.md — 10 балів.