Флажки

Флажки (жарг. чекбоксы) используют, когда необходимо выбрать произвольное количество вариантов из предложенных или поставить галочку в одном пункте. Если требуется выбор одного варианта из нескольких, то для этого следует предпочесть переключатели (radiobutton). Флажок создается следующим образом.

<input type="checkbox">

Атрибуты флажков перечислены в табл. 1.

Табл. 1. Атрибуты флажков
АтрибутОписание
nameИмя флажка для идентификации поля.
disabledБлокирует флажок для выбора.
formИдентификатор формы для связывания флажка с элементом <form>.
typeДля флажка значение должно быть checkbox.
checkedПредварительное выделение флажка.
valueЗадаёт, какой текст будет отправлен на сервер.
autofocusЭлемент получает фокус после загрузки документа.
requiredПеред отправкой формы обязательно следует поставить галочку.

Как обычно, флажки нельзя вкладывать внутрь ссылок и кнопок.

Использование флажков показано в примере 1.

Пример 1. Создание флажков

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Флажки</title>
 </head>
 <body>
  <form>
   <p>В каких годах произошли самые известные извержения вулкана Кракатау?</p>
   <p><input type="checkbox" name="a" value="1417"> 1417</p>
   <p><input type="checkbox" name="a" value="1680" checked> 1680</p>
   <p><input type="checkbox" name="a" value="1883" checked> 1883</p>
   <p><input type="checkbox" name="a" value="1934"> 1934</p>
   <p><input type="checkbox" name="a" value="2010"> 2010</p>
   <p><input type="submit" value="Отправить"></p>
  </form>
 </body>
</html>

Поскольку флажки здесь являются одной группой, то значение атрибута name у них одинаковое. В результате получим следующее (рис. 1).

Вид флажков в браузере

Рис. 1. Вид флажков в браузере

Перейти к заданиям

Автор и редакторы

Автор: Влад Мержевич
Последнее изменение: 09.08.2016
Редакторы: Влад Мержевич
Курс по вёрстке сайта на CSS Grid