Форми та елементи введення

HTML форми — рецепція готелю з реєстраційною формою ручкою та ключем на мармуровій стійці

У попередніх уроках ми навчилися відображати інформацію — текст, зображення, таблиці. Але веб — це не тільки перегляд. Форми дозволяють збирати дані від користувача: логін, реєстрація, пошук, замовлення, коментарі.

Тег `<form>`

Форма — це контейнер для полів введення:

<form action="/submit" method="POST">
  <!-- поля введення тут -->
  <button type="submit">Відправити</button>
</form>

Атрибут	Що робить
`action`	Куди відправляти дані (URL)
`method`	Як відправляти: `GET` або `POST`

GET vs POST простими словами:

GET — дані видно в URL (site.com/search?q=html). Для пошуку, фільтрів
POST — дані приховані. Для паролів, реєстрації, будь-чого що змінює дані

Текстові поля `<input>`

<input> — найпоширеніший елемент форми. Його поведінка залежить від атрибута type:

<input type="text" name="username" placeholder="Введи ім'я">

Основні типи input

Тип	Що робить	Приклад
`text`	Звичайне текстове поле	Ім'я, прізвище
`email`	Поле для email (перевіряє формат)	user@mail.com
`password`	Поле з прихованими символами	••••••
`number`	Тільки числа (зі стрілками ↑↓)	Вік, кількість
`date`	Вибір дати (з календарем)	Дата народження
`checkbox`	Галочка (кілька варіантів)	"Згоден з умовами"
`radio`	Перемикач (один з варіантів)	Стать, тариф
`range`	Повзунок	Гучність, яскравість
`color`	Вибір кольору	Улюблений колір

Label — підпис до поля

Завжди пов'язуй <label> з <input>. Це критично важливо:

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

Атрибут for у <label> повинен збігатися з id у <input>.

Навіщо label?

Скрін-рідери озвучують підпис разом з полем
Клік на текст підпису фокусує поле (більша зона кліку)
Без label поле — "безіменне" для допоміжних технологій

Увага

Placeholder (placeholder="Введи email") — це не заміна label! Placeholder зникає при введенні тексту, і користувач забуває що потрібно було ввести. Завжди використовуй label.

Checkbox та Radio

Checkbox — множинний вибір

<p>Які мови ти знаєш?</p>

<label>
  <input type="checkbox" name="languages" value="html"> HTML
</label>
<label>
  <input type="checkbox" name="languages" value="css"> CSS
</label>
<label>
  <input type="checkbox" name="languages" value="js"> JavaScript
</label>

Radio — один з варіантів

<p>Рівень досвіду:</p>

<label>
  <input type="radio" name="level" value="beginner"> Початківець
</label>
<label>
  <input type="radio" name="level" value="intermediate"> Середній
</label>
<label>
  <input type="radio" name="level" value="advanced"> Просунутий
</label>

Порада

Зверни увагу: в radio-групі всі елементи мають однаковий name — це об'єднує їх у групу, де можна обрати тільки один.

Випадаючий список `<select>`

<label for="city">Місто:</label>
<select id="city" name="city">
  <option value="">-- Обери місто --</option>
  <option value="kyiv">Київ</option>
  <option value="lviv">Львів</option>
  <option value="odesa">Одеса</option>
  <option value="kharkiv">Харків</option>
</select>

Корисні атрибути:

selected — обраний за замовчуванням
disabled — неактивний варіант
<optgroup label="Група"> — групування варіантів

Текстова область `<textarea>`

Для багаторядкового тексту (коментарі, повідомлення):

<label for="message">Повідомлення:</label>
<textarea id="message" name="message" rows="5" cols="40"
  placeholder="Напиши своє повідомлення..."></textarea>

На відміну від <input>, у <textarea> є відкриваючий та закриваючий тег.

Валідація — перевірка даних

HTML має вбудовану валідацію — без жодного JavaScript:

<!-- Обов'язкове поле -->
<input type="text" name="name" required>

<!-- Мінімум та максимум -->
<input type="number" name="age" min="14" max="99">

<!-- Мінімальна довжина -->
<input type="password" name="password" minlength="8">

<!-- Патерн (регулярний вираз) -->
<input type="tel" name="phone" pattern="[0-9]{10}"
  title="Введи 10 цифр номера телефону">

Атрибут	Що робить
`required`	Поле обов'язкове для заповнення
`min` / `max`	Мінімальне/максимальне значення (для number, date)
`minlength` / `maxlength`	Мін./макс. кількість символів
`pattern`	Регулярний вираз для перевірки формату
`placeholder`	Підказка (зникає при введенні)

Якщо валідація не пройшла, браузер покаже повідомлення автоматично!

Кнопки

<!-- Відправити форму -->
<button type="submit">Зареєструватися</button>

<!-- Очистити всі поля -->
<button type="reset">Очистити</button>

<!-- Звичайна кнопка (потребує JavaScript) -->
<button type="button">Показати підказку</button>

Практика: форма реєстрації

<!DOCTYPE html>
<html lang="uk">
<head>
  <meta charset="UTF-8">
  <title>Реєстрація</title>
</head>
<body>
  <h1>Реєстрація на курс</h1>

  <form action="/register" method="POST">
    <p>
      <label for="name">Ім'я:</label><br>
      <input type="text" id="name" name="name" required
        placeholder="Олена Петренко">
    </p>

    <p>
      <label for="email">Email:</label><br>
      <input type="email" id="email" name="email" required
        placeholder="olena@example.com">
    </p>

    <p>
      <label for="age">Вік:</label><br>
      <input type="number" id="age" name="age" min="14" max="99">
    </p>

    <p>
      <label for="course">Курс:</label><br>
      <select id="course" name="course" required>
        <option value="">-- Обери курс --</option>
        <option value="html">HTML & CSS</option>
        <option value="js">JavaScript</option>
        <option value="react">React</option>
      </select>
    </p>

    <p>Формат навчання:</p>
    <label>
      <input type="radio" name="format" value="online" required> Онлайн
    </label>
    <label>
      <input type="radio" name="format" value="offline"> Офлайн
    </label>

    <p>
      <label>
        <input type="checkbox" name="agree" required>
        Я погоджуюсь з умовами
      </label>
    </p>

    <p>
      <label for="comment">Коментар:</label><br>
      <textarea id="comment" name="comment" rows="3"
        placeholder="Розкажи про себе..."></textarea>
    </p>

    <button type="submit">Зареєструватися</button>
    <button type="reset">Очистити</button>
  </form>
</body>
</html>

Спробуй натиснути "Зареєструватися" без заповнення обов'язкових полів — побачиш вбудовану валідацію браузера.

Підсумок

<form> — контейнер для полів (action + method)
<input> — різні типи полів: text, email, password, number, checkbox, radio тощо
<label> — підпис до поля (обов'язково для доступності)
<select> — випадаючий список
<textarea> — багаторядкове поле
Валідація — required, min/max, pattern — працює без JavaScript
Кнопки — submit (відправка), reset (очищення), button (для JS)

Що далі?

У наступному уроці вивчимо семантичний HTML5 — теги, які роблять код зрозумілим для браузерів, пошукових систем та скрін-рідерів.

Інфо

Ще типи input, які варто знати:

type="url" — поле для URL-адреси
type="search" — поле пошуку (з кнопкою очищення)
type="file" — завантаження файлу
type="hidden" — приховане поле (не видно користувачу)
type="time" — вибір часу

Корисні посилання:

MDN: Your First Form — покрокове створення першої форми
W3C: Labeling Controls — доступність форм
MDN: Input Types — повний список типів input