HTML Academy · Урок

Группы флажков и переключателей

Позволяйте пользователям выбирать один или несколько вариантов из группы

«Группы флажков и переключателей» — бесплатный урок HTML Academy на CoddyKit. Это урок 3 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения HTML Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс HTML Academy содержит 4 уроков всего.

Флажки

Флажки позволяют пользователям выбрать ноль, один или несколько вариантов:

<label>
  <input type="checkbox" name="terms" value="agreed"> I agree to the Terms
</label>

<!-- Each checkbox is independent -->
<!-- checked attribute = pre-checked -->
<input type="checkbox" name="newsletter" value="yes" checked>

Отправка флажка

Флажки отправляются только в отмеченном состоянии:

<form>
  <input type="checkbox" name="hobby" value="reading"> Reading<br>
  <input type="checkbox" name="hobby" value="coding"> Coding<br>
  <input type="checkbox" name="hobby" value="gaming"> Gaming<br>
</form>
<!-- If reading and coding are checked:
     hobby=reading&hobby=coding -->
<!-- Unchecked boxes send nothing -->

Группы флажков с помощью набора полей

Объединяйте связанные флажки с помощью набора полей и его заголовка:

<fieldset>
  <legend>Select your interests</legend>

  <label><input type="checkbox" name="interest" value="html"> HTML</label>
  <label><input type="checkbox" name="interest" value="css"> CSS</label>
  <label><input type="checkbox" name="interest" value="js"> JavaScript</label>
  <label><input type="checkbox" name="interest" value="python"> Python</label>
</fieldset>

Переключатели

Переключатели позволяют пользователям выбрать ровно один вариант из группы:

<fieldset>
  <legend>Preferred plan</legend>

  <label><input type="radio" name="plan" value="free"> Free</label>
  <label><input type="radio" name="plan" value="pro"> Pro</label>
  <label><input type="radio" name="plan" value="enterprise"> Enterprise</label>
</fieldset>
<!-- All radios in a group share the same name attribute -->
<!-- Selecting one deselects the others -->

Предварительный выбор

Предварительно выберите переключатель или флажок с помощью атрибута checked:

<fieldset>
  <legend>Skill level</legend>
  <label><input type="radio" name="level" value="beginner" checked> Beginner</label>
  <label><input type="radio" name="level" value="intermediate"> Intermediate</label>
  <label><input type="radio" name="level" value="advanced"> Advanced</label>
</fieldset>

Стилизация флажков и переключателей

Пользовательская стилизация флажков с помощью приёма с меткой:

<label class="custom-check">
  <input type="checkbox" name="agree">
  <span class="checkmark"></span>
  I agree
</label>

/* Hide native input, style the span: */
.custom-check input { opacity: 0; width: 0; }
.checkmark {
  width: 1.25rem; height: 1.25rem;
  border: 2px solid #ddd; border-radius: 3px;
  display: inline-block; vertical-align: middle;
}
.custom-check input:checked + .checkmark { background: #0070f3; }

Неопределённое состояние

Флажки могут находиться в неопределённом состоянии (ни отмечены, ни не отмечены):

<input type="checkbox" id="select-all">

<script>
// Set via JavaScript only -- no HTML attribute
document.getElementById('select-all').indeterminate = true;
// Visually shown as a dash (−) in most browsers
// Used for "select all" when some children are checked
</script>

Переключатели без выбора по умолчанию

Иногда лучше не выбирать переключатель заранее:

Предварительный выбор создаёт впечатление, что этот вариант рекомендуется
Если выбор обязателен, но подходящего значения по умолчанию нет (например, пол или тариф), оставьте варианты невыбранными
Добавьте required, чтобы пользователь сделал явный выбор

<fieldset>
  <legend>Gender</legend>
  <label><input type="radio" name="gender" value="m" required> Male</label>
  <label><input type="radio" name="gender" value="f" required> Female</label>
  <label><input type="radio" name="gender" value="nb" required> Non-binary</label>
  <label><input type="radio" name="gender" value="prefer_not" required> Prefer not to say</label>
</fieldset>

Флажок: состояние и значение

Два важных момента об отправке данных флажка:

<!-- The value sent when checked: -->
<input type="checkbox" name="subscribe" value="yes">
<!-- Submits: subscribe=yes when checked -->
<!-- If value is omitted, default value is 'on' -->

<!-- JavaScript checked state: -->
const cb = document.querySelector('input[name="subscribe"]');
console.log(cb.checked);    // true or false
console.log(cb.value);      // 'yes' (always, even when unchecked)

Навигация по группам переключателей с клавиатуры

Поведение групп переключателей при работе с клавиатурой:

Клавиша Tab переводит фокус в группу на выбранный или первый переключатель
Клавиши со стрелками (↑/↓ или ←/→) переключают варианты по кругу
Клавиша Tab выводит фокус из группы на следующий доступный для фокусировки элемент

Шаблон выбора всех

Шаблон выбора и отмены выбора всех флажков:

<label>
  <input type="checkbox" id="select-all"> Select all
</label>
<fieldset id="items">
  <label><input type="checkbox" class="item" value="1"> Item 1</label>
  <label><input type="checkbox" class="item" value="2"> Item 2</label>
  <label><input type="checkbox" class="item" value="3"> Item 3</label>
</fieldset>
<script>
document.getElementById('select-all').addEventListener('change', function() {
  document.querySelectorAll('.item').forEach(cb => cb.checked = this.checked);
});
</script>

Быстрая проверка

Какое правило атрибута name объединяет переключатели в одну группу?

Повторение: флажки и переключатели

Основные сведения о флажках и переключателях:

Флажок — позволяет выбрать несколько вариантов; отправляется только в отмеченном состоянии
Переключатель — позволяет выбрать ровно один вариант; объединение выполняется с помощью name
Для предварительного выбора оба элемента используют атрибут checked
Оборачивайте их в <fieldset> + <legend>
Клавиши со стрелками перемещаются по вариантам внутри группы переключателей

Часто задаваемые вопросы

Урок «Группы флажков и переключателей» бесплатный?

Да — полный текст урока «Группы флажков и переключателей» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс HTML Academy, подпишись на CoddyKit PRO. Курс HTML Academy содержит 4 уроков всего.

Чему я научусь в уроке «Группы флажков и переключателей»?

Позволяйте пользователям выбирать один или несколько вариантов из группы Ты практикуешь HTML Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать HTML Academy?

Предыдущий опыт не требуется. HTML Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 3 из 4.

Сколько времени занимает урок «Группы флажков и переключателей»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке HTML Academy?

Да. Каждый урок HTML Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

← Назад к HTML Academy