Лекція 3: Форми та їх використання

Вступ

• Обговорення методичок по урокам.
• Перевірка присутності студентів.
• Тема заняття: створення форм, кнопки, JavaScript, PHP.
• Важливість JS для роботи з формами.

Основи роботи з формами

Семантичний елемент form

• Створення елемента <form> із атрибутами:
  • method: визначає метод відправки даних (зазвичай POST).
  • enctype: не обов'язковий, але корисний (наприклад, multipart/form-data для відправки файлів).
  • action: шлях до PHP-файлу для обробки даних.

JavaScript та PHP

• Необхідність базових знань JS для обробки даних форми.
• Дані можуть відправлятись на PHP для подальшої обробки (наприклад, відправка на email).

Робота з input

Створення текстового поля

• Використання тегу <input> з атрибутом type="text".
• Використання <div> для організації форм.
• Зв'язування інпуту з <label> за допомогою атрибутів id та for.
• Атрибут placeholder для підказок усередині інпуту.

Типи input

• password: приховування введених символів.
• email: перевірка на коректність введення email-адреси.
• tel: форма для введення телефонного номера.
• checkbox: галочка для вибору.
• radio: радіо-кнопки для вибору одного з декількох варіантів.

Кнопки

• Використання тегу <button> з типами:
  • submit: відправка форми.
  • reset: очищення форми.

Підключення шрифтів

• Використання Google Fonts для підключення шрифтів.
• Важливо: стилі CSS повинні бути підключені останніми.
• Іконкові шрифти через Font Awesome.

Select та Options

• Використання тегу <select> для створення випадаючих списків.
• Елементи списку задаються за допомогою тегу <option>.

Заключення

• Рекомендація вивчити методички для більш детального розуміння.
• Перевірка зворотнього зв'язку від студентів (запитання, розуміння теми).

Поради:

• Використовуйте методички для додаткової інформації.
• Практикуйте роботу з HTML формами, JS та PHP для кращого засвоєння матеріалу.
• Пам’ятайте про важливість валідності коду та унікальності ID атрибутів.