Форми і Введення Даних

З поверненням.

У попередньому уроці ти навчився створювати таблиці для структурованих даних.

Тепер переходимо до форм.

Форми — це місце, де користувачі нарешті відповідають твоєму сайту.

Вони можуть написати своє ім’я.

Надіслати повідомлення.

Обрати варіант.

Натиснути кнопку.

Коротко кажучи, форми перетворюють статичну сторінку на розмову.

А іноді — на хаос.

Але ввічливий хаос.

Що Ти Вивчиш

У цьому уроці ти дізнаєшся:

• що таке HTML-форми;
• як використовувати елемент form;
• як створювати текстові поля;
• як використовувати label;
• чому атрибут name важливий;
• як створювати кнопки;
• як використовувати textarea;
• як створювати select menu;
• як використовувати required;
• типові помилки з формами.

Що Таке Форма?

Форма збирає інформацію від користувача.

Приклади:

• контактні форми;
• login forms;
• registration forms;
• пошукові поля;
• підписка на newsletter;
• feedback forms;
• order forms.

Форма зазвичай містить поля і кнопку.

Приклад:

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

  <button type="submit">Надіслати</button>
</form>

Це дуже маленька форма.

Але вона вже має структуру.

Як маленький офіс з одним столом і однією кнопкою.

Елемент form

Форма починається з form:

<form>
  ...
</form>

Усе всередині належить формі.

Inputs.

Labels.

Buttons.

Text areas.

Select menus.

Елемент form — це контейнер.

Він каже:

Ця група елементів працює разом, щоб зібрати інформацію.

Дуже офіційно.

Майже як документи.

Але з меншою кількістю печаток.

Текстові Поля

Текстове поле дозволяє користувачу ввести один рядок тексту.

Приклад:

<input type="text" name="username">

type="text" означає, що це звичайне текстове поле.

Використовуй його для:

• імен;
• usernames;
• коротких повідомлень;
• міст;
• простих відповідей.

Приклад:

<form>
  <label for="username">Username</label>
  <input id="username" name="username" type="text">
</form>

Користувач може писати всередині поля.

Сайт слухає.

Хоч раз.

Label

Label описує input.

Приклад:

<label for="email">Email</label>
<input id="email" name="email" type="email">

Атрибут for має відповідати id input.

Тут:

<label for="email">
<input id="email">

Обидва використовують email.

Це з’єднує label з input.

Чому це корисно?

• користувачі розуміють, що писати;
• screen readers можуть пояснити поле;
• клік по label фокусує input;
• форма стає доступнішою.

Форма без label — як двері без таблички.

Можливо, працює.

Але ніхто не розуміє, що відбувається.

Атрибут name

Атрибут name дає input назву, коли форма надсилається.

Приклад:

<input type="text" name="firstName">

Без name поле може не надіслатися правильно.

Це важливо.

Приклад:

<input id="name" name="name" type="text">

id з’єднує input з label.

name ідентифікує дані.

Це не одне й те саме.

HTML любить деталі.

Іноді занадто.

Placeholder

Placeholder показує тимчасовий текст всередині input.

Приклад:

<input type="text" name="name" placeholder="Введи своє ім’я">

Він може допомогти користувачу зрозуміти, що писати.

Але не використовуй placeholder замість label.

Погано:

<input type="email" placeholder="Email">

Краще:

<label for="email">Email</label>
<input id="email" name="email" type="email" placeholder="you@example.com">

Placeholder зникає, коли користувач починає писати.

Label залишається.

Labels вірні.

Placeholders драматичні і зникають.

Email Input

Для email-адрес використовуй type="email":

<input type="email" name="email">

Приклад:

<label for="email">Email address</label>
<input id="email" name="email" type="email">

Браузер може перевірити, чи користувач ввів щось схоже на email.

Не ідеально.

Але корисно.

HTML дає маленьку допомогу.

Не чудо.

Маленьку допомогу.

Password Input

Для паролів використовуй type="password":

<input type="password" name="password">

Браузер приховує символи.

Приклад:

<label for="password">Password</label>
<input id="password" name="password" type="password">

Це корисно для login forms.

Не використовуй звичайні текстові поля для паролів.

Це не “просто”.

Це проблема в капелюсі.

Обов’язкові Поля

Можна зробити поле обов’язковим:

<input type="text" name="name" required>

Браузер не надішле форму, якщо поле порожнє.

Приклад:

<label for="name">Ім’я</label>
<input id="name" name="name" type="text" required>

Використовуй required для важливих полів.

Але не роби кожне поле обов’язковим.

Ніхто не любить форму, яка просить історію життя тільки для того, щоб надіслати “привіт”.

Textarea

Для довших повідомлень використовуй textarea.

Приклад:

<label for="message">Повідомлення</label>
<textarea id="message" name="message"></textarea>

Використовуй textarea для:

• контактних повідомлень;
• коментарів;
• описів;
• feedback;
• довших відповідей.

Приклад:

<textarea id="message" name="message" rows="5"></textarea>

Атрибут rows контролює видиму висоту.

Не емоційну глибину.

На жаль.

Select Menu

Select menu дозволяє користувачу вибрати один варіант.

Приклад:

<label for="course">Обери курс</label>
<select id="course" name="course">
  <option value="html">HTML</option>
  <option value="css">CSS</option>
  <option value="javascript">JavaScript</option>
</select>

select — це меню.

Кожен option — це один варіант.

value — це значення, яке надсилається разом з формою.

Це корисно, коли користувач має вибрати з фіксованого списку.

Дуже цивілізовано.

Без хаосу клавіатури.

Кнопки

Форма зазвичай має кнопку.

Приклад:

<button type="submit">Надіслати</button>

type="submit" означає, що кнопка надсилає форму.

Приклад:

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

  <button type="submit">Надіслати</button>
</form>

Також можна використати:

<button type="reset">Reset</button>

Але обережно.

Reset button може стерти все, що користувач ввів.

Це швидкий спосіб стати непопулярним.

action і method

Форми можуть мати action і method.

Приклад:

<form action="/contact" method="post">
  ...
</form>

action каже, куди йдуть дані форми.

method каже, як вони надсилаються.

Поширені методи:

• get;
• post.

Поки що ми фокусуємось на HTML-структурі.

Backend-обробка прийде пізніше.

HTML будує форму.

Сервер займається повідомленням.

Як рецепція і офіс.

Створи Контактну Форму

Створи файл:

touch form.html

Додай це:

<!DOCTYPE html>
<html lang="uk">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Контактна Форма</title>
</head>
<body>
  <h1>Зв’язатися зі мною</h1>

  <p>Використай цю форму, щоб надіслати просте повідомлення.</p>

  <form action="#" method="post">
    <label for="name">Ім’я</label>
    <input id="name" name="name" type="text" required>

    <label for="email">Email</label>
    <input id="email" name="email" type="email" required>

    <label for="topic">Тема</label>
    <select id="topic" name="topic">
      <option value="question">Питання</option>
      <option value="project">Проєкт</option>
      <option value="feedback">Відгук</option>
    </select>

    <label for="message">Повідомлення</label>
    <textarea id="message" name="message" rows="5" required></textarea>

    <button type="submit">Надіслати Повідомлення</button>
  </form>
</body>
</html>

Відкрий її в браузері.

Вона ще не надсилатиме справжній email.

Для цього потрібен backend або form service.

Але HTML-структура правильна.

Один крок за раз.

Не треба будувати Рим, Stripe і CRM за один післяобідній період.

Типові Помилки

Inputs без labels

Погано:

<input type="text" name="name">

Краще:

<label for="name">Ім’я</label>
<input id="name" name="name" type="text">

Labels важливі.

Використовуй їх.

Відсутній name

Погано:

<input id="email" type="email">

Краще:

<input id="email" name="email" type="email">

Без name дані можуть не надіслатися правильно.

Text input для всього

Не ідеально:

<input type="text" name="message">

Краще для довгих повідомлень:

<textarea name="message"></textarea>

Використовуй правильний елемент для задачі.

Не використовуй ложку, щоб рубати дерево.

Практика

Створи файл:

signup.html

Побудуй signup form з:

• одним h1;
• одним абзацом;
• name input;
• email input;
• password input;
• course select menu;
• message textarea;
• submit button;
• labels для кожного поля;
• required на важливих полях.

Без CSS.

Без JavaScript.

Тільки HTML.

Міні-Завдання

Створи feedback form.

Вона має містити:

• ім’я;
• email;
• rating select menu;
• message textarea;
• submit button;
• корисні labels;
• placeholders там, де вони допомагають;
• required fields тільки там, де справді треба.

Тримай форму простою.

Хороша форма питає те, що їй потрібно.

Погана форма питає твою душу, рецепт бабусі і поштовий індекс двічі.

Підсумок

Сьогодні ти дізнався, що:

• форми збирають user input;
• form групує елементи форми;
• input створює різні типи полів;
• label описує поля і покращує доступність;
• id з’єднує input з label;
• name ідентифікує надіслані дані;
• placeholder дає тимчасові підказки;
• required робить поле обов’язковим;
• textarea потрібен для довшого тексту;
• select і option створюють dropdown menus;
• button type="submit" надсилає форму;
• action і method описують, куди і як надсилаються дані.

Форми потужні.

Вони дозволяють користувачам взаємодіяти зі сторінкою.

Але будуй їх уважно.

Бо форми — це місце, де сайти перестають говорити і починають слухати.

Наступний Урок

У наступному уроці ми вивчимо semantic HTML.

Бо HTML — це не тільки теги.

Це значення.

А значення відділяє чисту сторінку від катастрофи під назвою div soup.