HTML checkbox: як створити активний чекліст

Юрій Чернієвський 15 липня 2026 7 хв. читання

HTML checkbox із прикладами атрибутів checked, disabled і required та фрагментами коду. — Приклади використання checkbox у HTML з атрибутами checked, disabled і required.
Зображення створене для сайту MIDITAUR з використанням технологій штучного інтелекту на основі авторського тексту.

1. Загальна інформація

Предмет: HTML і вебформи
Рівень/Курс: 7–8 клас / базовий курс веброзробки
Тема уроку: HTML checkbox: checked, disabled, required, label, name/value та робота зі станом

2. Результати навчання (формування компетентностей)

Після уроку учні зможуть:

Професійна компетентність: створювати доступні checkbox-контроли через <input type="checkbox"> і <label>; правильно застосовувати checked, disabled, required, name і value; читати поточний стан через JavaScript-властивість .checked; пояснювати, які значення потрапляють у form data.
Методична компетентність: працювати у VS Code, перевіряти форму в сучасному браузері, користуватися DevTools (Elements, Console) і вбудованою constraint validation; звіряти поведінку контролів із MDN та HTML Standard.
Соціальна компетентність: Навички командної взаємодії в парах (парне програмування) та культура взаємоперевірки коду (Code Review).

3. Ресурси та забезпечення уроку

Технічні засоби та ПЗ: комп’ютери, сучасний браузер, Visual Studio Code, DevTools.
Матеріали: папка checkbox-lab із файлами index.html, styles.css і app.js; заготовка форми «Налаштування профілю»; коротка таблиця очікуваних form-data значень.

4. Логіка перебігу уроку

Етап 1. Введення та постановка проблеми

У формі налаштувань є три прапорці: «Отримувати новини», «Погоджуюся з правилами» та «Функція недоступна». Візуально всі вони схожі, але поводяться по-різному: один можна перемикати, другий обов’язково треба позначити перед надсиланням, третій узагалі не можна змінити. Учням потрібно з’ясувати, які HTML-атрибути задають початковий стан, доступність і перевірку форми, а які дані реально потрапляють у form data.

Перед кодом сформулюйте прогноз:

чи потрапить непозначений checkbox у дані форми;
чи потрапить disabled checkbox у дані форми;
чим відрізняється HTML-атрибут checked від поточного JavaScript-стану element.checked.

Етап 2. Вивчення нового матеріалу

Працюємо за схемою «розмітка → прогноз → дія користувача → перевірка в DevTools». Кожен приклад спочатку читаємо, потім передбачаємо результат і лише після цього запускаємо.

Базова модель checkbox

Checkbox — це елемент форми для незалежного вибору «так/ні». Кілька checkbox з однаковим name можуть передавати кілька значень, на відміну від групи radio-кнопок, де зазвичай вибирають один варіант.

<label for="news">
  <input id="news" type="checkbox" name="newsletter" value="yes">
  Отримувати новини
</label>

Якщо прапорець позначений, форма передасть newsletter=yes. Якщо він не позначений, пара name/value для цього checkbox не надсилається. Якщо value не вказати, типовим значенням буде on.

`checked`: початковий стан і поточний стан

<input id="task" type="checkbox" checked>

Boolean-атрибут checked задає початково позначений стан. Після того як користувач клацнув checkbox, актуальний стан потрібно читати через JavaScript:

const task = document.querySelector('#task');
console.log(task.checked); // true або false

Сам HTML-атрибут checked не є надійним способом дізнатися поточний стан після взаємодії користувача.

`disabled` і `required`

disabled робить контроль недоступним для взаємодії й фокуса; його значення не надсилається разом із формою. Disabled-контроль також не бере участі в constraint validation. Тому поєднання логіки «це поле обов’язкове» з disabled не має практичного сенсу: поки контроль вимкнений, користувач не може виконати цю вимогу.

<label>
  <input type="checkbox" name="agreement" required>
  Я погоджуюся з правилами
</label>

Для required-checkbox браузер не дозволить успішно надіслати форму, доки прапорець не позначено.

Доступна група checkbox

Якщо кілька checkbox утворюють одну змістову групу, використовуйте <fieldset> і <legend>. Це дає групі зрозумілу назву й покращує роботу допоміжних технологій.

<fieldset>
  <legend>Оберіть сповіщення</legend>
  <label><input type="checkbox" name="notify" value="email"> Email</label>
  <label><input type="checkbox" name="notify" value="browser"> У браузері</label>
</fieldset>

Подія `change`

const news = document.querySelector('#news');

news.addEventListener('change', () => {
  console.log(news.checked ? 'Увімкнено' : 'Вимкнено');
});

Подія change зручна, коли програмі потрібно реагувати саме на зміну стану контролу.

Оригінальні приклади матеріалу

Нижче збережено корисні приклади попередньої версії уроку. Порівнюйте їх із правилами вище й звертайте увагу, який саме стан або атрибут демонструється.

Базовий checkbox

Найпростіший варіант: <input type="checkbox">

За замовчуванням checkbox активний і не позначений.

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

Checkbox із текстом

Рекомендовано розміщувати checkbox усередині <label>:

<label>
    <input type="checkbox">
    Уніфікувати назви, логотипи, описи й посилання
</label>

Тепер галочку можна перемикати натисканням не лише на квадратик, а й на текст.

Позначений checkbox

Щоб checkbox був позначений одразу після завантаження сторінки, використовуйте атрибут checked:

<label>
    <input type="checkbox" checked>
    Завдання виконано
</label>

Користувач зможе зняти галочку, якщо елемент не заблокований.

Заблокований checkbox

Атрибут disabled робить checkbox неактивним:

<input type="checkbox" disabled>

Позначений і заблокований варіант:

<input type="checkbox" checked disabled>

Такий елемент відображає стан, але користувач уже не може його змінити.

Checkbox у списку

Для створення чекліста checkbox можна розмістити всередині <li>:

<ul class="task-list">
    <li class="task-list-item">
        <label>
            <input type="checkbox">
            Перевірити структуру сайту
        </label>
    </li>

    <li class="task-list-item">
        <label>
            <input type="checkbox" checked>
            Створити головну сторінку
        </label>
    </li>
</ul>

Перший пункт буде непозначеним, а другий — позначеним.

Атрибути name і value

Якщо checkbox використовується у формі, йому потрібно задати name:

<label>
    <input type="checkbox" name="newsletter" value="yes">
    Підписатися на новини
</label>

Якщо прапорець позначений, разом із формою буде передано: newsletter=yes

Непозначений checkbox зазвичай не передається.

Обов’язковий checkbox

Для підтвердження згоди можна використати required:

<label>
    <input type="checkbox" name="agreement" required>
    Я погоджуюся з умовами використання
</label>

Форму не можна буде надіслати, доки користувач не поставить галочку.

Чому checkbox може не відображатися

Checkbox часто приховується через CSS:

input[type="checkbox"] {
    appearance: none;
    opacity: 0;
    z-index: -1;
}

У цьому випадку:

appearance: none прибирає стандартне оформлення;
opacity: 0 робить елемент прозорим;
z-index: -1 може перемістити його позаду інших елементів.

Щоб повернути стандартний вигляд checkbox у чеклісті:

.task-list-item input[type="checkbox"] {
    appearance: auto;
    -webkit-appearance: checkbox;
    display: inline-block;
    float: none;
    width: auto;
    height: auto;
    margin-right: 0.5em;
    opacity: 1;
    position: static;
    z-index: auto;
    vertical-align: middle;
}

Якщо використовується стандартний checkbox, додатково створювати символ галочки через label::after не потрібно.

Зміна стану через JavaScript

Позначити checkbox:

document.querySelector('#task').checked = true;

Зняти галочку:

document.querySelector('#task').checked = false;

HTML:

<input type="checkbox" id="task">

Властивість checked повертає true, якщо checkbox позначений, і false, якщо не позначений.

Чи зберігається стан checkbox

Звичайний checkbox не зберігає стан після перезавантаження сторінки. Щоб галочки залишалися позначеними, потрібно використовувати JavaScript, localStorage або серверне збереження даних.

Основні параметри checkbox

Активний checkbox: <input type="checkbox">

Позначений: <input type="checkbox" checked>

Заблокований: <input type="checkbox" disabled>

Позначений і заблокований: <input type="checkbox" checked disabled>

Обов’язковий для форми: <input type="checkbox" required>

Уточнення про збереження стану

Не слід вважати, що після перезавантаження checkbox завжди гарантовано повернеться до початкового стану: браузери можуть мати власну поведінку, а Firefox, зокрема, може зберігати динамічний checked-стан. Якщо застосунок повинен надійно пам’ятати вибір, це потрібно реалізувати явно — наприклад, через localStorage, серверне сховище або стан застосунку.

Етап 3. Первинне закріплення

Для checkbox із name="color" value="blue" передбачте дані форми у двох випадках: прапорець позначений і не позначений.
Поясніть різницю між checked у HTML і element.checked у JavaScript. Яке з них треба читати після кліку користувача?
У формі є <input type="checkbox" required disabled>. Поясніть, чому така комбінація не розв’язує задачу «користувач обов’язково має погодитися».

Етап 4. Продуктивне застосування

Мініпроєкт «Налаштування сповіщень»

Технічне завдання: у папці checkbox-lab створіть форму налаштувань із групою «Сповіщення» та окремим required-checkbox «Я погоджуюся з правилами». Для групи використайте fieldset/legend. Кожен checkbox повинен мати зрозумілий label, name і value. Один інформаційний параметр зробіть disabled. У app.js додайте обробник change, який показує поточний стан вибраних опцій. Перед відправленням форми виведіть через FormData фактично передані пари name/value.

Критерії готовності:

натискання на текст label перемикає відповідний checkbox;
required-checkbox реально блокує відправлення, доки його не позначено;
disabled-checkbox не можна змінити й він не з’являється у FormData;
непозначені checkbox не з’являються у FormData;
Console не містить помилок, а учень може пояснити різницю між атрибутом checked і властивістю .checked.

Етап 5. Підсумки та рефлексія

checked задає початково позначений стан, а .checked показує поточний стан.
disabled вимикає взаємодію, фокус, validation і відправлення значення.
required для checkbox означає, що його потрібно позначити для проходження validation.
name/value визначають дані, які надсилаються лише для позначеного checkbox.
label, а для групи — fieldset/legend, роблять форму зрозумілішою й доступнішою.

Рефлексія: назвіть одну ситуацію, де потрібен checkbox, і одну, де краще використати radio button. Яку перевірку в DevTools ви зробите першою, якщо форма надсилає не ті дані?

Домашнє завдання: розширте мініпроєкт двома опціями й додайте явне збереження вибраних налаштувань у localStorage. Після перезавантаження відновіть стан через JavaScript. У README.md поясніть, чому для цього не достатньо лише HTML-атрибута checked.

Зміст публікації