Чекбоксы: один из самых используемых графических элементов в мире
Все пользователи интернета хоть раз в жизни встречали такой графический элемент, как чекбокс. Просто не все знают, что это именно чекбокс.
Чекбокс — это графический элемент, который дает пользователю право выбирать что-либо. Практически получается, что чекбокс — это «квадратик» возле пунктов, которые нужно выбрать, в это т «квадратик» пользователь ставит «галочку» для обозначения своего выбора.
Чекбокс — что это такое?
Чекбокс дает примерно такие же функции. Ставя «галочку» в квадратике, человек подтверждает, что он ознакомился с тем пунктом, рядом с которым стоит чекбокс.
Чекбокс информирует пользователя, что у него есть выбор. Иногда такой выбор может быть множественным, чтобы дальше можно было с ним взаимодействовать. Типичный пример множественного чекбокса — это электронная почта. Все мы знаем, что рядом с письмами располагаются «квадратики» для выбора нескольких писем. Мы можем выбрать любое количество писем и потом взаимодействовать с ними:
Чекбокс глазами разработчика
Все разработчики сайтов и приложений знают, что такое чекбокс. Если д л я пользователя чекбокс — это «квадратик с галочкой», то для разработчика чекбокс — это очередной способ взаимодействовать со своим клиентом. Поэтому созданию простого чекбокса нужно уделить должное внимание, чтобы он правильно «работал», а не отпугивал потенциальных клиентов. Для этого есть несколько рекомендаций, к которым стоит прислушаться.
Рекомендации по созданию чекбоксов
Правильное расположение. Правильным расположением пунктов чекбокса считается вертикальное. Это когда пункты списка идут один над другим. И непосредственно рядом с «квадратиком» справа описывается его значение.
Понятные формулировки значений чекбокса. Рядом с «квадратиком» должно быть очень доходчиво написано, что произойдет, если в этом конкретном « квадратике » поставить «галочку». Поэтому выражения с двойной интерпретацией нужно сразу исключать.
Соблюдайте баланс в размере. Не нужно делать слишком мелкие чекбоксы, так как пользователи просто не смогут по ним «попасть» мышкой. Если нет возможности сделать «квадратик» нормального размера, тогда нужно сделать кликабельной всю область чекбокса: « квадратик » вместе с описанием. Кстати, это можно взять за правило и всегда делать описание квадратика кликабельным, чтобы пользователям было удобнее совершать выбор.
Опция «выбрать все». Если ваш чекбокс с большим количеством пунктов для выбора, то обязательно нужно добавить опции «выбрать все» и «убрать все», чтобы пользователи при множественном выборе не «тыкали» каждый пункт отдельно.
Чекбокс — это промежуточный этап. Выбор не должен быть мгновенным. Если вы при помощи чекбокса просите пользователя что-то выбрать, то рядом обязательно должна быть кнопка подтверждения выбора: «подписаться», «сохранить», «отправить» и т. д.
Заключение
Чекбокс — это важный элемент взаимодействия с пользователями на вашем ресурсе. Поэтому относит ь ся к его созданию нужно соответственно:
у него должен быть красивый внешний вид;
все должно быть лаконично и понятно написано;
поведение чекбокса должно быть максимально предсказуемо.
Чекбокс создается для удобства пользователей — не нужно об этом забывать!
Мы будем очень благодарны
если под понравившемся материалом Вы нажмёте одну из кнопок социальных сетей и поделитесь с друзьями.
Чекбокс 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.
UX-дизайн: чекбоксы и переключатели в формах
(Мы продолжаем переводить цикл статей по UX/UI. Полную подборку можно найти в коллекции « Настройки»)
В процессе создания форм дизайнеру часто приходится решать, какой элемент интерфейса использовать для обозначения выбора. Конечно, у всех есть свои наработанные принципы. И тем не менее, есть несколько моментов, которые стоит учесть при подборе элемента выбора.
Интересуетесь свежими статьями по дизайну? Вступайте в группу на Facebook.
Наиболее распространенными элементами выбора являются чекбоксы, переключатели, радиокнопки и выпадающие списки. Каждый из них при правильном использовании работает просто отлично. В этой статье мы поговорим о чекбоксах и переключателях.
Чекбоксы
Мы используем чекбоксы, когда есть список опций, из которых пользователь может выбрать любое количество: хоть ни одной, хоть одну, хоть несколько. Иными словами, каждый чекбокс существует независимо от остальных чекбоксов в списке, а выбор одной опции не снимет флажок с остальных.
Переключатели
Элемент интерфейса “переключатель” символизирует настоящий переключатель, при помощи которого можно что-то выключить или включить.
Обычно переключатели используются для обозначения действия (например, запуск или прекращение чего-то). Так, например, работает выключатель света:
Практические методы использования чекбоксов и переключателей
Используйте стандартные визуальные представления
Чекбокс должен выглядеть как небольшой квадратик, в котором (если его выбирают) появляется небольшая галочка или крестик.
Переключатель должен выглядеть, как тумблер включения/выключения.
Здорово, если момент взаимодействия будет сопровождаться понятным визуальным фидбэком. Небольшая анимация — важный штрих, который делает взаимодействие более эффективным. Это особенно важно на мобильных устройствах, где элементы управления должны казаться осязаемыми, хотя и находятся под слоем стекла.
Располагайте списки вертикально
Постарайтесь делать вертикальные списки, чтобы каждый пункт был в отдельной строке. Это справедливо как для переключателей, так и для чекбоксов. Если вы все-таки решили использовать горизонтальный лейаут, обратите внимание на расстояния между кнопками/чекбоксами и лейблами: должно быть понятно, к какой кнопке относится каждый лейбл. Ниже — пример плохой работы с расстояниями.
Текущее состояние переключателя нужно указывать не на нем, а за его пределами
При проектировании переключателей постарайтесь избежать путаницы с текущим состоянием. Для примера возьмем переключатель из iOS 6 и рассмотрим состояние ON с голубой заливкой.
Как понять, переключатель сейчас в состоянии ON или его нужно передвинуть, чтобы перевести на ON? “ON” — это состояние (прилагательное) или действие (глагол)? Не ясно.
Не нужно путать пользователей: очень важно разграничить действие и состояние. А за счет подсветки текущего состояния дизайн можно сделать еще удобнее:
Используйте в названиях полей утвердительные формулировки
Названия полей должны быть утвердительными и отражать действия, чтобы было понятно, что произойдет при выборе каждой опции. Избегайте отрицательных формулировок, типа “Не присылать мне рассылку” — в этом случае получается, что пользователь должен включить опцию, чтобы действие не происходило.
Пусть чекбокс “включается” по клику на лейбл
Используйте чекбоксы для изменения настроек; не используйте для обозначения действия
Представим себе опцию, которая подразумевает только два возможных варианта. Что использовать в этом случае: переключатель или чекбокс? Основное отличие в том, что чекбокс означает статус, а переключатель — действие. Можете представить себе реальный выключатель — какое действие он выполняет в вашей ситуации? Если картинка сложилась, можете смело использовать для этой опции переключатель.
Посмотрите на пример ниже. Понятно, что переключатель сети Wi-Fi находится в положении “on”. А вот чекбокс немного смущает. Пользователю приходится думать, включен ли Wi-Fi или поставить галочку, чтобы включить его.
Обеспечьте обратную связь от взаимодействия с переключателем/чекбоксом
Вообще, когда пользователь взаимодействует с чекбоксами (например, заполняя какую-то форму), он не ждет мгновенной обратной связи. Изменения произойдут потом, когда он нажмет “сохранить” или “отправить”.
А вот с переключателями все наоборот. Когда пользователь двигает переключатель, он ожидает немедленных изменений. Мы привыкли к этому в реальной жизни: когда щелкаешь выключателем, сразу загорается свет.
А чекбоксы отлично работают в ситуациях, когда нужно сделать несколько промежуточных шагов, чтобы изменения вступили в силу.
Заключение
Выбирая элементы интерфейса, будьте последовательны и предсказуемы. Следуйте стандартам дизайна — и вашим пользователям будет проще понять, как работает тот или иной элемент. В свою очередь, нарушение принципов дизайна делает интерфейс хрупким и непредсказуемым — словно что угодно может случиться без предупреждения.
Впервые опубликовано на babich.biz
Если вам понравилась статья и перевод, дайте нам знать — нажмите ♡
А если у вас есть на примете какая-нибудь классная статья по UX и не только — скиньте нам ссылку, и мы будем рады над ней поработать.
Мобильное приложение «Заметки о психике» | Mental Notes
Подкидывает идеи, как привлечь, удержать и направить внимание пользователя.
Mental notes — это колода из 53 карточек с описанием психофизиологических моделей поведения людей, которые лежат в основе принципов веб-дизайна. Они помогают дизайнерам, проектировщикам лучше понять поведение пользователей и найти эффективные решения при создании дизайна интерфейсов.
Всё о | CSS & HTML & JavaScript
Атрибут checked=»checked»
Делает чекбокс [type=»checkbox»] или радиокнопку [type=»radio»] активной. Активных чекбоксов может быть несколько. В группе с одним name должна быть активной только одна радиокнопка.
Атрибут checked=»checked» можно вызывать с помощью label
Если нажать на содержимое label, то сработает input (будет активным или нет).
описание описание1 описание2
input не обязательно должен располагаться внутри label.
описание описание1 описание2
Атрибут checked=»checked» можно вызывать с помощью нескольких label
Кнопка будет срабатывать вне зависимости от того, на какой label я нажму и вне зависимости от расстояния между тегами label и input.
описание2 описание1 описание11 описание21 описание12 описание22
Псевдокласс :checked
С помощью CSS можно прописать что будет происходить с другими нижестоящими элементами, когда кнопка нажата. Когда кнопка отжата, элементы будут возвращаться к исходному состоянию. Чтобы всё без проволочек было, нужно хорошо разбираться в селекторах.
:checked и селекторы в Google Chrome
Красивые чекбоксы-переключатели «ВЫКЛ ВКЛ». Как задать свой стиль checkbox
Я предпочитаю стандартный вид input, но к этому, этому и этому не осталась равнодушна и приложила свою руку к оформлению и стилизации checkbox. Можно убирать саму кнопку и задать свой стиль :before у label.
Проверка чекбокса на включение/отключение
Проверить все ли чекбоксы помечены
Установить checked в checkbox
Установить checked в radio
Выделить все checkbox одним нажатием кнопки
Решение я нашла тут. Check all
Ограничить область действия функции JavaScript. Функция исполняется только внутри конкретного тега
Если нужно несколько fieldset, то узнаём его порядковый номер при наведении на него курсора мышки и исполняем функции, если он имеет класс shest1.
Первая форма: Вторая форма:
Но лучше с помощью nextElementSibling, previousElementSibling, parentNode. См. код дерева.
Дерево из checkbox
Как сделать полноценное дерево из checkbox
Деактивировать все флажки, кроме нескольких отмеченных
Как задать максимально возможное число чекбоксов, на которые можно установить галки? То есть дать выбрать только 3 любых чекбокса из 5 возможных. Свой выбор можно менять.
Как посчитать сумму значений value у выбранных чекбоксов
80 комментариев:
Анонимный Спасибо Анонимный Админ большое спасибо! Очень помогло. NMitra На здоровье! Анонимный Спасибо большое, статья очень помогла Николай Зуев круто слов нет. только вот почему не написано как работать с пхп? NMitra Потому что с PHP я знакома постольку-поскольку. Анонимный Wow/ Автор-молодецц-такая работа- нашел что искал- группа чекбоксов с одной кнопкой. Спасибо Анонимный добрый день помогите решить задачу
нужно сделать окно над которым будут радио баттоны нажимая на которые, один текст сменяется другим в зависимости от нажатого радио баттона. радио баттоны подписаны 1,2,3.
!но при этом нажимая на радиобаттоны менялась и картинка в хедере!
https://yadi.sk/i/-DjMU_yQWPzhN NMitra Добрый день. Я бы делала JavaScript-ом. Не совсем понимаю как вам помочь. Это нужно знать как минимум ваши селекторы. И такая работа, как правило, оплачивается. Извините. Анонимный как заставить чекбоксы работать в гугл хром? NMitra У меня в браузере все примеры выше работают. У вас не так? Анонимный а есть ли возможность по нажатии на чекбокс сдлеть редактируемыми/(не редактируемыми) текстовые поля, находящиеся на этой же странице? NMitra Легко, только input-ы должны иметь одного родителя
Соколов Игорь профессионально, доступно, большая благодарность NMitra Спасибо за комментарий, Игорь! Анонимный Спасибо! А вот еще простое дерево на CSS
http://jsfiddle.net/NZaw4/1/ NMitra Благодарю за пример, он будет полезен читателям! Посмотрите и тег details (html5) http://jsfiddle.net/NMitra/gfuon23b/2/ ( http://shpargalkablog.ru/2013/04/details-html.html ) для Хрома Анонимный Провел всю ночь в шпаргалке блоггера, так и не удалось добиться результата на основе примеров, которые вы привели.
Я буду очень благодарен, если подскажете:
Имеею таблицу. Строку из 5 ячеек. в 1-ых трех ячейках стоят type-radio.
Как добиться, чтобы при выборе 1 (прозрачный цвет), 2(красный цвет), 3(синий цвет) radio цвет ячеек 4 и 5 соответственно изменялся?
С таблицей целиком получается, а отдельно с TD ячейкой не хочет работать. NMitra Здравствуйте. Проблема или с селекторами или с перебором http://shpargalkablog.ru/2013/10/for-javascript.html
var c = document.querySelectorAll(‘input’);
for (var i = 0; i Максим Бойко Работает. Сложность осталась в следующем. На странице имеется целый список из таких строк. В каждой строке присутствует минимум 2 radio элемента. Этот скрипт, понятное дело, меняет цвет во всех td ячейках. Требуется чтобы каждая строка по отдельности меняла цвет. Прошу помощи. У меня есть нынешний скрипт, который работает, но меняет строку tr целиком.
—>
jQuery(document).ready(function() <
jQuery(«input[value=’нет’]»).click(function () <
var name_input = jQuery(this).attr(«name»);
jQuery(«.» + name_input).css(«background»,»#fff»);
>)
jQuery(«input[value=’обычные’]»).click(function () <
var name_input = jQuery(this).attr(«name»);
jQuery(«.» + name_input).css(«background»,»#acacf9″);
>)
jQuery(«input[value=’опасные’]»).click(function () <
var name_input = jQuery(this).attr(«name»);
jQuery(«.» + name_input).css(«background»,»#ff9494″);
>)
>);
За ранее благодарен за помощь. NMitra Так? http://jsfiddle.net/NMitra/veh95qdf/1/
| червертая | пятая | |||
| третья | червертая | пятая |
FOMUVI Здравствуйте. Можно ли добиться для кнопки radio эффект «Я ознакомлен и принимаю условия договора»?
Вот моя таблица: http://i.imgur.com/gfxTqiG.jpg
Форма методом POST отправляет данные с множество столбцов. Хочу, чтобы кнопка «оценить» не была доступна, пока хотя бы один пункт не выбран. Поигрался с примером, ничего не вышло, может есть секрет какой? Буду рад совету, спасибо. NMitra Здравствуйте, тут пока не запустили родительский селектор только JS. Если на радио-input хоть раз нажать, то потом его снять нельзя: http://jsfiddle.net/NMitra/tuq71ym7/
document.querySelector(‘#svernut’).onclick = function() <
var all = t.querySelectorAll(‘fieldset’);
for(var i=0; i all[i].className = »;
>
>
Я хочу сделать чтобы кнопка, при нажатии показывала невидимый текст.
Пожалуйста отредактируйте код и объясните куда нужно вписывать текст.
Это что-то связанное с концом кода, я прав?
Заранее спасибо NMitra Здравствуйте,
Мне исполнилось 18 лет и я согласен с правилами предоставления услуги
описание 1
описание 2
#vvv <
display: none;
>
#vosem:checked
#eee <
display: none;
>
#vosem:checked
#vvv <
display: inline-block;
>
он работает только если инпут и кнопки расположены рядом, а как сделать что бы работало вне зависимости от положения друг относительно другу? NMitra См. http://jsfiddle.net/NMitra/jh1vtnhr/
Родительский селектор есть, но он ещё пока не поддерживается браузерами. Тогда бы совсем просто было. Анонимный Если местами переставить инпут и кнопки, то уже не работает ((( NMitra Без родительского селектора такое на CSS сделать затруднительно, зато на JS без проблем http://jsfiddle.net/NMitra/jh1vtnhr/1/ Анонимный Супер статья ))) побольше бы таких ) Dmytro Iatskyi Спасибо за статью!
Спасибо! NMitra Внутри функции напишите свою функцию, например, здесь
