Модуль 10

Forms та обробка форм

Ось готовий урок, створений у стилі CS50: енергійний, з аналогіями та акцентом на розумінні суті процесів.

🎓 CS50: Introduction to Computer Science

Тема: Forms та обробка форм (Інтерактивність вебу)

Привіт, друзі! 👋

Сьогодні ми перетинаємо важливу межу. До цього моменту все, що ми робили (HTML, CSS), було схоже на створення цифрової газети або красивого рекламного буклета. Ви могли показати інформацію користувачеві, але користувач нічого не міг сказати вам у відповідь.

1. 🔥 Вступ: проблема та мотивація

Уявіть, що ви прийшли в ресторан. Ви сідаєте за столик, берете меню... і все. Офіціанта немає. Кухня закрита склом. Ви можете скільки завгодно милуватися фотографіями піци, але ви не можете її замовити.

Без форм інтернет — це саме такий ресторан. Це просто бібліотека, де ви можете лише читати.

Але як тільки з’являється форма (Form), ви отримуєте голос. * Пошуковий рядок Google? Це форма. * Логін у Facebook? Це форма. * Кнопка «Купити» в інтернет-магазині? Це теж обробка форми. * Навіть лайк під цим уроком — це маленька, невидима форма.

Питання до вас: Як браузер (ваш комп'ютер) передає те, що ви набрали на клавіатурі, на сервер (десь у хмарі)? Чи замислювалися ви, що відбувається в ту мілісекунду, коли ви натискаєте «Enter»?

Сьогодні ми розберемо цей механізм. Ми навчимося не просто показувати картинки, а слухати користувача.

2. 🧠 Теоретична база (Як це працює під капотом)

Щоб надіслати дані, нам потрібен «конверт». У HTML таким конвертом є тег <form>.

Уявіть, що ви пишете паперового листа. Щоб він дійшов, вам потрібно знати дві головні речі: 1. Куди надсилати? (Адреса на конверті). 2. Як надсилати? (Листівка, яку всі бачать, чи заклеєний конверт із грифом «цілком таємно»?).

У коді це виглядає так:

<form action="/login" method="POST">
  <!-- Тут поля для введення -->
</form>

🔑 Два атрибути, які треба зрозуміти (не завчити, а зрозуміти!):

  1. action="..." — Це «Адреса». Це URL-адреса на сервері, яка чекає на ваші дані. Це той самий «офіціант», який забере ваше замовлення і понесе на кухню. Якщо залишити його пустим, форма надішле дані сама на себе (перезавантажить сторінку).

  2. method="..." — Це «Спосіб доставки». Тут є два головних гравці: GET і POST.

    • GET (Листівка):

      • Ви пишете дані прямо на звороті листівки.
      • Кожен поштар (і кожен, хто гляне на URL) бачить, що там написано.
      • Приклад: Ви шукаєте котиків у Google. URL змінюється на google.com/search?q=cats. Ви бачите свій запит у адресному рядку? Це GET.
      • Коли використовувати: Пошук, фільтрація товарів. Те, що можна зберегти в закладках.

    • POST (Заклеєний конверт):

      • Ви ховаєте дані всередину конверта.
      • В адресному рядку (URL) нічого не змінюється. Це безпечніше і надійніше для великих даних.
      • Приклад: Вхід у банк, завантаження фото, зміна пароля.
      • Коли використовувати: Коли ви щось змінюєте на сервері або надсилаєте секретні дані (паролі).

3. 🧪 Приклади (Від простого до реального)

Приклад 1: Простий пошук (GET)

Давайте створимо власний міні-Google. Що нам потрібно? Поле для тексту і кнопка.

<!-- Уявіть, що action веде на реальний скрипт пошуку -->
<form action="/search" method="GET">
    <input type="text" name="query" placeholder="Що шукаємо?">
    <button type="submit">Знайти</button>
</form>

Що тут відбудеться? Якщо я введу слово "Pizza" і натисну кнопку, браузер сформує URL: /search?query=Pizza

Бачите name="query"? Це ім'я змінної. Без атрибута name сервер не зрозуміє, що саме ви йому надіслали. Це як надіслати листа без підпису.

Приклад 2: Форма входу (POST)

А тепер уявіть, що ми робимо те саме для пароля, але помилково використаємо GET. Ваш URL виглядатиме так: /login?username=david&password=12345. 😱 Катастрофа! Ваш пароль зберігся в історії браузера, і його побачить кожен, хто підійде до монітора.

Тому ми використовуємо POST:

<form action="/login" method="POST">
    <label for="email">Email:</label>
    <input type="email" id="email" name="user_email" required>

    <label for="pass">Password:</label>
    <input type="password" id="pass" name="user_pass" required>

    <button type="submit">Увійти</button>
</form>

Що змінилося? 1. method="POST": Дані підуть приховано. 2. type="password": Браузер сховає символи за зірочками ****. 3. required: Браузер не дасть натиснути кнопку, поки поля порожні (вбудована валідація — це круто!).

4. 🛠 Практична частина

Час забруднити руки кодом! Відкрийте свій редактор (VS Code або пісочницю типу CodePen) і зробіть наступне:

Завдання 1: "Дзеркало" (Network Tab) 1. Створіть форму з методом GET та двома полями: Ім'я та Вік. 2. Натисніть "Submit". 3. Подивіться на адресний рядок браузера. Знайдіть там свої дані. 4. Челлендж: Відкрийте інструменти розробника (F12) -> вкладка Network. Знайдіть свій запит.

Завдання 2: "Секретний агент" 1. Змініть метод на POST. 2. Надішліть дані. 3. Переконайтеся, що в адресному рядку чисто. 4. Спробуйте знайти свої дані у вкладці Network -> Payload (або Body). Вони там, але сховані в "тілі" запиту.

Завдання 3: "Забудькуватий користувач" 1. Додайте до форми атрибут required для імені. 2. Спробуйте надіслати порожню форму. Що робить браузер? 3. А що, якщо... спробувати ввести текст у поле type="number"? Спробуйте зламати свою форму.

Завдання 4: Реальний кейс (Підписка на розсилку) Створіть форму підписки, яка має: * Поле для Email. * Чекбокс "Я погоджуюся з правилами". * Кнопку "Підписатися". * Умова: Кнопка має спрацювати, тільки якщо галочка стоїть (підказка: це теж вирішується через required у чекбоксі).

5. 💡 Мислення як у розробника

Ось де ми переходимо від кодування до інженерії. Новачки часто роблять форму і думають: "Ну, працює ж". Досвідчений розробник думає інакше.

1. "Ніколи не довіряй користувачеві" (Rule #1) Користувач може ввести вік "-5", або замість email написати поему Тараса Шевченка. * Новачок: Сподівається, що користувач розумний. * Профі: Використовує type="email", min="0", maxlength="..." в HTML, а потім обов'язково перевіряє це ще раз на сервері.

2. Accessibility (Доступність) — це не бонус, це база. Ви помітили тег <label for="..."> у прикладах вище? Без нього скрінрідери (програми для незрячих людей) скажуть просто "Input", і людина не знатиме, що туди вводити. * Завжди пов'язуйте Label та Input через id та for. * Бонус: якщо клікнути на текст Label, курсор автоматично стрибне у поле вводу. Зручно!

3. UX (User Experience) Давайте підказки. Використовуйте атрибут placeholder="..." ("Введіть ваш email..."). Показуйте зрозумілі помилки. Форма — це діалог, будьте ввічливим співрозмовником.

6. 🧩 Підсумок

Отже, що ми сьогодні зробили? Ми перетворили статичну сторінку на інструмент комунікації.

  • Ви знаєте, що <form> — це конверт.
  • Ви знаєте, що action — це адреса, а method (GET/POST) — це спосіб доставки.
  • Ви зрозуміли, що дані передаються парами name=value.

Тепер ви вмієте "відправляти" дані.

Але... куди вони діваються? Де вони зберігаються? Хто їх ловить на тій стороні? У наступному уроці ми заглянемо за лаштунки — на Back-end, і дізнаємося, як спіймати ці дані за допомогою коду (Python або JavaScript) і вирішити долю цього замовлення піци.

Це було CS50. До зустрічі! 👨‍💻

← До списку уроків Наступний урок →