Чекбокси в HTML

Вивчаємо елемент checkbox для створення перемикачів вибору в HTML-формах.

Чекбокси в HTML

Чекбокс (checkbox) — це елемент форми, який дозволяє користувачу вибрати один або декілька варіантів із запропонованого списку.

Створення checkbox

Для створення чекбокса використовується тег input з атрибутом type="checkbox".

<input 
  type="checkbox"
>

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

Кілька чекбоксів

На відміну від радіокнопок, checkbox дозволяє вибрати декілька варіантів одночасно.

<form>

  <label>
    <input type="checkbox">
    HTML
  </label>

  <label>
    <input type="checkbox">
    CSS
  </label>

  <label>
    <input type="checkbox">
    JavaScript
  </label>

</form>

Атрибут checked

Атрибут checked дозволяє зробити чекбокс вибраним за замовчуванням.

<input 
  type="checkbox"
  checked
>

checkbox створюється через input type="checkbox".
Можна вибрати декілька чекбоксів одночасно.
checked встановлює активний стан за замовчуванням.
label робить натискання зручнішим для користувача.

❗ Важливо:

Чекбокси часто використовують для налаштувань, згоди з правилами, вибору категорій та фільтрів.

Практичне завдання

📌 Завдання:

№1. Створіть форму з чекбоксом.
№2. Додайте текст біля нього за допомогою label.
№3. Зробіть один чекбокс вибраним за замовчуванням.

<!-- Початковий код -->

<input type="checkbox">

💡 Показати підказку

Використайте атрибут checked, щоб чекбокс був увімкнений одразу після відкриття сторінки.

✅ Показати відповідь

<label>
  <input 
    type="checkbox"
    checked
  >
  Я приймаю умови
</label>