Что такое чекбокс на сайте
Чекбокс Checkbox
Чекбокс используется для управления параметром с двумя состояниями.
Чекбокс (от англ. checkbox) — дословно «отметка в квадратике».
При общении с пользователями мы говорим не «чекбокс», а «пункт», см. Глоссарий
Когда использовать
Используйте чекбокс для:
Чекбокс не запускает действие немедленно. Как правило для этого нужно нажать подтверждающую кнопку. Для немедленного включения какого-то режима в интерфейсе лучше подходит тогл.
Описание работы
Клик по названию или по самому чекбоксу приводит к его выбору или снятию выбора.
В списках активная область чекбокса вытягивается на всю высоту строки:
Название группы
Название группы чекбоксов пишется с заглавной буквы.
Называйте группу чекбоксов так, чтобы:
Название чекбокса
Название чекбокса пишется с заглавной буквы.
Формулируйте название чекбокса в положительном ключе. Не используйте отрицательные формулировки, потому что отключение такого чекбокса требует от пользователя произвести в голове логическую операцию c двумя «не». Например, «Не не получать уведомления»:
Интересное исключение — reCAPTCHA. В данном случае отрицание оправданно, потому что оно объясняет само существование этого контрола. Да и отключать такой чекбокс пользователю никогда не придется.
Если пользователю может быть не очевидно, что произойдет, при включении чекбокса, объясните это дополнительным текстом или используйте группу радиокнопок:
Старайтесь не вставлять в название чекбокса ссылку, т.к. самое название уже является интерактивным элементом. Если все-таки хочется добавить ссылку, оставьте первые 1-2 слова обычным текстом:
Расположение
В общем случае группа чекбоксов должна располагаться в 1 столбец. В списке чекбоксов, размещенных горизонтально или в несколько столбцов тяжелее ориентироваться, потому что не всегда очевидна граница группы.
Разбивать чекбоксы на несколько столбцов можно, если это разделение логически обосновано и понятно пользователю.
Группа из одного чекбокса требует аккуратного обращения при верстке формы.
Один чекбокс сразу с двумя подписями выглядит странно:
Чекбокс без названия выглядит уже недопустимо, к тому же в него сложнее целиться:
Если чекбокс поставить в колонку с полями, они будут воспринимается связанными по смыслу, хотя это не так:
Такой проблемы нет, если форма верстается в одну колонку:
Чтобы решить проблему при двухколоночной компоновке, одиночный чекбокс можно заменить на группу радиокнопок:
Если придумать уместное название для двух радиокнопок сложно, можно использовать тогл. Обычно, включение тогла приводит к моментальным изменениям в системе, но даже если такое поведение реализовать невозможно, лучше использовать тогл, чем одиночный чекбокс:
Если чекбокс связан по смыслу с другим элементом формы, их можно группировать:
Валидация
Варианты, которые нельзя выбрать в списке чекбоксов, должны быть заблокированы. Валидация может быть только в том случае, если обязательно выбрать хотя бы один вариант.
Чекбоксы с валидацией выделяются красной рамкой. Если заголовок группы находится слева, текст валидации располагайте под группой чекбоксов:
Если заголовок группы находится над группой чекбоксов, текст ошибки располагайте сразу под заголовком группы:
Если для валидации вы используете тултип, поведение подсказок будет иным. Тултип отображается при наведении на группу чекбоксов.
Если заголовок группы чекбоксов находится слева, располагайте тултип над группой чекбоксов.
Если заголовок группы сверху, выводите тултип справа, напротив первого чекбокса.
Предупреждение о возможной ошибке:
Частично выбранный чекбокс
Иногда списки с чекбоксами используются в справочниках или настройках и содержат дочерние элементы.
Если выбрана только часть дочерних чекбоксов, родительский чекбокс переходит в состояние «частично выбран».
Клик по стрелке сворачивает или разворачивает группу.
Клик в родительский чекбокс или его текст выбирает себя и все дочерние или снимает выбор, не разворачивая/сворачивая группу.
Если выбрана часть дочерних, родительский чекбокс отображается как квадрат.
Клик в квадрат выбирает все дочерние, и себя.
Дизайн
Выбранный чекбокс обозначается символом из шрифта Kontur Iconic.
Название группы выравнивайте по базовой линии первого пункта.
Расстояние между пунктами больше межстрочного расстояния на 10 px. Если в группе есть вложенная группа, то от ее последнего элемента до следующего элемента первого уровня нужно увеличить отступ до 20 px:
Чекбоксы: один из самых используемых графических элементов в мире
Все пользователи интернета хоть раз в жизни встречали такой графический элемент, как чекбокс. Просто не все знают, что это именно чекбокс.
Чекбокс — это графический элемент, который дает пользователю право выбирать что-либо. Практически получается, что чекбокс — это «квадратик» возле пунктов, которые нужно выбрать, в это т «квадратик» пользователь ставит «галочку» для обозначения своего выбора.
Чекбокс — что это такое?
Чекбокс дает примерно такие же функции. Ставя «галочку» в квадратике, человек подтверждает, что он ознакомился с тем пунктом, рядом с которым стоит чекбокс.
Чекбокс информирует пользователя, что у него есть выбор. Иногда такой выбор может быть множественным, чтобы дальше можно было с ним взаимодействовать. Типичный пример множественного чекбокса — это электронная почта. Все мы знаем, что рядом с письмами располагаются «квадратики» для выбора нескольких писем. Мы можем выбрать любое количество писем и потом взаимодействовать с ними:
Чекбокс глазами разработчика
Все разработчики сайтов и приложений знают, что такое чекбокс. Если д л я пользователя чекбокс — это «квадратик с галочкой», то для разработчика чекбокс — это очередной способ взаимодействовать со своим клиентом. Поэтому созданию простого чекбокса нужно уделить должное внимание, чтобы он правильно «работал», а не отпугивал потенциальных клиентов. Для этого есть несколько рекомендаций, к которым стоит прислушаться.
Рекомендации по созданию чекбоксов
Правильное расположение. Правильным расположением пунктов чекбокса считается вертикальное. Это когда пункты списка идут один над другим. И непосредственно рядом с «квадратиком» справа описывается его значение.
Понятные формулировки значений чекбокса. Рядом с «квадратиком» должно быть очень доходчиво написано, что произойдет, если в этом конкретном « квадратике » поставить «галочку». Поэтому выражения с двойной интерпретацией нужно сразу исключать.
Соблюдайте баланс в размере. Не нужно делать слишком мелкие чекбоксы, так как пользователи просто не смогут по ним «попасть» мышкой. Если нет возможности сделать «квадратик» нормального размера, тогда нужно сделать кликабельной всю область чекбокса: « квадратик » вместе с описанием. Кстати, это можно взять за правило и всегда делать описание квадратика кликабельным, чтобы пользователям было удобнее совершать выбор.
Опция «выбрать все». Если ваш чекбокс с большим количеством пунктов для выбора, то обязательно нужно добавить опции «выбрать все» и «убрать все», чтобы пользователи при множественном выборе не «тыкали» каждый пункт отдельно.
Чекбокс — это промежуточный этап. Выбор не должен быть мгновенным. Если вы при помощи чекбокса просите пользователя что-то выбрать, то рядом обязательно должна быть кнопка подтверждения выбора: «подписаться», «сохранить», «отправить» и т. д.
Заключение
Чекбокс — это важный элемент взаимодействия с пользователями на вашем ресурсе. Поэтому относит ь ся к его созданию нужно соответственно:
у него должен быть красивый внешний вид;
все должно быть лаконично и понятно написано;
поведение чекбокса должно быть максимально предсказуемо.
Чекбокс создается для удобства пользователей — не нужно об этом забывать!
Мы будем очень благодарны
если под понравившемся материалом Вы нажмёте одну из кнопок социальных сетей и поделитесь с друзьями.
Как создавать и стилизовать чекбоксы: подробный гайд
Чекбокс — это компонент ввода на сайте, который обычно выглядит как пустой квадрат в невыбранном состоянии, а если его выбирают, то он меняет вид — в квадрате появляется галочка.
Чекбоксы можно найти на любом сайте в интернете. Их используют, когда нужно выбрать ответ на вопрос из нескольких вариантов или чтобы отметить больше одного ответа.
Вы можете увидеть этот компонент, когда вам предлагают оформить подписку на рассылку новостей на сайте или просят прочитать и согласиться с политикой конфиденциальности.
В отличие от тех же радиокнопок, которые позволяют выбрать только один ответ, чекбоксы могут «включать» и «выключать» разные значения.
Иногда чекбоксы на сайте отмечены по умолчанию. Например, для регистрации пользователю обязательно нужно согласиться с обработкой персональных данных. В этом случае галочка уже может стоять в поле, чтобы дать понять, что это условие обязательно для регистрации на сайте.
В этой статье мы разберем, как создать чекбоксы и как настроить стиль, разметку и цвета с помощью HTML и CSS.
Атрибуты чекбокса
Синтаксис чекбокса в HTML выглядит очень просто:
Он обычно содержит несколько атрибутов:
Как создать стильный чекбокс
По умолчанию
Если мы пользуемся только HTML и не настраиваем стили при помощи CSS, то стиль чекбокса по умолчанию выглядит вот так:
Стиль по умолчанию
HTML-код такого чекбокса выглядит довольно просто:
По сути, кроме указания вам не нужно ничего делать.
Чекбокс с галочкой
Тогда мы получим чекбокс с галочкой:
Чекбокс с галочкой
Обязательный чекбокс
Используя другой атрибут, можно прописать в коде обязательный чекбокс. Это значит, что пользователь не сможет отправить форму, пока не отметит нужный чекбокс. Этот атрибут часто используется, если нужно принять какие-либо условия.
Чтобы установить такой чекбокс, в строку ввода нужно добавить дополнительный атрибут:
И если пользователь не поставил галочку и пытается отправить форму, то у него не получится это сделать. Всплывет окно с подсказкой:
Кастомный чекбокс
Теперь перейдем к настройке кастомного чекбокса. На самом деле стилизовать сам чекбокс очень проблематично. Но существует простой трюк, который позволит вам использовать любой элемент, который вы хотите.
В чем суть трюка? Мы спрячем окошко для галочки и создадим вместо него поддельный чекбокс, который и будем настраивать с помощью CSS.
Скрываем чекбокс: способ первый
И квадрат с галочкой исчезнет:
Квадрата с галочкой нет
Теперь наш чекбокс выглядит как простой текст, но на самом деле в структуре кода видно, что окно с галочкой просто не отображается у пользователя на экране:
Скрываем чекбокс: способ второй
Текст больше не съезжает
Настройка стиля: закруглим края и добавим цвет
Теперь можно приступать к настройке своего собственного стиля чекбокса. Например, можно сделать окошко для галочки с закругленными краями, прописав:
Если вы хотите, чтобы чекбокс выделялся на фоне черного текста, то настройте собственную цветовую палитру. Можно менять как цвет обводки, так и фона внутри. Для этого впишите код желаемого цвета, например:
И установите стиль границ:
border: 2px solid #33475B
Так у нас получился серо-синий цвет чекбокса:
Добавляем фон
Чтобы настроить собственное отображение выбранного чекбокса, на галочки и фон нужно потратить чуть больше времени. Придется вручную прописать стиль, позицию и настройки отображения галочки. Мы создали собственный чекбокс, который выглядит так:
Чтобы сделать такой простой стиль, необходимо написать несколько строк кода:
Кроме того, можно даже создавать сложные чекбоксы с анимацией. Если вы хотите посмотреть, как выглядят анимированные чекбоксы, то загляните в статью Custom HTML and CSS Checkbox Examples You Can Use Too.
Как сделать правильные чекбоксы на сайте – 8 наших рекомендаций
Правильные и понятные чекбоксы нужны, чтобы пользователи не совершали ошибок при взаимодействии с формами на сайте и понимали, что произойдет при нажатии на чекбокс. Другими словами, чекбокс – это аналог подписи в бумажном документе, поэтому пользователь должен хорошо понимать, где и под чем он подписывается. 
Что такое чекбокс
Чекбокс (галочка, флажок, птичка) — это один из самых распространенных элементов управления, предоставляющих простой выбор из двух вариантов — вы либо согласны с чем-то, либо нет.
✓ Пример правильного чекбокса с сайта экспресс-доставки SPSR
При заполнении формы пользователь нередко сталкивается с элементами управления (контролами) для выбора каких-то вариантов (опций). Самые распространенные элементы выбора — это чекбоксы, переключатели, радиокнопки и списки. Мы начнём нашу серию статей об элементах выбора с подробного разбора чекбоксов.
Почему важно делать правильные чекбоксы?
Взаимодействие пользователя с формами ввода данных влияет на общее впечатление пользователя о сайте. Формы ввода — это например вход на сайт при помощи ввода логина и пароля, заполнение платежных данных или анкеты, введение адреса для доставки и прочее.
Несмотря на то, что чекбоксы считаются самыми простыми и понятными элементами управления, они нередко являются источниками ошибок при работе пользователей с вашими продуктами.
Когда используются чекбоксы?
Основная функция чекбокса — информировать,что у пользователя есть выбор. И он может либо согласиться, поставив галочку, либо отказаться.
Дополнительная функция чекбоксов – это обозначение какой-то группы из элементов для дальнейших групповых действий с ними. Мы используем чекбоксы, когда существует несколько опций, из которых пользователь может выбрать либо все, либо несколько, либо одну или ни одной. Каждый чекбокс существует независимо от остальных в списке.
Самый простой пример группы чекбоксов – это список писем в почте и возможность групповых операций с ними.
✓ Пример чекбокса в интерфейсе Gmail
Советы, как правильно использовать чекбокс
1. Не перемудрите и используйте стандартный вид чекбокса
Традиционно чекбоксы имеют квадратную форму. Пользователи распознают визуальные объекты по форме и стандартная квадратная форма чекбокса – это очень важно. Это связано с тем, что мы воспринимаем то, что ожидаем и ‘эта особенность описана у нас в Золотом правиле №4. Визуальная ясность. То есть пользователь должен легко распознавать элементы управления по их внешнему виду.
Чекбокс должен выглядеть как небольшой квадратик, в котором в случае выбора появляется небольшая галочка. Не стоит делать чекбоксы ромбовидными или круглыми, независимо от того, что скажут вам специалисты по маркетингу или дизайнеры.
✓ Пример понятного чекбокса из интерфейса почты Яндекса
Для того, чтобы пользователю было понятно, какая опция сейчас включена или выбрана, отлично подойдет цветовая индикация. Поставленная галочка — это понятная метафора выбора. Рекомендуем использовать и цвет фона и галочку для отображения выбора.
2. Правильно располагайте списки чекбоксов
Правильно — это значит вертикально, чтобы каждый пункт был в отдельной строке.
Если вы больше любите горизонтальные списки, обратите внимание на расстояния между чекбоксами и их подписями: пользователь должен понимать, к какому чекбоксу какая подпись относится.
3. Используйте в подписях чекбоксов понятные утвердительные формулировки
Подписи к чекбоксам должны быть утвердительными и отражать действия, чтобы было понятно, что произойдет при выборе каждой опции. Избегайте отрицательных формулировок, типа “Не присылать мне рассылку” — в этом случае получается, что пользователь должен включить опцию, чтобы действие не происходило. Помните, что пользователи думают о своих целях, а не об инструментах для их исполнения.
✓ Удачный пример формулировки на сайте Ostrovok.ru
✘ Пример отрицательной формулировки в настройках Microsoft Word
4. Не делайте размер чекбокса слишком маленьким
✓ Чекбокс маленького размера на сайте Ostrovok.ru, который превратили в кнопку
✓ Чекбокс удобного размера на сайте Аэрофлота
5. Чекбоксы должны реагировать не только при нажатии на квадратик, но и при нажатии на их подписи
Таким образом пользователю будет легче работать с большей площадью. Кроме того, это более удобно для пользователя, поскольку он привык, что можно нажать на любую часть элемента.
✓ Чекбокс небольшого размера на сайте Аэрофлота, который реагирует на нажатие подписи
6. Используйте опции «выбрать все» и «убрать все»
Чтобы облегчить работу пользователя с большим количеством чекбоксов (более 5), в интерфейсе должны быть предусмотрены опции «Выбрать все чекбоксы» и «Снять все чекбоксы». Представьте, что вам нужно выбрать, скажем, 14 пунктов из 20 в списке. Гораздо удобнее и быстрее будет сначала выбрать все, а потом снять ненужные галочки.
✓ Правильный пример использования опции “выбрать все” торрент-клиента μTorrent
7. Чекбокс не должен запускать действие мгновенно
Важно понимать, что, когда пользователь взаимодействует с чекбоксами, он не ждет мгновенной обратной связи. Действие произойдет тогда, когда пользователь нажмет какую-то кнопку: “сохранить”, “отправить”, “подписаться”. То есть чекбоксы хорошо работают в ситуациях, когда нужно сделать несколько промежуточных шагов, чтобы изменения вступили в силу.
✓ Удачный пример использования чекбокса на сайте Аэрофлота
8. У чекбоксов, которые открывают дополнительные элементы, надписи должны оканчиваться многоточием
Это необходимо, чтобы пользователь понимал, что при нажатии на чекбокс появится некое новое содержимое и от пользователя потребуются дополнительные действия.
В каком случае выбрать чекбокс, а в каком – переключатель?
Тут все просто – используйте чекбоксы для изменения настроек, а переключатели для обозначения действия.
Представьте опцию, которая подразумевает лишь два возможных варианта. Так вот чекбокс будет обозначать статус, а переключатель — какое-то конкретное действие. То есть можно спросить себя, должна ли настройка произвести какой-то мгновенный эффект и нужно ли пользователю проверить свои настройки перед сохранением.
Заключение
Как видно из нашей статьи, чекбоксы являются важными элементами управления. Пользователь фактически использует их как подпись под документом, поэтому важно сделать их внешний вид привычным и понятным, а их поведение максимально предсказуемым. Также особенностью чекбоксов является их маленький размер, так что для удобства пользователей важно дать им возможность нажимать не только на сам квадратик, но и на подписи к нему.
А у вас на сайте пользователям удобно взаимодействовать с чекбоксами? → Узнайте у наших экспертов прямо сейчас.
Материалы по теме
Что такое чекбокс для сайта? Живые примеры!
Что такое чекбокс для сайта?
Разработчики интернет-проектов, веб-приложений и программ для ПК должны быть осведомлены о том, что такое чекбоксы. Однако обычные интернет-пользователи, не знающие нюансов программирования, далеко не всегда понимают значение данного термина. Стоит заметить, что в этом непонятном слове нет ничего необычного. Чекбоксы – это обычный элемент управления, применяемый в процессе разработки веб-форм.
Обыкновенная галочка
«Галочка» знакома любому человеку. Этот символ впервые встречается еще в школе. Обычно его используют для выбора правильного ответа в процессе прохождения тестирования или анкетирования.
Сегодня такие «галочки» используются и в интернете. Даже обычная процедура регистрации на любом интернет-портале не может обойтись без этого символа.
«Галочки» активно применяются и в интернет-торговле. При помощи чекбоксов пользователи, которые оформляют заказ, выбирают те товары, которые им необходимы. Чекбоксы также применяются в компьютерных играх, точнее – в процессе их инсталляции. Например, «установщик» может попросить пользователя выбрать необходимое ПО.
Применение чекбоксов в процессе веб-разработки
Веб-разработчики видят в чекбоксах не просто символ «галочки». Это обусловлено тем, что создание данного символа намного сложнее, чем клик по выбранному квадратику. Для разработки чекбоксов принято использовать язык разметки HTML. Для создания этого элемента нужно прописать следующий код:
Принцип работы
Чекбокс работает по очень простому принципу: отрицание или согласие. Если форма отмечена, веб-браузер получает данные и отправляет их на сервер для дальнейшей обработки. Если форма не отмечена, то и сервер не получит данных для последующей обработки.
Нужно заметить, что эти элементы имеют атрибут, принимающий значение value. Этот атрибут не является обязательным. Веб-разработчки также применяют атрибут, указывающий на отметку, которая была поставлена заранее (то есть по умолчанию). Данный атрибут называется checked. В переводе на русский язык он означает «отмечено».
Особенностью чекбокса является тот факт, что он предусматривает возможность выбора из множества доступных вариантов. При этом пользователь может поставить «галочки» во всех подходящих квадратиках. Эта особенность для разработчиков имеет архиважное значение, так как они должны предусмотреть разные имена для нескольких созданных чекбоксов.
Радиокнопки
Если перед веб-разработчиком стоит задача создания элемента, который позволяет выбрать лишь один вариант из большого количества представленных, то ему целесообразно воспользоваться радиокнопками. Некоторые разработчики называют такой элемент зависимыми чекбоксами.
Используя возможности HTML и JavaScript, разработчики могут создать флажок, нажатие на который позволит выделить все чекбоксы. Ввиду того, что такая функция противоречит принципу чекбоксов, она применяется крайне редко.
Чекбоксы могут иметь несколько атрибутов. Ранее говорилось об атрибуте checked. Также стоит сказать несколько слов об атрибуте name. Он необходим для присваивания чекбоксам различные имена.
Благодаря этому существует возможность идентификации каждого отдельного флажка. Для отправки данных на сервер также используется атрибут value.
В завершение следует заметить, что чекбоксы – это элементы, функционирующие в выбранном, невыбранном и неопределенном режимах.