<input type="checkbox"> значение атрибута HTML

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

Попробуйте

<fieldset>
  <legend>Choose your monster's features:</legend>

  <div>
    <input type="checkbox" id="scales" name="scales" checked />
    <label for="scales">Scales</label>
  </div>

  <div>
    <input type="checkbox" id="horns" name="horns" />
    <label for="horns">Horns</label>
  </div>
</fieldset>

p,
label {
  font:
    1rem "Fira Sans",
    sans-serif;
}

input {
  margin: 0.4rem;
}

Значение

Строка, представляющая значение флажка. Она не отображается на стороне клиента, но на сервере это value, передаваемое вместе с данными, отправленными с 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

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

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

value

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

switch

Логический атрибут, применимый только к полям ввода checkbox. Если он указан, это означает, что checkbox представляет собой переключатель switch, а не обычный checkbox. Он изменяет внешний вид элемента управления checkbox, но его поведение остается таким же, как у обычного checkbox.

Примечание: Этот атрибут позволяет пользовательским агентам предоставлять вспомогательным технологиям семантику ARIA switch без необходимости явно задавать role="switch" в документах. Разметка и API похожи на те, что используются для флажков, за исключением того, что псевдокласс :indeterminate никогда не соответствует элементу.

Предупреждение: Этот атрибут все еще является экспериментальным и поддерживается лишь ограниченным числом браузеров. Браузеры, которые его не поддерживают, игнорируют атрибут.

Использование флажков

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

Обработка нескольких флажков

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

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

<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>

Флажок в виде переключателя

В следующем примере показано, как сделать так, чтобы флажок выглядел и работал как переключатель «вкл./выкл.».

<form>
  <fieldset>
    <legend>Adjust your setting</legend>
    <div>
      <label for="theme">Dark mode</label>
      <input type="checkbox" name="theme" id="theme" switch checked />
    </div>
    <div>
      <label for="notifications">Notifications</label>
      <input type="checkbox" name="notifications" id="notifications" switch />
    </div>
    <button type="submit">Submit</button>
  </fieldset>
</form>

Увеличение области нажатия флажков

В приведенных выше примерах вы могли заметить, что переключить флажок можно, щелкнув как по нему самому, так и по связанному с ним элементу <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;
  }
}

<form>
  <fieldset>
    <legend>Complete the recipe</legend>
    <div>
      <input type="checkbox" id="enchantment" name="enchantment" />
      <label for="enchantment">Enchantment table</label>
      <ul>
        <li>
          <input type="checkbox" id="book" name="ingredient" value="book" />
          <label for="book">Book</label>
        </li>
        <li>
          <input
            type="checkbox"
            id="diamonds"
            name="ingredient"
            value="diamonds" />
          <label for="diamonds">Diamonds (x2)</label>
        </li>
        <li>
          <input
            type="checkbox"
            id="obsidian"
            name="ingredient"
            value="obsidian" />
          <label for="obsidian">Obsidian (x4)</label>
        </li>
      </ul>
    </div>
  </fieldset>
</form>

Проверка

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

Примеры

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

HTML

<form>
  <fieldset>
    <legend>Choose your interests</legend>
    <div>
      <label>
        <input type="checkbox" id="coding" name="interest" value="coding" />
        Coding
      </label>
    </div>
    <div>
      <label>
        <input type="checkbox" id="music" name="interest" value="music" />
        Music
      </label>
    </div>
    <div>
      <label>
        <input type="checkbox" id="art" name="interest" value="art" />
        Art
      </label>
    </div>
    <div>
      <label>
        <input type="checkbox" id="sports" name="interest" value="sports" />
        Sports
      </label>
    </div>
    <div>
      <label>
        <input type="checkbox" id="cooking" name="interest" value="cooking" />
        Cooking
      </label>
    </div>
    <div>
      <label>
        <input type="checkbox" id="other" name="interest" value="other" />
        Other
      </label>
      <input
        type="text"
        id="otherValue"
        name="other"
        aria-label="Other interest" />
    </div>
    <div>
      <button type="submit">Submit form</button>
    </div>
  </fieldset>
</form>

CSS

html {
  font-family: sans-serif;
}

form {
  width: 600px;
  margin: 0 auto;
}

div {
  margin-bottom: 10px;
}

fieldset {
  background: cyan;
  border: 5px solid blue;
}

legend {
  padding: 10px;
  background: blue;
  color: cyan;
}

JavaScript

const otherCheckbox = document.querySelector("#other");
const otherText = document.querySelector("#otherValue");
otherText.style.visibility = "hidden";

otherCheckbox.addEventListener("change", () => {
  if (otherCheckbox.checked) {
    otherText.style.visibility = "visible";
    otherText.value = "";
  } else {
    otherText.style.visibility = "hidden";
  }
});

Техническая сводка

Спецификации

Совместимость с браузерами

html.elements.input.type_checkbox

html.elements.input.switch

См. также

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