Ось урок, створений спеціально для тебе у стилі CS50. Вмикай уяву, ми починаємо!

🎓 Урок CS50: Forms та магія стилізації Input-елементів

Привіт, друзі! Радий вас бачити. 👋

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

Але що робить веб живим? Діалог.

1. 🔥 Вступ: Чому інтернет — це не просто телевізор?

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

Без форм (Forms) інтернет був би саме таким рестораном. Або, ще гірше, величезною цифровою бібліотекою, де можна читати книги, але не можна ні взяти їх додому, ні залишити відгук, ні навіть спитати бібліотекаря "де туалет?".

Риторичне питання: Як Google знає, що ви шукаєте? Як Instagram отримує ваше фото? Як банк знає, куди переказати гроші?

Все це відбувається через Форми.

Це той самий офіціант, який бере ваше замовлення (дані) і несе його на кухню (сервер). А input-елементи (поля введення) — це рядки в його блокноті. Сьогодні ми навчимося не просто створювати ці блокноти, а робити їх такими зручними та стильними, щоб користувачу хотілося їх заповнити.

2. 🧠 Теоретична база: Що там "під капотом"?

Давайте розберемо механіку. Не зуріть синтаксис, зрозумійте суть.

📦 `<form>` — Це конверт

Тег <form> — це обгортка. Уявіть собі звичайний поштовий конверт. Сам по собі він порожній, але на ньому є дві важливі речі (атрибути): 1. Куди відправити лист (action="..."). 2. Як відправити лист (method="..."). * GET: Як поштова листівка. Все написано відкрито (видно в адресному рядку браузера). Використовуємо для пошуку. * POST: Як заклеєний конверт. Дані сховані всередині. Використовуємо для паролів та особистих даних.

⌨️ `<input>` — Це інтерфейс

Це місце дотику. Кнопки, галочки, текстові поля. Важливо: Браузер за замовчуванням малює їх жахливо. Серйозно, вони виглядають як привіт з 1995 року. Наша робота — за допомогою CSS перетворити їх на сучасні елементи керування.

🏷️ `<label>` — Це доступність (і зручність)

Ніколи, чуєте, ніколи не кидайте input напризволяще. Йому потрібен підпис — label. Це працює так: * Користувач бачить текст "Ваш Email". * Клікає на текст. * А браузер автоматично ставить курсор у поле вводу. * Магія? Ні, це атрибут for у лейбла та id у інпута. Вони як замочок і ключик.

Що треба зрозуміти інтуїтивно: Input — це просто прямокутна коробка (Box Model), як і div. А отже, ми можемо дати їй padding, border, background і навіть shadow.

3. 🧪 Приклади: Від "фу" до "вау"

Приклад 1: "Голий" HTML (Те, що дає браузер)

Що ми очікуємо побачити? Сірі, пласкі поля, різного розміру, які злипаються одне з одним.

<form>
  <label for="name">Ім'я:</label>
  <input type="text" id="name" name="user_name">

  <label for="pass">Пароль:</label>
  <input type="password" id="pass" name="user_pass">

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

Результат: Працює, але виглядає так, ніби ми зламали сайт Пентагону в 90-х.

Приклад 2: Додаємо CSS (Стилізація)

Тепер давайте увімкнемо дизайнера. Ми хочемо, щоб поля були великими, зручними для пальця (на мобільному) і приємними для ока.

/* Робимо поля блочними, щоб вони займали всю ширину */
input {
    display: block; 
    width: 100%;
    padding: 12px 15px; /* Внутрішній відступ — це повітря! */
    margin-bottom: 20px; /* Відштовхуємо сусідів знизу */
    border: 1px solid #ccc; /* Тонка сіра рамка */
    border-radius: 8px; /* Округлені кути — це тренд */
    font-size: 16px; /* Щоб текст не був дрібним */
}

/* Стилізуємо кнопку */
button {
    background-color: #007bff; /* Фірмовий синій */
    color: white;
    padding: 12px 24px;
    border: none;
    border-radius: 8px;
    cursor: pointer; /* Курсор перетворюється на руку */
    font-weight: bold;
}

Чому це працює? Ми додали padding, і текст більше не притиснутий до рамок. Ми додали border-radius, і елемент став виглядати дружньо.

Приклад 3: Інтерактивність (Псевдокласи)

Користувач має відчувати, що сайт реагує на нього. Коли ми клікаємо в поле, воно має "світитися". Це стан :focus.

input:focus {
    outline: none; /* Прибираємо стандартну синю обводку браузера */
    border-color: #007bff; /* Робимо рамку синьою */
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.5); /* Додаємо легке світіння */
}

button:hover {
    background-color: #0056b3; /* Темніший синій при наведенні */
}

Тепер, коли ви клікаєте в поле, воно каже: "Я тут, я готове до вводу!".

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

Час бруднити руки кодом! Відкрийте редактор.

Завдання 1: Реплікація Створіть форму реєстрації з полями: "Логін", "Email", "Пароль". Скопіюйте стилі з Прикладу 2 та 3. Переконайтеся, що лейбли прив'язані до інпутів (клік по слову "Логін" має активувати поле).

Завдання 2: Сила плейсхолдера Додайте атрибут placeholder до кожного інпута. Наприклад, для Email напишіть "example@gmail.com". Питання: Чи зникає цей текст, коли ви починаєте писати?

Завдання 3: Робота з помилкою Уявіть, що користувач ввів неправильний пароль. Створіть CSS-клас .error (наприклад, червона рамка і червоний фон). Вручну додайте цей клас до одного з інпутів у HTML, щоб побачити, як це виглядатиме.

Завдання 4: Міні-кейс "Пошук" Створіть форму пошуку, яка складається тільки з одного інпута і кнопки "Знайти". Умова: Інпут і кнопка мають бути в один рядок і "злипатися" боками (без проміжку між ними), як у багатьох пошуковиках. Підказка: Вам знадобиться display: flex для батьківського елемента форми або прибирання border-radius у суміжних кутів.

Завдання 5: А що, якщо... Спробуйте дати інпуту type="date" або type="color". Як браузер змінює їхній вигляд без жодного CSS? Це і є вбудована магія HTML5.

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

Як відрізнити новачка від профі, дивлячись на код форми?

Проблема outline: none:
- Новачок: Пише input { outline: none; }, бо стандартна рамка бісить. І все.
- Профі: Знає, що це вбиває доступність (люди, які користуються клавіатурою, не бачать, де вони знаходяться). Профі завжди замінює стандартний outline на свій власний стиль для :focus.
Забутий name:
- Ви можете зробити найкрасивішу форму у світі, але якщо у інпута немає атрибута name="...", сервер не отримає ці дані. Він отримає пустий конверт. id — це для CSS/JS, name — це для сервера.
Мобільний світ:
- Ваш палець товстіший за курсор миші. Робити інпути висотою менше 44px — це неповага до мобільних користувачів. Робіть великі зони кліку (padding is your friend).

6. 🧩 Підсумок

Отже, що ми маємо? Ми взяли нудний спосіб передачі даних і перетворили його на зручний інтерфейс. * Ви знаєте, що <form> — це конверт, а <input> — це бланк. * Ви вмієте пов'язувати текст і поле через label. * Ви вмієте використовувати CSS, щоб показати користувачу: "Я тебе чую" (через :focus та :hover).

Що далі? Зараз наша форма красива, але вона... дурна. Вона дозволить відправити пустий емейл або пароль з одного символу. На наступному уроці ми покличемо "мозок" фронтенду — JavaScript. Він буде стояти як охоронець на вході (Client-side validation) і перевіряти дані до того, як вони полетять на сервер.

А поки — експериментуйте зі стилями! Це був CS50 (українська версія). Побачимось! 💻