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

Checkbox — це елемент HTML-форми, який дозволяє користувачеві позначати один або кілька варіантів. Його використовують у формах, налаштуваннях, списках завдань і покрокових чеклістах.

Базовий 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>

Висновок

Для створення активного HTML-чекліста достатньо використати <input type="checkbox"> без атрибута disabled.

Атрибут checked задає початково позначений стан, disabled блокує елемент, а required вимагає обов’язкового вибору.

Checkbox краще розміщувати всередині <label>, щоб користувач міг перемикати його натисканням на текст. Якщо прапорець не відображається, потрібно перевірити CSS-властивості appearance, opacity, display, position і z-index.

HTML checkbox, input checkbox, checked HTML, disabled checkbox, required checkbox, HTML чекліст, task list HTML, checkbox CSS