Пошук уроків, статей та іншого контенту
Створюйте прапорці checkbox для незалежного вибору кількох опцій і керуйте їхнім станом.
Прапорець (checkbox) — це елемент форми, який дає змогу вибрати або скасувати вибір окремої опції.
<input type="checkbox">Прапорці підходять, коли користувач може:
вибрати кілька опцій одночасно;
увімкнути або вимкнути певну функцію;
підтвердити згоду з умовами;
вказати, які категорії його цікавлять.
На відміну від перемикачів (
radio<label>
<input type="checkbox">
Отримувати сповіщення
</label>Елемент label містить текст, пов’язаний із прапорцем. Якщо натиснути на текст, стан прапорця також зміниться.
Зручніше явно зв’язувати label та input за допомогою атрибутів for і id:
<input type="checkbox" id="notifications">
<label for="notifications">Отримувати сповіщення</label>Значення атрибута for має збігатися зі значенням id відповідного прапорця.
Щоб дозволити користувачу вибрати кілька варіантів, створіть окремий прапорець для кожної опції:
<p>Оберіть категорії:</p>
<input type="checkbox" id="frontend">
<label for="frontend">Frontend</label>
<input type="checkbox" id="backend">
<label for="backend">Backend</label>
<input type="checkbox" id="design">
<label for="design">Дизайн</label>Користувач може вибрати будь-яку комбінацію:
лише Frontend;
Frontend і Backend;
усі три опції;
жодної опції.
Зазвичай прапорці об’єднують у контейнер і розташовують кожну опцію в окремому рядку:
<div>
<label>
<input type="checkbox" name="topic" value="frontend">
Frontend
</label>
</div>
<div>
<label>
<input type="checkbox" name="topic" value="backend">
Backend
</label>
</div>
<div>
<label>
<input type="checkbox" name="topic" value="design">
Дизайн
</label>
</div>typeАтрибут type="checkbox" визначає, що елемент є прапорцем:
<input type="checkbox">idid ідентифікує конкретний прапорець. Він потрібен, якщо label пов’язується з input через for:
<input type="checkbox" id="terms">
<label for="terms">Я погоджуюся з умовами</label>namename визначає назву даних, які надсилаються разом із формою:
<input type="checkbox" name="topic" value="frontend">Кілька прапорців можуть мати однаковий name, якщо вони належать до однієї групи опцій.
valuevalue визначає значення вибраної опції:
<input type="checkbox" name="topic" value="frontend">Якщо прапорець вибрано, форма надсилає пару topic=frontend.
Якщо прапорець не вибрано, його значення не надсилається разом із формою.
checkedАтрибут checked позначає прапорець вибраним за замовчуванням:
<input type="checkbox" name="topic" value="frontend" checked>
<label>Frontend</label>Такий прапорець буде вибрано одразу після відкриття сторінки. Користувач все одно зможе скасувати вибір.
disabledАтрибут disabled робить прапорець недоступним для зміни:
<input type="checkbox" id="premium" disabled>
<label for="premium">Преміум-функції</label>Недоступний прапорець зазвичай відображається світлішим кольором.
Прапорці часто використовують усередині form:
<form>
<fieldset>
<legend>Оберіть технології</legend>
<label>
<input type="checkbox" name="technology" value="html">
HTML
</label>
<label>
<input type="checkbox" name="technology" value="css">
CSS
</label>
<label>
<input type="checkbox" name="technology" value="javascript">
JavaScript
</label>
</fieldset>
<button type="submit">Надіслати</button>
</form>fieldset об’єднує пов’язані елементи форми, а legend описує їхню групу.
Якщо користувач вибере HTML і JavaScript, форма передасть приблизно такі значення:
technology=html
technology=javascriptДля підтвердження умов часто використовують один прапорець із атрибутом required:
<form>
<label>
<input type="checkbox" name="agreement" required>
Я погоджуюся з умовами використання
</label>
<button type="submit">Зареєструватися</button>
</form>Форма не буде надіслана, доки користувач не встановить цей прапорець.
Прапорці можна стилізувати через псевдоклас :checked. Він вибирає прапорець, який зараз позначено:
<label class="option">
<input type="checkbox" name="subscribe">
<span>Підписатися на розсилку</span>
</label>.option {
display: inline-flex;
align-items: center;
gap: 8px;
cursor: pointer;
}
.option input {
width: 18px;
height: 18px;
accent-color: #2563eb;
}
.option input:checked + span {
color: #2563eb;
font-weight: 700;
}Селектор input:checked + span означає:
знайти вибраний input;
знайти його сусідній елемент span;
застосувати до span вказані стилі.
Властивість accent-color змінює основний колір стандартного прапорця браузера.
Цей приклад створює форму з кількома незалежними прапорцями та стилізує вибрані опції:
<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Прапорці</title>
<style>
body {
font-family: Arial, sans-serif;
padding: 24px;
background-color: #f3f4f6;
}
form {
max-width: 360px;
padding: 24px;
background-color: white;
border-radius: 12px;
}
fieldset {
border: 0;
padding: 0;
margin: 0;
}
legend {
margin-bottom: 16px;
font-size: 20px;
font-weight: bold;
}
.option {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 12px;
cursor: pointer;
}
.option input {
width: 18px;
height: 18px;
accent-color: #2563eb;
}
.option input:checked + span {
color: #2563eb;
font-weight: bold;
}
button {
margin-top: 8px;
padding: 10px 16px;
border: 0;
border-radius: 6px;
color: white;
background-color: #2563eb;
cursor: pointer;
}
button:hover {
background-color: #1d4ed8;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>Оберіть технології</legend>
<label class="option">
<input type="checkbox" name="technology" value="html">
<span>HTML</span>
</label>
<label class="option">
<input type="checkbox" name="technology" value="css">
<span>CSS</span>
</label>
<label class="option">
<input type="checkbox" name="technology" value="javascript">
<span>JavaScript</span>
</label>
</fieldset>
<button type="submit">Зберегти вибір</button>
</form>
</body>
</html>У цьому прикладі:
кожна технологія має власний прапорець;
користувач може вибрати кілька технологій;
усі прапорці мають однаковий name;
різні значення визначаються через value;
вибраний текст стає синім і жирним;
форма містить кнопку надсилання.
У HTML стан прапорця змінюється автоматично після натискання. Для стилізації використовуйте CSS-псевдоклас :checked.
input:checked {
accent-color: green;
}У цьому правилі зелений колір застосовується лише до вибраного прапорця.
Стан прапорця також можна використовувати для зміни стилю сусідніх елементів:
<label class="task">
<input type="checkbox">
<span>Виконати завдання</span>
</label>.task input:checked + span {
text-decoration: line-through;
color: gray;
}Після вибору текст буде перекреслено. Це зручно для списків завдань.
Дотримуйтеся кількох правил:
використовуйте label для кожного прапорця;
робіть текст опції достатньо зрозумілим;
не використовуйте лише колір для пояснення стану;
об’єднуйте пов’язані прапорці через fieldset і legend;
не приховуйте стандартний прапорець без створення зрозумілої заміни.
Правильний зв’язок із label також збільшує область натискання, тому користувачу легше вибрати опцію.
label та inputНеправильно:
<input type="checkbox" id="email">
<label>Отримувати листи</label>Натискання на текст може не змінити стан прапорця.
Правильно:
<input type="checkbox" id="email">
<label for="email">Отримувати листи</label>id у кількох прапорцівЗначення id має бути унікальним на сторінці:
<input type="checkbox" id="html">
<label for="html">HTML</label>
<input type="checkbox" id="css">
<label for="css">CSS</label>Не використовуйте один id для різних прапорців.
checked="false"У HTML наявність булевого атрибута означає true, незалежно від його текстового значення:
<input type="checkbox" checked="false">Цей прапорець усе одно буде вибрано.
Щоб прапорець не був вибраний за замовчуванням, просто не додавайте атрибут checked:
<input type="checkbox">valueЯкщо прапорець надсилає дані форми, бажано явно вказувати value:
<input type="checkbox" name="topic" value="html">Так сервер отримає зрозуміле значення вибраної опції.
Якщо користувач має вибрати лише один варіант із кількох, прапорці можуть бути неправильним вибором. Прапорці призначені для незалежного вибору, тому кілька з них можуть бути вибрані одночасно.
Прапорець створюється за допомогою <input type="checkbox">.
Кілька прапорців дають змогу незалежно вибирати кілька опцій.
label робить текст опції клікабельним.
id і for зв’язують прапорець із його підписом.
name визначає назву даних форми, а value — значення вибраної опції.
checked вибирає прапорець за замовчуванням.
required робить вибір обов’язковим.
Псевдоклас :checked дає змогу стилізувати вибраний стан.
fieldset і legend допомагають об’єднувати пов’язані прапорці та покращують доступність.