Флажки
Флажки (жарг. чекбоксы) используют, когда необходимо выбрать произвольное количество вариантов из предложенных или поставить галочку в одном пункте. Если требуется выбор одного варианта из нескольких, то для этого следует предпочесть переключатели (radiobutton). Флажок создается следующим образом.
Атрибуты флажков перечислены в табл. 1.
| Атрибут | Описание |
|---|---|
| name | Имя флажка для идентификации поля. |
| disabled | Блокирует флажок для выбора. |
| form | Идентификатор формы для связывания флажка с элементом . |
| type | Для флажка значение должно быть checkbox . |
| checked | Предварительное выделение флажка. |
| value | Задаёт, какой текст будет отправлен на сервер. |
| autofocus | Элемент получает фокус после загрузки документа. |
| required | Перед отправкой формы обязательно следует поставить галочку. |
Как обычно, флажки нельзя вкладывать внутрь ссылок и кнопок.
Использование флажков показано в примере 1.
Пример 1. Создание флажков
Поскольку флажки здесь являются одной группой, то значение атрибута name у них одинаковое. В результате получим следующее (рис. 1).
Рис. 1. Вид флажков в браузере
Флажок checkbox
Флажок checkbox представляет собой элемент (галочку или птичку) HTML формы, который может иметь два состояния: отмечен и не отмечен.
Флажок создается с помощью тега input с атрибутом type в значении checkbox . Внешний вид флажка:
Отмеченный чекбокс будет посылать на сервер содержимое атрибута value . Если атрибута value у чекбокса нет — он будет посылать строку «on». Если чекбокс не отмечен — ничего не будет присылаться на сервер не зависимо от наличия атрибута value .
Пример
Давайте сделаем два флажка checkbox: пусть первый будет отмечен (так как ему дан атрибут checked ), а второй — нет:
Пример . Заблокированный чекбокс
Давайте посмотрим на заблокированный с помощью атрибута disabled флажок. При нажатии на него его состояние не будет меняться:
Пример . Заблокированный и отмеченный чекбокс
А теперь давайте заблокируем флажок, в отмеченном состоянии, атрибутом disabled и зададим ему атрибут checked :
Смотрите также
- радио переключатели,
с помощью которых можно сделать выбор - атрибут checked ,
который делает флажок чекбокс отмеченным - псевдокласс checked ,
который задает стили для отмеченных чекбоксов - атрибут disabled ,
который блокирует элементы форм - тег label ,
который задает подсказку для чекбокса
Флажки
Флажки (жарг. чекбоксы) используют, когда необходимо выбрать любое количество вариантов из предложенного списка. Если требуется выбор лишь одного варианта, то для этого следует предпочесть переключатели (radiobutton). Флажок создается следующим образом.
Атрибуты флажков перечислены в табл. 1.
| Атрибут | Описание |
|---|---|
| checked | Предварительное выделение флажка. |
| name | Имя флажка для его идентификации обработчиком формы. |
| value | Задаёт, какое значение будет отправлено на сервер. |
Использование флажков показано в примере 1.
Пример 1. Создание флажков
HTML5 IE Cr Op Sa Fx
Флажки В каких годах произошли самые известные извержения вулкана Кракатау?
1417
1680
1883
1934
2010
В результате получим следующее (рис. 1).
Рис. 1. Вид флажков в браузере
Флажок
Использование флажков является хорошим вариантом, если вы хотите, чтобы ваши посетители могли выбирать несколько элементов из группы вариантов. В связи с этим флажок работает напротив переключателя, который позволяет выбрать только один элемент из группы вариантов. В своей самой простой форме флажок — это просто элемент input со свойством type, установленным в checkbox, например:
Однако, как и для всех элементов ввода, вам нужно определить name, чтобы он был пригоден для использования — без имени элемент не будет идентифицирован при отправке формы обратно на сервер для обработки. Вы также хотите установить value — это будет значение, отправленное на сервер, если флажок был установлен. Вот пример:
В этом примере, если флажок установлен и форма отправлена на сервер, сервер сможет прочитать элемент формы «nameOfChoice», и его значение будет равно 1.
Установлен флажок или нет?
Обратите внимание, что все флажки до сих пор не были проверены с самого начала — пользователь должен будет взаимодействовать с флажком, чтобы изменить его состояние с не отмеченного на отмеченный. Это может быть тем, что вы хотите, но иногда вы хотите, чтобы флажок был установлен по умолчанию, либо чтобы предложить пользователю выбор, либо потому, что вы показываете флажок со значением, которое соответствует существующему параметру, например, из базы данных. К счастью, это очень просто — просто добавьте атрибут checked к флажку:
В старые времена XHTML, где каждый атрибут всегда имел значение, даже логические атрибуты (boolean attributes), это выглядело бы так:
Любой способ должен работать во всех современных браузерах, но первый способ короче и более похож на HTML5.
Множественный выбор
До сих пор все наши флажки были простыми переключателями, например для определения, включена ли опция или нет. Флажки отлично подходят для этого, но, как уже упоминалось, они также могут быть использованы, чтобы позволить пользователю выбор возможных вариантов. Позвольте мне показать вам отличный пример, где это имеет смысл:
Cats
Dogs
Birds
Обратите внимание, что теперь у нас есть несколько флажков, но все они имеют одно и то же имя («favorite_pet»), но разные значения (например, «Dogs»). Когда эта форма отправляется обратно на сервер, все эти флажки будут представлены одним именем, но значением будет массив из 0-3 элементов. Если бы вы использовали радиокнопки вместо флажков, пользователю было бы разрешено выбирать только одно любимое животное, но с помощью флажков он мог выбрать ни одного из них, всех или некоторых из них.
Ярлыки для флажков
Если вы проверили предыдущий пример, вы заметите, что мы можем поместить текст рядом с флажком, но это по-прежнему две разные вещи — вы не можете щелкнуть текст, чтобы вызвать флажок. Это может быть очень раздражающим для пользователя, но, к счастью для нас, это легко решить: просто используйте элемент label! Вот основной пример, чтобы показать вам разницу:
Cats
Два флажка — один без метки и один с. Они могут выглядеть почти одинаково, но тот, у которого есть метка, может быть активирован нажатием как фактического флажка, так и прикрепленной метки. Это хорошо, если вы сидите на настольном ПК с мышью, но еще лучше, когда вы используете сенсорное устройство, такое как смартфон, где маленькие флажки могут быть трудно ударить пальцем.
Ярлык очень прост — он использует атрибут for, чтобы присоединиться к элементу формы с соответствующим атрибутом id (обратите внимание, что у меня есть «dogs» в обоих местах).
Динамическая работа с флажком
Как и любой другой элемент DOM, вы можете управлять флажком, используя JavaScript. В связи с этим было бы интересно проверить, установлен ли флажок или нет, и, возможно, добавить некоторую логику, чтобы контролировать, сколько опций может выбрать пользователь. Чтобы показать вам, как это можно сделать, я расширила предыдущий пример (селектор «Любимый питомец»), включив в него магию JavaScript:
Cats
Dogs
Birds
function ValidatePetSelection()
<
var checkboxes = document.getElementsByName("favorite_pet");
var numberOfCheckedItems = 0;
for(var i = 0; i < checkboxes.length; i++)
<
if(checkboxes[i].checked)
numberOfCheckedItems++;
>
if(numberOfCheckedItems > 2)
<
alert("You can't select more than two favorite pets!");
return false;
>
> Позвольте мне быстро показать, что делает этот код. У нас та же форма, что и раньше, но мы добавили обработчик событий для каждого из флажков, который заставляет их вызывать функцию JavaScript (ValidatePetSelection), когда пользователь щелкает их. В этой функции мы получаем все соответствующие флажки, используя функцию getElementsByName, а затем перебираем их, чтобы увидеть, проверены они или нет — для каждого проверяемого элемента мы добавляем к числу. Затем проверяется этот номер, и если он превышает два, мы предупреждаем пользователя о проблеме (можно выбрать только двух питомцев), а затем возвращаем false. Возврат false не позволит установить флажок.
Это был простой пример того, как работать с флажками с помощью JavaScript. Вы можете сделать гораздо больше, особенно если вы используете JavaScript-фреймворк, такой как jQuery, который значительно облегчит выбор и управление элементами DOM.
Итог
Флажки позволяют вам устанавливать выбираемые параметры для ваших пользователей — либо включать или выключать один параметр, либо разрешать несколько вариантов выбора, как в примере «Любимый питомец». Вы должны использовать метки, чтобы связать свой флажок и текст описания, чтобы позволить пользователю щелкнуть большую область при манипулировании флажком — это также хорошо для поддержки технологий, таких как программы чтения с экрана, для людей с нарушениями зрения.
This article has been fully translated into the following languages:
Is your preferred language not on the list? Click here to help us translate this article into your language!