<!-- Спосіб 1: явне зв'язування через for/id (рекомендований) -->
<label for="username">Ім'я користувача</label>
<input type="text" id="username" name="username" />

<!-- Спосіб 2: неявне — <input> всередині <label> -->
<label>
    Ім'я користувача
    <input type="text" name="username" />
</label>

<!-- ✅ Клік на "Погоджуюсь з умовами" активує checkbox -->
<input type="checkbox" id="agree" name="agree" />
<label for="agree">Погоджуюсь з умовами використання</label>

<!-- ❌ Немає label — користувач мусить влучити точно в checkbox -->
<input type="checkbox" name="agree" />
Погоджуюсь з умовами використання

<!-- number: стрілки вгору/вниз, валідація числа -->
<label for="quantity">Кількість (1–99)</label>
<input type="number" id="quantity" name="quantity" min="1" max="99" step="1" value="1" />

<!-- range: слайдер -->
<label for="volume">Гучність: <output id="vol-output">50</output>%</label>
<input type="range" id="volume" name="volume" min="0" max="100" step="5" value="50" />

<!-- date: вибір дати (рік-місяць-день) -->
<label for="birthday">Дата народження</label>
<input type="date" id="birthday" name="birthday" min="1900-01-01" max="2010-12-31" />

<!-- time: вибір часу -->
<label for="appointment">Час запису</label>
<input type="time" id="appointment" name="appointment" min="09:00" max="18:00" step="1800" />

<!-- datetime-local: дата + час без часового поясу -->
<label for="event-start">Початок події</label>
<input type="datetime-local" id="event-start" name="event_start" min="2024-01-01T00:00" />

<!-- month: місяць та рік -->
<label for="exp-date">Термін дії картки</label>
<input type="month" id="exp-date" name="exp_date" />

<!-- week: номер тижня -->
<label for="delivery-week">Тиждень доставки</label>
<input type="week" id="delivery-week" name="delivery_week" />

<!-- CHECKBOX: незалежний вибір (можна вибрати кілька) -->
<fieldset>
    <legend>Улюблені мови програмування</legend>

    <input type="checkbox" id="lang-js" name="languages" value="javascript" />
    <label for="lang-js">JavaScript</label>

    <input type="checkbox" id="lang-ts" name="languages" value="typescript" />
    <label for="lang-ts">TypeScript</label>

    <input type="checkbox" id="lang-py" name="languages" value="python" checked />
    <label for="lang-py">Python</label>

    <input type="checkbox" id="lang-go" name="languages" value="go" />
    <label for="lang-go">Go</label>
</fieldset>

<!-- RADIO: взаємовиключний вибір (тільки один з групи) -->
<!-- Група radio визначається однаковим name -->
<fieldset>
    <legend>Рівень кваліфікації</legend>

    <input type="radio" id="level-junior" name="level" value="junior" />
    <label for="level-junior">Junior</label>

    <input type="radio" id="level-mid" name="level" value="mid" checked />
    <label for="level-mid">Middle</label>

    <input type="radio" id="level-senior" name="level" value="senior" />
    <label for="level-senior">Senior</label>
</fieldset>

fieldset {
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 1rem 1.5rem;
    margin-bottom: 1rem;
}
legend {
    font-weight: 600;
    padding: 0 0.5rem;
    color: #1e293b;
}
input[type='checkbox'],
input[type='radio'] {
    margin-right: 0.4rem;
    accent-color: #3b82f6;
}
label {
    margin-right: 1rem;
    cursor: pointer;
}

<!-- color: колірний пікер -->
<label for="brand-color">Колір бренду</label>
<input type="color" id="brand-color" name="brand_color" value="#3b82f6" />

<!-- file: вибір файлів -->
<label for="documents">Документи</label>
<input type="file" id="documents" name="documents" accept=".pdf,.doc,.docx" multiple />

<!-- multiple: дозволяє вибрати кілька файлів -->
<label for="photos">Фотографії (до 5 штук)</label>
<input type="file" id="photos" name="photos" accept="image/*" multiple />

<!-- hidden: дані, які відправляються разом з формою, але невидимі -->
<input type="hidden" name="csrf_token" value="abc123xyz" />
<input type="hidden" name="product_id" value="42" />

<!-- submit: кнопка відправки -->
<input type="submit" value="Зареєструватися" />

<!-- reset: скидання всіх полів до значень за замовч. -->
<input type="reset" value="Очистити форму" />

<!-- button: кнопка без дефолтної дії -->
<input type="button" value="Перевірити" id="check-btn" />

<!-- image: кнопка-зображення (відправляє координати кліку) -->
<input type="image" src="/images/submit-arrow.png" alt="Відправити" width="40" height="40" />

<label for="message">Ваше повідомлення</label>
<textarea
    id="message"
    name="message"
    rows="6"
    cols="40"
    placeholder="Опишіть ваш запит детально..."
    maxlength="1000"
    required
>
Тут може бути початковий текст</textarea
>

<label for="country">Країна</label>
<select id="country" name="country" required>
    <!-- Перший варіант — підказка (не реальний вибір) -->
    <option value="" disabled selected>Оберіть країну</option>

    <!-- optgroup для групування -->
    <optgroup label="Східна Європа">
        <option value="UA">🇺🇦 Україна</option>
        <option value="PL">🇵🇱 Польща</option>
        <option value="CZ">🇨🇿 Чехія</option>
    </optgroup>

    <optgroup label="Захід Європи">
        <option value="DE">🇩🇪 Німеччина</option>
        <option value="FR">🇫🇷 Франція</option>
        <option value="NL">🇳🇱 Нідерланди</option>
    </optgroup>
</select>

<!-- multiple: список з множинним вибором -->
<label for="skills">Ваші навички</label>
<select id="skills" name="skills" multiple size="5">
    <option value="html">HTML</option>
    <option value="css">CSS</option>
    <option value="js" selected>JavaScript</option>
    <option value="ts" selected>TypeScript</option>
    <option value="react">React</option>
    <option value="vue">Vue.js</option>
</select>

<!-- type="submit" — відправляє форму (за замовчуванням всередині <form>) -->
<button type="submit">
    <img src="/icons/send.svg" alt="" width="16" height="16" />
    Надіслати заявку
</button>

<!-- type="reset" — скидає всі поля до початкових значень -->
<button type="reset">Очистити</button>

<!-- type="button" — без дефолтної дії, лише для JS -->
<button type="button" id="preview-btn">Попередній перегляд</button>

<form action="/register" method="post">
    <fieldset>
        <legend>Особисті дані</legend>

        <label for="first-name">Ім'я</label>
        <input type="text" id="first-name" name="first_name" required autocomplete="given-name" />

        <label for="last-name">Прізвище</label>
        <input type="text" id="last-name" name="last_name" required autocomplete="family-name" />

        <label for="birth-date">Дата народження</label>
        <input type="date" id="birth-date" name="birth_date" autocomplete="bday" />
    </fieldset>

    <fieldset>
        <legend>Контактна інформація</legend>

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

        <label for="reg-phone">Телефон</label>
        <input type="tel" id="reg-phone" name="phone" autocomplete="tel" />
    </fieldset>

    <fieldset>
        <legend>Налаштування сповіщень</legend>

        <input type="checkbox" id="notify-email" name="notify" value="email" checked />
        <label for="notify-email">На Email</label>

        <input type="checkbox" id="notify-sms" name="notify" value="sms" />
        <label for="notify-sms">SMS</label>

        <input type="checkbox" id="notify-push" name="notify" value="push" />
        <label for="notify-push">Push-сповіщення</label>
    </fieldset>

    <!-- disabled fieldset — відключає всі поля всередині -->
    <fieldset disabled>
        <legend>Платіжна інформація (недоступно на цьому кроці)</legend>
        <label for="card">Номер картки</label>
        <input type="text" id="card" name="card_number" />
    </fieldset>

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

<label for="framework">Фреймворк</label>
<input type="text" id="framework" name="framework" list="frameworks-list" placeholder="Введіть або оберіть..." />

<datalist id="frameworks-list">
    <option value="React"></option>
    <option value="Vue.js"></option>
    <option value="Angular"></option>
    <option value="Svelte"></option>
    <option value="Solid.js"></option>
    <option value="Nuxt.js"></option>
    <option value="Next.js"></option>
</datalist>

<!-- datalist працює і для числового вводу -->
<label for="font-size">Розмір шрифту (px)</label>
<input type="number" id="font-size" name="font_size" list="font-sizes" min="8" max="72" />
<datalist id="font-sizes">
    <option value="12"></option>
    <option value="14"></option>
    <option value="16"></option>
    <option value="18"></option>
    <option value="24"></option>
    <option value="32"></option>
</datalist>

<form oninput="result.value = parseInt(a.value) + parseInt(b.value)">
    <label for="a">Перше число:</label>
    <input type="number" id="a" name="a" value="0" />

    <label for="b">Друге число:</label>
    <input type="number" id="b" name="b" value="0" />

    <label for="result">Сума:</label>
    <!-- for вказує на id полів, які є джерелом -->
    <output id="result" name="result" for="a b">0</output>
</form>

<!-- progress: прогрес виконання завдання -->
<label for="upload-progress">Завантаження файлу:</label>
<progress id="upload-progress" value="65" max="100">65%</progress>

<!-- Невизначений прогрес (без value) — анімований індикатор -->
<progress>Завантаження...</progress>

<!-- meter: вимірювання в межах діапазону -->
<!-- Семантика: низький/нормальний/високий рівень -->
<label for="disk-usage">Використання диску:</label>
<meter id="disk-usage" value="75" min="0" max="100" low="50" high="80" optimum="30">75%</meter>
<!-- value < low = добре (зелений), low..high = нормально (жовтий), >high = погано (червоний) -->

label {
    display: block;
    margin-bottom: 0.3rem;
    font-weight: 500;
    font-size: 0.9rem;
}
progress, meter {
    width: 100%;
    height: 1.25rem;
    margin-bottom: 1.5rem;
}

<form action="/register" method="post">
    <!-- required: поле не може бути порожнім -->
    <input type="text" name="name" required />

    <!-- minlength / maxlength: довжина тексту -->
    <input type="text" name="username" minlength="3" maxlength="20" required />

    <!-- min / max: числовий діапазон або дати -->
    <input type="number" name="age" min="18" max="120" required />

    <!-- pattern: регулярний вираз -->
    <!-- \+? — опціональний +, [0-9] — цифри, {11,13} — від 11 до 13 символів -->
    <input
        type="tel"
        name="phone"
        pattern="\+?[0-9]{11,13}"
        title="Номер телефону: 11-13 цифр, опціонально з +"
        required
    />

    <!-- type="email" автоматично перевіряє формат -->
    <input type="email" name="email" required />

    <!-- type="url" перевіряє формат URL -->
    <input type="url" name="website" />

    <button type="submit">Відправити</button>
</form>

<!-- Відключає браузерну валідацію (для власної JS-валідації) -->
<form action="/submit" method="post" novalidate>
    <input type="email" name="email" required />
    <button type="submit">Відправити</button>
</form>

<form novalidate>
    <label for="demo-email">Email (спробуйте ввести неправильний):</label>
    <input type="email" id="demo-email" value="not-an-email" required />

    <label for="demo-name">Ім'я (обов'язкове, порожнє):</label>
    <input type="text" id="demo-name" required />

    <label for="demo-age">Вік (18–120):</label>
    <input type="number" id="demo-age" value="25" min="18" max="120" />
</form>

form {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
label {
    font-size: 0.875rem;
    font-weight: 500;
    color: #374151;
}
input {
    display: block;
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 1rem;
    outline: none;
    transition: border-color 0.2s;
}

/* Поле валідне (заповнено правильно) */
input:valid {
    border-color: #10b981;
    background: #f0fdf4;
}

/* Поле невалідне */
input:invalid {
    border-color: #ef4444;
    background: #fef2f2;
}

/* Обов'язкове поле */
input:required {
    border-left: 3px solid #f59e0b;
}

/* Поле в межах min/max */
input:in-range {
    border-color: #10b981;
}

/* Поле поза межами min/max */
input:out-of-range {
    border-color: #ef4444;
    background: #fef2f2;
}

<form autocomplete="on">
    <!-- Особисті дані -->
    <input autocomplete="name" name="name" />
    <!-- Повне ім'я -->
    <input autocomplete="given-name" name="first" />
    <!-- Ім'я -->
    <input autocomplete="family-name" name="last" />
    <!-- Прізвище -->
    <input autocomplete="email" name="email" />
    <!-- Email -->
    <input autocomplete="tel" name="phone" />
    <!-- Телефон -->

    <!-- Адреса -->
    <input autocomplete="street-address" name="street" />
    <input autocomplete="postal-code" name="zip" />
    <input autocomplete="country-name" name="country" />

    <!-- Платіж -->
    <input autocomplete="cc-number" name="card" />
    <!-- Номер картки -->
    <input autocomplete="cc-exp" name="expiry" />
    <!-- Термін -->
    <input autocomplete="cc-csc" name="cvv" />
    <!-- CVV -->

    <!-- Авторизація -->
    <input autocomplete="username" name="login" />
    <input autocomplete="current-password" name="password" />
    <input autocomplete="new-password" name="new_pass" />
</form>