Passer au contenu principal

Blocs

Passer Navigation

Navigation

  • Tableau de bord

    • Accueil du site

    • Pages du site

      • Mes cours

      • Tags

      • FichierІнструкція для здобувачів освіти до вибору дисципл...

      • URLВибір дисциплін на 2026-2027 навчальний рік

      • URLВибір дисциплін на 2025-2026 навчальний рік

      • URLВибір дисциплін на 2024-2025 навчальний рік

      • ForumНовини сайту

      • URLІнструкція - основи роботи з системою Moodle

      • URLЦИВІЛЬНИЙ ЗАХИСТ

      • DossierНормативна база СЕЗН

      • URLВідновлення пароля

      • FichierПам’ятка для користувача системи Moodle

      • FichierСистема оцінки курсу

      • FeedbackОцінка якості курсу

    • Mes cours

    • Cours

      • Факультети, кафедри

        • Біологічний факультет

        • Економічний факультет

        • Журналістики факультет

        • Інженерний навчально-науковий інститут ім. Ю.М. По...

        • Іноземної філології факультет

        • Математичний факультет

          • Кафедра загальної математики

          • Кафедра загальної та прикладної фізики

          • Кафедра комп'ютерних наук

          • Кафедра прикладної математики і механіки

          • Кафедра програмної інженерії

            • archive

            • Методи інтелектуального аналізу даних

            • Алгоритми та структури даних (Прикладна математика)

            • Технології Big Data

            • Машинне навчання (Математичні основи машинного нав...

            • Проєктування та аналіз обчислювальних алгоритмів

            • C/к Сучасні СУБД (Плюта Н. В.)

            • 2 Програмне забезпечення наукових досліджень (магі...

            • Автоматизоване тестування (Кудін О.В.)

            • Автоматизоване тестування Web-додатків (Кудін О.В.)

            • Адміністрування комп'ютерних систем (Горбенко В.І.)

            • Алгебра та геометрія Дисципліна вільного вибору ст...

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

              • Робота з Docker

                • DevoirЛабораторна робота 1

                • DevoirЛабораторна робота 2

                • DevoirЛабораторна робота 3.

                • DevoirЛабораторна робота 4. Створення і використання том...

                • DevoirКонтрольна робота 1

              • Клієнтська частина системи

              • Індивідуальне завдання

              • Підсумок

              • Для студентів заочного відділення

          • Кафедра фундаментальної та прикладної математики

          • Практична підготовка математичного факультету

          • Інформація, Статистика Математичного факультету

        • Менеджменту факультет

        • Соціальної педагогіки та психології факультет

        • Соцiологiї та управлiння факультет

        • Факультет історії та міжнародних відносин

        • Факультет фізичного виховання, здоров'я та туризму

        • Філологічний факультет

        • Юридичний факультет

      • Аспірантура

      • Науково-технічна позашкільна освіта

      • Відділ доуніверситетської підготовки, профорієнтац...

      • Адміністративний розділ

      • Центр післядипломної освіти та професійних кваліфі...

      • Школа педагогічної майстерності

  • Connexion

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

Вибір дисциплін Replier Déplier
Вибір дисциплін Replier Déplier
Обрати дисципліни Статистика вибору дисциплін ВМУ
  1. Cours
  2. Факультети, кафедри
  3. Математичний факультет
  4. Кафедра програмної інженерії
  5. Проєктування та розробка веб-застосунків
  6. Робота з Docker
  7. Лабораторна робота 2

Лабораторна робота 2

Conditions d’achèvement

Мета роботи

  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 балів.

Activité précédente
Лабораторна робота 1
Activité suivante
Лабораторна робота 3.
Résumé de conservation de données
Obtenir l’app mobile