Справочник HTML & CSS

<input type="checkbox">

Флажок (`checkbox`) — независимый выбор «да/нет»; переключатель (`radio`) — один вариант из группы.

Синтаксис

<input type="checkbox" name="agree" checked>

Атрибуты

Параметр	Тип	Описание
name	text	Имя; у переключателей одной группы оно общее.
value	text	Что уйдёт на сервер, если пункт выбран (по умолчанию `on`).
checked	—	Необязательный. Пункт выбран изначально.

Примеры

Флажки — можно выбрать несколько:

<p>Extras:</p>
<label><input type="checkbox" name="extra" value="sugar"> Sugar</label>
<label><input type="checkbox" name="extra" value="milk" checked> Milk</label>

Переключатели — только один в группе с общим name:

<p>Size:</p>
<label><input type="radio" name="size" value="s"> Small</label>
<label><input type="radio" name="size" value="m" checked> Medium</label>
<label><input type="radio" name="size" value="l"> Large</label>

Цвет флажков меняет accent-color:

<style>
  input { accent-color: crimson; }
</style>
 
<label><input type="checkbox" checked> I agree to the terms</label>

Примечания

Оборачивайте флажки в <label>: тогда кликать можно и по тексту. Невыбранный флажок на сервер не отправляется вовсе. Группу переключателей удобно обернуть в <fieldset> с <legend>.

См. также

<input> — Поле ввода; вид поля задаёт атрибут `type`.
<label> — Подпись к полю формы.
<fieldset>, <legend> — Группа связанных полей формы с заголовком `<legend>`.
type — Вид поля `<input>`: от текста и чисел до даты, цвета и файла.

Вопросы и ответы по теме

В учебнике

Виды полей ввода — Атрибут type у input — текст, почта, пароль, числа и ползунок, даты, флажки, переключатели, цвет и файл.

Спасибо, что читаете!