Практична робота: «Створення форми зворотного зв’язку для персонального сайту»
Про матеріал
Практична робота: «Створення форми зворотного зв’язку для персонального сайту»
Мета: навчитися створювати інтерактивні елементи вебсторінки за допомогою тегів форми, використовувати різні типи полів введення та структурувати їх для зручності користувача.
Перегляд файлу
Практична робота: «Створення форми зворотного зв’язку для персонального сайту»
Мета: навчитися створювати інтерактивні елементи вебсторінки за допомогою тегів форми, використовувати різні типи полів введення та структурувати їх для зручності користувача.
Алгоритм виконання завдання:
-
Створення файлу:
- Створіть у робочій папці вашого сайту новий HTML-документ з іменем contact.html.
- Додайте базову структуру HTML-документа (теги <html>, <head>, <body>) та заголовок сторінки «Контакти».
-
Додавання форми:
- Використовуйте парний тег <form> для створення області форми.
- Додайте атрибути action="contactForm.php" та method="post" (ці параметри вказують, куди і як будуть надсилатися дані користувача).
-
Структурування елементів (за допомогою таблиці):
- Щоб поля введення та підписи до них (текст «Ім’я», «E-mail») були вирівняні, розмістіть їх усередині тегу <table>.
- Кожен рядок форми має міститися в тегах <tr>, а підпис та саме поле — у окремих клітинках <td>.
-
Створення полів введення:
- Поле для імені: додайте <input name="name" type="text"> для введення простого тексту.
- Поле для пошти: додайте <input name="email" type="email">. Використання типу email дозволяє браузеру автоматично перевіряти, чи ввів користувач символ «@» та коректну адресу.
- Поле для повідомлення: використовуйте тег <textarea> для багаторядкового тексту. Налаштуйте його розмір за допомогою атрибутів cols="40" (ширина) та rows="5" (кількість рядків).
-
Кнопка відправки:
- В останньому рядку форми додайте кнопку: <input type="submit" value="Відправити повідомлення">. Текст у атрибуті value буде відображатися безпосередньо на кнопці.
-
Перевірка:
- Збережіть файл та відкрийте його у браузері.
- Спробуйте заповнити форму. Зверніть увагу, чи з’являється попередження, якщо в полі E-mail вказати текст без символу «@».
Додаткове завдання (для тих, хто опанував CSS): Підключіть до сторінки файл стилів style.css. Налаштуйте зовнішній вигляд форми: додайте внутрішні відступи (padding) для полів введення та змініть колір фону кнопки при наведенні курсору.
Критерії оцінювання:
- Наявність усіх обов’язкових тегів структури форми.
- Використання правильних типів type для текстового поля та електронної пошти.
- Візуальна охайність форми (вирівнювання елементів).
docx
Оцінка розробки
Безкоштовний сертифікат
про публікацію авторської розробки
про публікацію авторської розробки
Щоб отримати, додайте розробку
Додати розробку