Флажки и чекбоксы (input type='checkbox')

Тренажер по HTML для пользователей с начальным уровнем подготовки.

Опубликовано 04.04.2025
Просмотры 28
Автор
Рек. время прохождения 2 минуты
Упражнений 7
Комментарии 0
Тренажер HTML
Этот тренажер посвящен работе с флажками, также известными как чекбоксы (`<input type='checkbox'>`). Это один из ключевых элементов форм, позволяющий пользователю выбирать один или несколько вариантов из предложенного списка. В ходе выполнения заданий вы пройдете путь от создания простого одиночного флажка до стилизации и группировки нескольких опций. Вы научитесь связывать флажки с текстовыми метками для улучшения доступности, управлять их состоянием по умолчанию (включен или выключен), а также делать их неактивными. Задания построены по принципу 'от простого к сложному', чтобы вы могли постепенно закрепить материал на практике.
Список тем

Создание простого флажка

id: 37846_checkbox-1-basic-creation

Давайте начнем с самого простого. Ваша задача — создать один HTML-элемент, который будет отображаться как стандартный флажок (чекбокс). Пока что он будет без подписи, просто для демонстрации базового синтаксиса.

CSS
body {
  padding: 15px;
  font-family: sans-serif;
  background-color: #f4f7f6;
}
input[type='checkbox'] {
  width: 20px;
  height: 20px;
}
HTML
<input input1="checkbox">
Чтобы создать флажок, используется тег `<input>`. У этого тега есть атрибут `type`, которому необходимо задать специальное значение, чтобы он превратился в чекбокс. Вспомните или посмотрите, какое значение отвечает за создание флажка.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Связывание флажка с текстом

id: 37846_checkbox-2-label-linking

Флажок без описания бесполезен. Чтобы связать текст с флажком, используется тег `<label>`. Это не только поясняет назначение флажка, но и позволяет активировать его, нажимая на сам текст. Свяжите созданный флажок с его описанием.

CSS
body {
  padding: 15px;
  font-family: sans-serif;
  background-color: #f4f7f6;
}
.container {
  display: flex;
  align-items: center;
  gap: 8px;
}
input[type='checkbox'] {
  width: 20px;
  height: 20px;
}
label {
  cursor: pointer;
}
HTML
<div class="container">
  <input type="checkbox" id="input1">
  <label for="input2">Согласие на обработку данных</label>
</div>
Связь между `<input>` и `<label>` устанавливается через атрибуты `id` у флажка и `for` у метки. Значения этих атрибутов должны быть абсолютно одинаковыми. Придумайте и укажите одинаковый идентификатор для обоих полей.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Флажок, отмеченный по умолчанию

id: 37846_checkbox-3-default-checked

Иногда требуется, чтобы флажок был уже нажат при загрузке страницы. Например, для опции 'Подписаться на рассылку'. Сделайте так, чтобы флажок в примере был отмечен по умолчанию.

CSS
body {
  padding: 15px;
  font-family: sans-serif;
  background-color: #f4f7f6;
}
.container {
  display: flex;
  align-items: center;
  gap: 8px;
}
label {
  cursor: pointer;
}
HTML
<div class="container">
  <input type="checkbox" id="subscribe" input1>
  <label for="subscribe">Подписаться на новости</label>
</div>
Для того чтобы флажок был отмечен по умолчанию, необходимо добавить к тегу `<input>` специальный логический атрибут (атрибут без значения). Его название — `checked`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Неактивный (disabled) флажок

id: 37846_checkbox-4-disabled-state

В некоторых случаях опцию нужно показать, но не давать пользователю возможности ее изменить. Например, если условие является обязательным и не может быть отключено. Сделайте флажок неактивным.

CSS
body {
  padding: 15px;
  font-family: sans-serif;
  background-color: #f4f7f6;
}
.container {
  display: flex;
  align-items: center;
  gap: 8px;
}
label {
  cursor: not-allowed;
  color: #888;
}
HTML
<div class="container">
  <input type="checkbox" id="mandatory" checked input1>
  <label for="mandatory">Обязательное условие</label>
</div>
Аналогично атрибуту `checked`, для блокировки элемента используется другой логический атрибут — `disabled`. Добавьте его к тегу `<input>`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Группировка флажков

id: 37846_checkbox-5-grouping-fieldset

Когда у вас есть несколько связанных опций, их полезно сгруппировать визуально и семантически. Для этого используются теги `<fieldset>` и `<legend>`. Оберните список опций в `fieldset` и добавьте заголовок 'Выберите топпинги' с помощью `legend`.

CSS
body {
  padding: 15px;
  font-family: sans-serif;
  background-color: #f4f7f6;
}
fieldset {
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 15px;
}
legend {
  font-weight: bold;
  padding: 0 5px;
}
.option {
  margin-bottom: 10px;
}
HTML
<input1>
  <input2>Выберите топпинги</input2>
  <div class="option">
    <input type="checkbox" id="cheese">
    <label for="cheese">Сыр</label>
  </div>
  <div class="option">
    <input type="checkbox" id="pepperoni">
    <label for="pepperoni">Пепперони</label>
  </div>
</input1>
Сначала откройте тег `<fieldset>` перед первым флажком. Затем, сразу после него, добавьте тег `<legend>` с нужным текстом. В самом конце, после всех флажков, закройте тег `</fieldset>`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Имена для отправки на сервер

id: 37846_checkbox-6-name-attribute

Чтобы данные из флажков можно было отправить на сервер, каждый `<input>` должен иметь атрибут `name`. Для группы связанных флажков `name` часто делают одинаковым. Добавьте всем флажкам одинаковое имя `toppings`.

CSS
body {
  padding: 15px;
  font-family: sans-serif;
}
fieldset {
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 15px;
}
.option { margin-bottom: 10px; }
HTML
<fieldset>
  <legend>Выберите топпинги</legend>
  <div class="option">
    <input type="checkbox" id="cheese" input1="toppings" value="cheese">
    <label for="cheese">Сыр</label>
  </div>
  <div class="option">
    <input type="checkbox" id="mushrooms" input2="toppings" value="mushrooms">
    <label for="mushrooms">Грибы</label>
  </div>
</fieldset>
Каждому тегу `<input type="checkbox">` нужно добавить атрибут `name` со значением `toppings`. Например: `name="toppings"`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Кастомный вид флажка

id: 37846_checkbox-7-custom-style

Стандартные флажки выглядят по-разному в разных браузерах. С помощью CSS их можно стилизовать. В этом задании CSS уже написан, но он сработает, только если HTML-структура будет правильной. Расположите `<label>` так, чтобы он следовал сразу за `<input>`, чтобы сработал селектор соседства `+`.

CSS
body { font-family: sans-serif; display: flex; justify-content: center; align-items: center; height: 300px; }
.custom-checkbox input {
  display: none; /* Прячем настоящий чекбокс */
}
.custom-checkbox label {
  position: relative;
  padding-left: 30px;
  cursor: pointer;
}
/* Рисуем кастомный чекбокс */
.custom-checkbox label::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 20px;
  height: 20px;
  border: 2px solid #3498db;
  border-radius: 4px;
  background-color: white;
}
/* Рисуем галочку, когда чекбокс отмечен */
.custom-checkbox input:checked + label::before {
  background-color: #3498db;
  content: '✔';
  color: white;
  text-align: center;
  line-height: 20px;
}
HTML
<div class="custom-checkbox">
  <input type="checkbox" id="custom-style">
  <input1 for="custom-style">Кастомный флажок</input1>
</div>
CSS-правило `.custom-checkbox input:checked + label::before` означает, что стиль применяется к псевдоэлементу `::before` у `<label>`, который является непосредственным соседом (`+`) отмеченного (`:checked`) флажка. Ваша задача — убедиться, что тег `<label>` идет сразу после тега `<input>` внутри общего родителя.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку
Предыдущая темаСледующая тема
НайтиКурс.Ру