Флажки

Флажки (жарг. чекбоксы) используют, когда необходимо выбрать произвольное количество вариантов из предложенных или поставить галочку в одном пункте. Если требуется выбор одного варианта из нескольких, то для этого следует предпочесть переключатели (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. Вид флажков в браузере

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

Автор: Влад Мержевич
Последнее изменение: 02.06.2020
Редакторы: Влад Мержевич
Как научиться разрабатывать сайты