Веб-формы — Работа с пользовательскими данными

Отмечаемые элементы: флажки и переключатели

Проверяемые элементы — это элементы управления, состояние которых можно изменить, щелкнув их или связанные с ними метки. Есть два типа проверяемых элементов: флажок и переключатель. Оба используют checked атрибут, чтобы указать, отмечен ли виджет по умолчанию или нет.
Стоит отметить, что эти виджеты ведут себя не так, как другие виджеты форм. Для большинства виджетов формы после отправки формы name отправляются все виджеты, у которых есть атрибут, даже если значение не было заполнено. В случае проверяемых элементов их значения отправляются только в том случае, если они проверены. Если они не проверены, ничего не отправляется, даже их имя. Если они отмечены, но не имеют значения, имя отправляется со значением on.
Для максимального удобства использования/доступности рекомендуется заключать каждый список связанных элементов в

, предоставляя

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

.

Флажок

Флажок создается с использованием элемента с type атрибутом, установленным в значение checkbox .

Скопировать в буфер обмена
Связанные элементы флажка должны использовать один и тот же name атрибут. Включение checked атрибута автоматически устанавливает флажок при загрузке страницы. Щелчок по флажку или связанной с ним метке включает и выключает флажок.

Choose all the vegetables you like to eat

• 
  Carrots
  type="checkbox"
  id="carrots"
  name="vegetable"
  value="carrots"
  checked />
  


• 
  Peas
  
  


• 
  Cabbage
  
  

Скопировать в буфер обмена
На следующих снимках экрана показаны флажки по умолчанию, сфокусированные и отключенные в Firefox 71 и Safari 13 в macOS, а также в Chrome 79 и Edge 18 в Windows 10:

Примечание. Любые флажки и переключатели с checked атрибутом при загрузке соответствуют :default псевдоклассу, даже если они больше не отмечены. Все, что в настоящее время проверяется, соответствует: checked псевдоклассу.
Из-за того, что флажки включаются и выключаются, флажок считается кнопкой-переключателем, и многие разработчики и дизайнеры расширяют стиль флажка по умолчанию, создавая кнопки, которые выглядят как тумблеры. Посмотреть пример в действии можно здесь.