Урок4

Урок 4: Створюємо форми — Бо питати електронну пошту вживу якось ніяково

Вітаю на Уроці 4! Тепер, коли на твоїй вебсторінці вже є картинки та посилання, настав час зробити її ще цікавішою — взаємодією з відвідувачами! І як це зробити? За допомогою форм! Чи то для збору електронних адрес, відгуків, чи навіть для вирішення вічного питання про те, чи варто класти ананас на піцу — HTML-форми допоможуть (і це набагато менш ніяково, ніж питати це вживу!).

Тег `<form>`: Основний елемент будь-якої форми

В HTML форми створюються за допомогою тега <form>. Уяви це як магічну коробку, яка збирає всі дані, що введуть твої відвідувачі, і надсилає їх тобі. Ось базова структура:

<form action="your-server-url" method="post">
    <!-- Тут будуть твої елементи форми -->
</form>

action: Це місце, куди будуть надіслані дані форми (зазвичай на сервер).
method: Зазвичай використовуємо post (дані надсилаються у фоновому режимі) або get (дані з’являються в URL, як у пошукових запитах Google).

Базовий приклад:

<form action="/submit" method="post">
    <!-- Елементи форми -->
    <input type="text" name="name" placeholder="Ваше ім'я">
    <input type="email" name="email" placeholder="Ваша електронна пошта">
    <button type="submit">Надіслати</button>
</form>

Завдання: Створи свою першу форму

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

Поля введення: Місце, де відбувається магія

Форми без полів введення — це як піца без сиру. HTML пропонує кілька типів полів введення, але ось кілька найпоширеніших:

<input type="text"> для загального тексту (наприклад, ім’я).
<input type="email"> для введення електронної пошти (або принаймні спроби).
<input type="password"> для прихованих полів (наприклад, пароля або секретного рецепту борщу).

Приклад з кількома полями введення:

<form action="/submit" method="post">
    <label for="name">Ім'я:</label>
    <input type="text" id="name" name="name" placeholder="Ваше ім'я">
    
    <label for="email">Електронна пошта:</label>
    <input type="email" id="email" name="email" placeholder="Ваша електронна пошта">
    
    <label for="password">Пароль:</label>
    <input type="password" id="password" name="password" placeholder="Ваш пароль">
    
    <button type="submit">Зареєструватися</button>
</form>

Завдання: Додай більше полів

Створи форму, яка запитує ім’я, електронну пошту та пароль. Хочеш креативу? Запитай про улюблений колір або про думку щодо ананасів на піці (бо це питання, яке ніколи не втратить актуальності).

Радіокнопки та чекбокси: Дай людям вибір

Хочеш дати своїм відвідувачам можливість вибирати? Використовуй радіокнопки або чекбокси:

Радіокнопки: Користувачі можуть вибрати тільки один варіант.
Чекбокси: Користувачі можуть вибрати стільки варіантів, скільки захочуть.

Приклад з радіокнопками та чекбоксами:

<form action="/submit" method="post">
    <label>Виберіть улюблений колір:</label><br>
    <input type="radio" id="red" name="color" value="red">
    <label for="red">Червоний</label><br>
    
    <input type="radio" id="blue" name="color" value="blue">
    <label for="blue">Синій</label><br>
    
    <label>Обери улюблену піцу:</label><br>
    <input type="checkbox" id="margherita" name="pizza" value="margherita">
    <label for="margherita">Маргарита</label><br>
    
    <input type="checkbox" id="diavola" name="pizza" value="diavola">
    <label for="diavola">Діавола</label><br>
    
    <button type="submit">Надіслати</button>
</form>

Завдання: Додай радіокнопки та чекбокси

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

Хостинг твоєї сторінки за допомогою Caddy

Тепер, коли ти додав форму на свою сторінку, час знову скористатися Caddy, щоб показати її світові (або принаймні своїм друзям).

Крок 1: Відкрий термінал

Перейди до каталогу, де зберігається твій HTML-файл:

cd ~/my-website

Крок 2: Запусти Caddy

Запусти цей команду, щоб локально хостити свою сторінку на порту 8080:

caddy file-server --listen :8080

Крок 3: Переглянь свою сторінку

Відкрий браузер і зайди на http://localhost:8080, щоб подивитися на свою нову інтерактивну форму. Тепер ти можеш збирати корисну (або зовсім безглузду) інформацію від своїх відвідувачів!

Підсумки:

В цій лекції ти навчився:

Створювати HTML-форми за допомогою тега <form>.
Додавати поля введення для збору даних від відвідувачів.
Використовувати радіокнопки та чекбокси для надання варіантів вибору.
Хостити свою оновлену сторінку за допомогою Caddy для тестування.

Тепер твоя вебсторінка інтерактивна, і ти готовий збирати всіляку цікаву інформацію (наприклад, хто за, а хто проти ананасів на піці!). На наступному уроці ми зануримося у стилізацію сторінки за допомогою CSS. Готуйся до ще більш цікавих пригод у веб-дизайні!

HTML Початківці Веб-дизайн