<input type="checkbox">

<input> элементы типа checkbox по умолчанию отображаются как флажки (галочки), которые устанавливаются при активации, как вы можете видеть в официальной форме государственного документа. Точный вид зависит от конфигурации операционной системы, на которой работает браузер. Обычно это квадрат, но могут быть и закругленные углы. Флажок позволяет выбрать отдельные значения для отправки в форме (или нет).

Строка, представляющая значение флажка. Это не отображается на стороне клиента, но на сервере это значение, передаваемое данным, отправляемыми вместе с name. Рассмотрим следующий пример:

<form>
  <div>
    <input
      type="checkbox"
      id="subscribeNews"
      name="subscribe"
      value="newsletter" />
    <label for="subscribeNews">Subscribe to newsletter?</label>
  </div>
  <div>
    <button type="submit">Subscribe</button>
  </div>
</form>

В этом примере у нас есть имя subscribe, и значение newsletter. При отправке формы пара имя/значение будет subscribe=newsletter.

Если атрибут value был опущен, значение по умолчанию для флажка — on, поэтому в этом случае отправленные данные будут subscribe=on.

В дополнение к общим атрибутам, общим для всех элементов <input>, элементы типа "checkbox" поддерживают следующие атрибуты.

checked

Булевый атрибут, указывающий, установлен ли этот флажок по умолчанию (при загрузке страницы). Он не указывает, установлен ли этот флажок в настоящее время: если состояние флажка изменится, этот атрибут не отразит изменение. (Обновляется только атрибут checked объекта HTMLInputElement.)

Примечание: В отличие от других элементов управления вводом, значение флажка включается в отправляемые данные только в том случае, если флажок в настоящее время checked. В этом случае значение атрибута value флажка передается как значение элемента ввода, или on , если атрибут value не задан. В отличие от других браузеров, Firefox по умолчанию сохраняет динамическое состояние галочки элемента <input> при переходе на страницу. Используйте атрибут autocomplete для управления этой функцией.

value

Атрибут value используется всеми элементами <input>, но для элементов типа checkbox он имеет специальное назначение: при отправке формы на сервер отправляются только флажки, которые в данный момент установлены, а отсылаемое значение — значение атрибута value. Если атрибут value не указан, он по умолчанию равен строке on. Это показано в разделе Значение выше.

Мы уже рассмотрели самое основное применение флажков выше. Теперь давайте рассмотрим другие распространённые функции и методы, связанные с флажками, которые вам понадобятся.

В приведенном выше примере содержался только один флажок; в реальных ситуациях вам, вероятно, придется столкнуться с несколькими флажками. Если они совершенно не связаны, то вы можете просто обрабатывать их все по отдельности, как показано выше. Однако, если они связаны, дела обстоят не так просто.

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

<fieldset>
  <legend>Choose your interests</legend>
  <div>
    <input type="checkbox" id="coding" name="interest" value="coding" />
    <label for="coding">Coding</label>
  </div>
  <div>
    <input type="checkbox" id="music" name="interest" value="music" />
    <label for="music">Music</label>
  </div>
</fieldset>

В этом примере вы увидите, что мы присвоили каждому флажку то же самое name. Если оба флажка будут установлены, а затем форма отправлена, вы получите набор пар имя/значение, отправленных следующим образом: interest=coding&interest=music. Когда эта строка достигнет сервера, вам нужно будет разобрать её не как ассоциативный массив, поэтому будут получены все значения, а не только последнее значение interest. Для одного из методов, используемых с Python, см. Обработка нескольких флажков с одной переменной на стороне сервера, например.

Чтобы установить флажок по умолчанию, укажите атрибут checked. См. пример ниже:

<fieldset>
  <legend>Choose your interests</legend>
  <div>
    <input type="checkbox" id="coding" name="interest" value="coding" checked />
    <label for="coding">Coding</label>
  </div>
  <div>
    <input type="checkbox" id="music" name="interest" value="music" />
    <label for="music">Music</label>
  </div>
</fieldset>

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

Помимо доступности, это ещё одна причина для правильной настройки элементов <label> в ваших формах.

Флажок может иметь состояние неопределённости. Это устанавливается с помощью свойства indeterminate объекта HTMLInputElement через JavaScript (его нельзя установить с помощью HTML-атрибута):

inputInstance.indeterminate = true;

Когда indeterminate равно true, в большинстве браузеров флажок отображается с горизонтальной линией в поле (внешне похожей на дефис или знак минуса) вместо отметки/галочки.

Для этого свойства не так много случаев применения. Самый распространённый — когда доступен флажок, который "владеет" рядом подвариантов (которые также являются флажками). Если все подварианты установлены, то флажок-владелец также установлен, а если они все сняты, то флажок-владелец также снят. Если хотя бы один или несколько подвариантов имеют другое состояние, чем остальные, состояние флажка-владельца становится неопределённым.

Это можно увидеть в следующем примере (спасибо CSS Tricks за вдохновение). В этом примере мы отслеживаем ингредиенты, которые мы собираем для рецепта. Когда вы устанавливаете или снимаете флажок ингредиента, функция JavaScript проверяет общее количество отмеченных ингредиентов:

• Если не отмечено ни одного, флажок названия рецепта устанавливается в снятое.
• Если отмечено один или два, флажок названия рецепта устанавливается в indeterminate.
• Если отмечено все три, флажок названия рецепта устанавливается в checked.

Таким образом, в этом случае состояние indeterminate используется для обозначения того, что сбор ингредиентов начат, но рецепт ещё не завершен.

const overall = document.querySelector("#enchantment");
const ingredients = document.querySelectorAll("ul input");

overall.addEventListener("click", (e) => {
  e.preventDefault();
});

for (const ingredient of ingredients) {
  ingredient.addEventListener("click", updateDisplay);
}

function updateDisplay() {
  let checkedCount = 0;
  for (const ingredient of ingredients) {
    if (ingredient.checked) {
      checkedCount++;
    }
  }

  if (checkedCount === 0) {
    overall.checked = false;
    overall.indeterminate = false;
  } else if (checkedCount === ingredients.length) {
    overall.checked = true;
    overall.indeterminate = false;
  } else {
    overall.checked = false;
    overall.indeterminate = true;
  }
}

Флажки поддерживают валидацию (доступную для всех элементов <input>). Однако большинство из ValidityState всегда будут false. Если у флажка есть атрибут required, но он не установлен, то ValidityState.valueMissing будет true.

Следующий пример — расширенная версия примера с "несколькими флажками", который мы видели выше. В нём больше стандартных опций, плюс флажок "другое", который при выборе отображает поле ввода для указания значения опции "другое". Это достигается с помощью простого блока JavaScript. В примере используются неявные метки, где <input> находится непосредственно внутри <label>. Поле ввода без видимой метки включает атрибут aria-label, который предоставляет его доступное имя. В этом примере также используется CSS для улучшения стилизации.

• :checked, :indeterminate: селекторы CSS, которые позволяют форматировать флажки в зависимости от их текущего состояния
• HTMLInputElement: API DOM HTML, который реализует элемент <input>
• Таблица совместимости свойств CSS для элементов форм