Программирование на Python и Objective-C в Mac OS

Программирование на Python и Objective-C под Mac OS и для iPhone / iPod Touch

Радиобаттон это: Radio buttons, checkboxes и другие виды селекторов

Содержание

Radio buttons, checkboxes и другие виды селекторов

Выбери меня! Выбери меня! Нет, выбери меня! В сегодняшней статье мы рассмотрим селекторы и чем они различаются. В отличие от большинства других моих статей, основное внимание будет уделено двум компонентам (радиокнопкам (radio buttons) и флажкам (checkboxes), а также их сравнению с парой других селекторов.

Читайте также: Советы по дизайну селекторов (checkboxes, radio buttons, switches и тд.)

1. Что такое селекторы

Селектор (selector) – это поле ввода, в котором пользователь должен выбрать один (или несколько) параметров, в отличие от текстового поля, в котором пользователь имеет полную свободу действий. Селекторы, как прически Lady Gaga, бывают разных форм и стилей. Выпадающие списки, флажки, переключатели, ползунки и т.д. – это разные типы селекторов, но они не похожи друг на друга. Основное функциональное различие между этими типами селекторов состоит в том, сколько вариантов пользователь может выбрать: один или несколько.

В идеальном мире, где нет голода, браконьерства, парниковых газов или преступлений, я бы ходатайствовала об изменении названия радиокнопок на «одиночные селекторы», а флажков на «мультиселекторы». Я думаю, что подобные названия намного лучше описывают их функциональность, но, увы, эти устаревшие названия слишком укоренились, и, вероятно, останутся с нами навсегда.

2. Анатомия флажков и радиокнопок

Хотя, в этой статье мы рассмотрим различные типы селекторов, мы сосредоточимся на радиокнопках (radio buttons) и флажках (checkboxes). Ниже их анатомия.

Анатомия радиокнопок и флажков

Примечание: Иногда люди говорят «radio button»/ «checkbox», когда имеют ввиду метку и селектор вместе, в то время, как в других случаях они подразумевают только селектор. Я предпочитаю последний вариант.

3. В чем разница между радиокнопками и флажками

Радиокнопки и флажки очень похожи, за исключением нескольких ключевых отличий. Основное отличие состоит в том, что с помощью радиокнопок вы можете выбрать только один элемент, а с помощью флажков – любое количество. Я собиралась составить таблицу, чтобы объяснить это, но не стала. Не потому, что а) это звучало скучно, б) Medium не позволяет вставлять таблицы, а поэтому у меня была лучшая идея:

Викторина! Ура! Давайте посмотрим, кто даст 100% правильных ответов.

1) Сколько элементов можно выбрать в стандартном компоненте флажков (если не указано иное)?

  1. 1
  2. 3
  3. Неограниченное кол-во
  4. 0

2) Какова форма селектора радиокнопки?

  1. Квадрат
  2. Круг
  3. Шестиугольник
  4. Треугольник

3) Если вы хотите создать интерфейс, в котором пользователь сможет выбрать несколько начинок для мороженого, вы должны использовать:

  1. Радиокнопки
  2. Флажки

4) Если вы хотите создать интерфейс, в котором пользователь может выбрать тип банковского счета, который он может открыть, вы должны использовать:

  1. Радиокнопки
  2. Флажки

5) Если бы вы хотели создать селектор «Подписаться на рассылку», какой тип вы бы использовали?

  1. Радиокнопка
  2. Флажок

6) Выберите на картинке ниже вариант с радиокнопкой.

  1. A
  2. B

ОТВЕТЫ:
1): 3. Неограниченное кол-во
2): 2. Круг
3): 2. Флажки
4): 1. Радиокнопки
5): 2. Флажок
6): 1. A

Вы справились! (Надеюсь).

4. Распространенные стили селекторов

Ниже представлен ряд распространенных стилей флажков и радиокнопок, с которыми вы можете столкнуться в Интернете.

Стандартный стиль (радиокнопки / флажки)

Самый стандартный стиль флажков и радиокнопок – это кнопки с «галочками» или заполненные кружки. Я предпочитаю кнопки с галочкой, если вы не имеете дело с образовательными тестами (см. ниже).

Стандартный стиль с галочкамиСтандартный стиль без галочек

Стиль кнопки в тестах (радиокнопки / флажки)

Когда пользователь отвечает на вопросы теста или викторины, мы должны убедиться в двух вещах: 1) что он может четко видеть, какие ответы выбирает, 2) что он не запутается, когда получит фидбек на свой ответ.

Если вы посмотрите на приведенный ниже пример, то увидите, что «галочка» может сбить с толку – кажется, что эти ответы верны, хотя еще не проверены.

Селекторы викторины, показывающие, что наличие галочки вызывает путаницу

Основной стиль с изображением (радиокнопки/ флажки)

Хотя этот стиль селектора может дать пользователю лучшее представление о том, что он выбирает, я редко использую его, поскольку, все равно изображение всегда будет слишком маленьким, чтобы его можно было разглядеть.

Радиокнопки и флажки с изображениями. Изображения: (с unSplash): Гамбургер от @amir_v_ali | Чикенбургер от @amir_v_ali | Веджибургер от @swimstaralex | Сыр от @swimstaralex | Помидоры от @lmablankers | Латук от @producteurslocaux

Изображения в стиле сетки (одно / несколько)

Я предпочитаю этот стиль изображений базовому, поскольку вы можете сделать изображения намного больше, и они лучше смотрятся.

Селекторы с сеткой изоражений. Изображения (с unSplash): Гамбургер от @amir_v_ali | Чикенбургер от @amir_v_ali | Веджибургер от @swimstaralex | Сыр от @swimstaralex | Помидоры от @lmablankers | Латук от @producteurslocaux

Впервые я узнал об этом стиле в тестах Buzzfeed. Они просто показывают изображение без текста. Если вы используете этот макет, пожалуйста, убедитесь, что у вас есть альтернативный текст для пользователей, использующих программу чтения с экрана или на случай плохого подключение к Интернету.

Пример одиночного селектора в стиле сетки. Скриншот: https://www.buzzfeed.com/jessicamisener/which-sandwich-are-you

Многоуровневые флажки

Многоуровневые флажки необходимы, если элементы нужно разделить на группы. Также обратите внимание, что, если выбраны лишь несколько дочерних элементов, родительская категория выбирается только частично.

Многоуровневые флажки

Это один из наиболее сложных элементов интерфейса, потому что верхний элемент (родительский) действует одновременно, как селектор и, как аккордеон. А что, если вы нажмете на метку, она выберет селектор или откроет / закроет аккордеон? Я не смогла найти определенное исследование того, какой вариант лучше, поскольку это необычный паттерн, но в прошлом я делала метку не селектором, а частью аккордеона. Пишите в комментариях, если у вас есть предложения, как решить эту дилемму.

Принудительный выбор

Иногда вам нужно разрешить пользователям выбирать только определенное количество элементов. Если пользователь выберет на одно значение больше разрешенного количества, самый первый выбранный вариант будет заменен («вытеснен») последним выбранным вариантом.

Флажки с принудительным выбором

Стиль кнопки (одиночный / множественный выбор)

Этот стиль позволяет вам складывать много разных элементов в стек. Это означает, что вы можете сэкономить место и иметь больше вариантов ответа. Поскольку этот паттерн не является распространенным, я предлагаю вам сообщить пользователю, сколько вариантов он может выбрать. Хотя нет причин не использовать его для одиночных селекторов, я никогда не встречала такой вариант.

Селектор в стиле кнопки

Этот стиль очень распространен, когда пользователя просят выбрать несколько тегов контента (хотя он может не знать об этом). В приведенном ниже примере Apple Music просит пользователей выбрать свои любимые жанры, которые, в свою очередь, порекомендуют песни и исполнителей в зависимости от выбора пользователя.

Выбор жанра Apple Music при регистрации. Изображение: https://www.businessinsider.com/apple-will-shut-down-beats-music-on-november-30-2015-11?IR=T

Переключатель (одиночный выбор)

Переключатель (toggle) чаще всего используется для настроек и позволяет пользователю выбирать между вариантами да / нет.

На мобильном устройстве сам переключатель обычно находится в крайнем правом положении, а метка – в крайнем левом. Это сделано для того, чтобы большому пальцу правой руки было легче менять параметры.

Пример переключателя

5. Состояния

Флажки и радиокнопки должны изменять свое состояние / внешний вид, чтобы пользователи знали, что они были выбраны. Нам нужно добавить эти маленькие визуальные подсказки, чтобы подтолкнуть пользователя в правильном направлении, используя паттерны, которые они уже знают и понимают.

По умолчанию / активно (Default/active)

Это начальное состояние селекторов. Это состояние указывает пользователю, что он может кликать по пунктам в вопросах.

Пример радиокнопок и флажков в их стандартном / активном состоянии

Неактивно (Inactive)

Когда установлено неактивное состояние, пользователь не сможет взаимодействовать с вариантами ответа. Пользователь редко сталкивается с этим состоянием, если это не указано в правилах продукта.

Пример радиокнопок и флажков в их неактивном состоянии

Наведение курсора (Hover)

Как и кнопки, селекторы должны указывать пользователям, что они интерактивны или кликабельны. Обычно это делается с помощью подсветки фона элемента при наведении курсора. Это также указывает, какая область элементов является кликабельной. Если вы уберете курсор, он должен вернуться в исходное состояние.

Пример радиокнопок и флажков в состоянии наведения курсора

Совет для нубов: у сенсорных устройств нет состояния наведения курсора

Фокус / выделение (Focus/highlighted)

Фокус или выделенное состояние обычно обозначается синим ореолом вокруг активируемого кликом элемента. Вы можете убедиться в этом сами, щелкнув по интерфейсу. Пользователь редко сталкивается с этим состоянием, если только не нажмет «Enter», чтобы выбрать элемент.

Пример радиокнопок и флажков в их состоянии фокуса / выделения

Нажато (Pressed)

Это состояние, когда пользователь удерживает свою мышь / палец, и элемент указывает пользователю, что на него нажимают.

Пример радиокнопок и флажков в их нажатом состоянии

Выбрано (Selected)

После того, как пользователь щелкнул по элементу, интерфейс должен сообщить ему об этом. Как упоминалось ранее, радиокнопки могут иметь только один выбранный элемент, а флажки могут иметь несколько, в зависимости от бизнес-правил.

Пример радиокнопок и флажков в их выбранном состоянии

Ошибка обратной связи (Fail feedback)

При свободном вводе текста пользователь может сделать опечатку и т. д. Однако, поскольку параметры в селекторе предопределены, должен быть только один тип обратной связи при ошибке: «incomplete», который пользователь получит только, если нажмет кнопку «отправить» до того, как закончат заполнение формы. Для флажков это будет необходимо, только если вопрос заставит их выбрать один или несколько элементов.

Пример радиокнопок и флажков в состоянии ошибки

6. Правила для текста метки

Существует только одно жесткое правило для меток селектора: быть последовательным.

  1. Убедитесь, что регистр на каждой метке селектора одинаков (регистр предложений, регистр заголовков и т. д.)
  2. Убедитесь, что все элементы либо заканчиваются точкой, либо нет.
  3. Постарайтесь убедиться, что все элементы являются либо предложением, либо фразой, либо словом. Старайтесь избегать, чтобы часть вариантов была предложениями, а другая – отдельными словами. Использование комбинации усложняет решение вопроса о том, какой регистр и пунктуацию использовать.

Пример меток элементов

7. Когда вы должны их использовать

Когда следует использовать радиокнопки или флажки? Это целиком зависит от того, какой вопрос вы задаете. Если вы хотите, чтобы пользователи выбрали несколько вариантов ответа, используйте флажки. Если хотите, чтобы пользователи выбрали только один вариант, используйте радиокнопки (или другой тип селектора).

Когда использовать радиокнопки

У меня есть четыре правила, когда использовать радиокнопки. Вот они:

  1. Когда вы хотите, чтобы пользователь выбрал только один элемент
    Если вы хотите, чтобы пользователь выбрал более одного элемента, лучше использовать флажки.
  2. Если у вас меньше шести вариантов ответа
    В зависимости от ваших правил дизайна, если есть более пяти или шести элементов, используйте раскрывающийся список. Да, да, я знаю, что они неуклюжие, но они экономят много пространства вашего дизайна.

Сравнение раскрывающегося списка и радиокнопок

При этом, если пространство не является проблемой, возможно, стоит использовать радиокнопки – особенно, если вы проектируете для мобильных устройств. Я видела, что это идеально подходит для служб доставки еды.

Если хотите узнать больше о раскрывающихся списках, прочитайте мою предыдущую статью.

  1. Вы хотите принудить выбрать один вариант ответа

Когда вы выбираете элемент в списке радиокнопок, вы не можете отменить его выбор. Вы можете выбрать что-то еще и изменить выбор, но вы не можете отменить ответ на вопрос, если уже выбрали его.

  1. Если у вопроса есть только два варианта: да / нет

Если ваш вопрос «Хотите получать уведомления?», «Воспроизвести фоновую музыку?» и т. д., то лучше используйте переключатель. Они занимают гораздо меньше места, являются более понятными, и поскольку это относительно новый тип селектора, они модные.

Сравнение радиокнопок и переключателя

Дополнение к статье после ее публикации:

5. Если хотите, чтобы пользователи нажимали «Сохранить» для применения выбранного варианта

Если вы находитесь на странице настроек или в месте, где вы хотите, чтобы пользователь мог экспериментировать с параметрами, прежде чем он нажмет большую зеленую кнопку «Сохранить»– лучше использовать радиокнопки (или флажки). Однако, если вы хотите, чтобы ваши настройки были применены немедленно (включение / выключение Wi-Fi), лучше используйте переключатель.

Этот вариант предложил Thomas Veit, спасибо ему:)
6. Если метки варианта ответа короткие, рассмотрите возможность использования переключателя с множественным выбором

Вы очень редко будете встречать этот вариант. Переключатели со множественным выбором соединяют в себе лучшее от радиокнопок и переключателей. Компактные, аккуратные и удобные. Я бы рекомендовал использовать их только в том случае, если метки ответов короткие – в противном случае это может стать неудобным на мобильных устройствах.

Пример переключателя с множественным выбором

Этот вариант  предложил  Thomas Weitz, спасибо ему.

Когда использовать флажки

У меня есть два правила, когда использовать флажки, и вот они:

  1. Если вы хотите, чтобы пользователь мог выбрать несколько вариантов или вообще не выбирать

Если вы хотите, чтобы ваш пользователь мог добавить несколько начинок в свою пиццу, этот вариант для вас. Пользователь может выбрать все, несколько или ни один из флажков.

  1. Один элемент

Тест: почему пункт «Я прочитал условия» всегда в виде флажка, а не радиокнопки? Ведь имеет смысл использовать радиокнопку, так как это лучший тип селектора для вопросов «да / нет»?

Ответ: потому что вы можете отменить его выбор. В отличие от радиокнопок только с одним элементом, где вы не можете отменить его. Если вы нажмете на него, он будет выбран НАВСЕГДА.

8. Проверка доступности

Вы сделали это! Вы завершили проектирование своих селекторов, и пришло время отправить их команде разработчиков. Но погодите! Вы проверили их доступность?

  1. Соответствует ли ваш селектор стандартам цветового контраста WCAG AAA? Вместо этого некоторые дизайнеры используют стандарты АА. Моя любимая программа проверки контрастности – WebAIM.
  2. Варианты ответа / элементы больше, чем 44px для сенсорных экранов? (Иногда используют 36px.)
  3. Расстояние между каждым вариантом ответа / элементом больше 8px?
  4. Всегда ли видна метка / вопрос?
  5. Есть ли в соответствующих полях полезный текст обратной связи? (Например, «Пожалуйста, заполните этот вопрос»)

Подробнее: https://webaim.org/techniques/forms/controls

9. Мысли в заключение

После этой статьи я собираюсь отойти от темы паттернов интерфейса форм и перейти к другим типам паттернов интерфейса. НО, если вы хотите, чтобы я рассмотрела другие типы полей формы, сообщите об этом в комментариях.

Берегите себя, ибо сейчас мир совсем обезумел.

Элемент RadioButton. Программирование КПК и смартфонов на .NET Compact Framework

Читайте также








Элемент



Элемент
Основой языка HTML является элемент. Он несет в себе определенную информацию, может описывать документ в целом или способ форматирования текста. Элементы можно назвать основой построения сайта. Все, что вы захотите создать на вашей странице, будет сделано с помощью






Элемент



Элемент
Элементы – это любые единичные компоненты структуры, например, заголовок, абзац текста, фотография или






Элемент <xsl:if>



Элемент &lt;xsl:if&gt;
При помощи элемента &lt;xsl:if&gt; осуществляются проверки условия и принимаются действия на основе результата проверки. Он во многом похож на оператор if в языках программирования. У элемента &lt;xsl:if&gt; один атрибут:• test (обязательный). Устанавливается в






Элемент <xsl:for-each>



Элемент &lt;xsl:for-each&gt;
Элемент &lt;xsl:for-each&gt; позволяет применять тело шаблона в цикле снова и снова для всех элементов набора узлов. С технической точки зрения, он работает с набором узлов, который возвращает выражение XPath и выполняет одно и то же действие с каждым узлом в






Элемент <?job?>



Элемент &lt;?job?&gt;
Элемент &lt;?job?&gt; задает режим отладки при выполнении WS-файла. Если значение атрибута debug равно true, то задание может быть выполнено во внешнем отладчике (см. приложение 3). Если же значение атрибута debug равно false, то отладчик для этого задания применен быть не






Элемент <job>



Элемент &lt;job&gt;
Элементы &lt;job&gt; позволяют определять несколько заданий (независимо выполняющихся частей) в одном WS-файле. Иначе говоря, между тегами &lt;job&gt; и &lt;/job&gt; будет находиться отдельный сценарий (который, в свою очередь, может состоять из нескольких частей,






Элемент <example>



Элемент &lt;example&gt;
Внутри элемента &lt;example&gt; приводится текст из одной или нескольких строк, в котором можно описать примеры запуска сценария. Если сценарий был запущен с ключом /? в командной строке или в сценарии встретился вызов метода ShowUsage объекта WshArguments, то этот текст






Элементы CheckBox, RadioButton и Group Box



Элементы CheckBox, RadioButton и Group Box
Пространство имен System.Windows.Forms определяет целый ряд других типов, расширяющих возможности ButtonBase, и это, в частности, тип CheckBox (кнопка с независимой фиксацией, может поддерживать до трех возможных состояний) и тип RadioButton (кнопка с зависимой






Элемент Button



Элемент Button
Для создания обычной кнопки используется класс System.Windows.Forms.Button. Эта кнопка обладает всеми основными функциями, которые есть у такого же класса в полной версии .NET Framework. Кнопка предназначена для обработки нажатия стилуса на соответствующую область экрана. В






Элемент TextBox



Элемент TextBox
В предыдущем примере дата отображалась в текстовом поле. Это поле создается при помощи класса TextBox, который позволяет вводить текст. Данный элемент поддерживает такие стандартные свойства, как BackColor и ForeColor. Событие Click элементом TextBox не поддерживается, но






Элемент TrackBar



Элемент TrackBar
Элемент управления TrackBar предназначен для установки числового значения при помощи перемещения ползунка по числовой шкале. Основную работу с элементом разработчик выполняет при помощи свойств Minimum, Maximum и Value. Ползунок может располагаться как вертикально, так






Элемент xsl:if



Элемент xsl:if
Синтаксис элемента следующий:&lt;xsl:if test=»выражение»&gt; &lt;!— Содержимое: шаблон —&gt;&lt;/xsl:if&gt;Элемент xsl:if является простейшим условным оператором в XSLT. Выражение, содержащееся в обязательном атрибуте test, вычисляется и приводится к булевому типу. В том и только том














— HTML | MDN

Атрибут type тега <input> со значением radio обычно используется для создания группы радиокнопок (переключателей), описывающих набор взаимосвязанных параметров. Одновременно пользователь может выбрать лишь одну радиокнопку из предложенных. Радиокнопки обычно отображаются как небольшие кружки, которые заполняются или подсвечиваются при наведении.

<input type="radio">

Исходный код к данному интерактивному примеру находиться на GitHub репозитории. Если вы желаете внести свой вклад в проект интерактивных примеров, то склонируйте удалённый репозиторий https://github.com/mdn/interactive-examples и отправьте нам запрос на включение сделанных вами изменений «pull request».

Радиокнопки называются так потому, что выглядят и функционируют в схожей манере с кнопками старомодных радиоприёмников, подобных представленному ниже. 

Примечание: Чекбоксы похожи на радиокнопки, но с одним важным отличием: радиокнопки предназначены для выбора одного значения из предложенных, в то время как чекбоксы позволяют «включать» и «выключать»  значения. Если существует несколько элементов управления, то с помощью радиокнопок пользователь сможет выбрать лишь один из них, а чекбоксы позволят выбрать несколько значений одновременно.

Атрибут value — это строка DOM, содержащая значение радиокнопки. Это значение никогда не показывается пользователю его веб-браузером. Атрибут value используется для того, чтобы точно определить какая из радиокнопок была выбрана пользователем.

Создание группы радиокнопок

Группа радиокнопок определяется путём присвоения каждой радиокнопке в данной группе одного и того же значения атрибута (name). Выбор любой радиокнопки в этой группе автоматически отменяет выбор другой радиокнопки в той же группе. 

Вы можете создать любое количество групп радиокнопок, если каждой из этих групп будет присвоено своё уникальное значение атрибута name.

Например, если в вашей форме необходимо запросить  предпочитаемый способ контакта с пользователем, то вы можете создать три радиокнопки с name= "contact" , но с разными value = "email", value ="phone" и value =  "mail" соответственно. Пользователь не видит атрибуты name  и value (если только вы не добавляете код для их отображения).

HTML будет выглядеть следующим образом:

<form>
  <p>Please select your preferred contact method:</p>
  <div>
    <input type="radio"
     name="contact" value="email">
    <label for="contactChoice1">Email</label>

    <input type="radio"
     name="contact" value="phone">
    <label for="contactChoice2">Phone</label>

    <input type="radio"
     name="contact" value="mail">
    <label for="contactChoice3">Mail</label>
  </div>
  <div>
    <button type="submit">Submit</button>
  </div>
</form>

Здесь вы видите три радиокнопки, каждая из которых имеет атрибут name  со значением "contact" и уникальный атрибут value, который однозначно идентифицирует эту радиокнопку в данной группе. Каждой радиокнопке присвоен уникальный id,  связанный с тегом <label> через атрибут for  для установления связи между конкретной меткой и конкретной радиокнопкой. 

Вы можете опробовать этот код здесь: 

Представление данных группы радиокнопок

Когда представленная выше форма отправляется на сервер с информацией о выбранной радиокнопке,  то её данные  включают запись в виде «contact=name». Например, если пользователь кликает на радиокнопку «Phone», а затем отправляет форму на сервер, данные формы будут включать в себя строку "contact=phone".

Если вы пренебрежёте атрибутом value в  вашем HTML, то отправленные данные просто присвоят данной группе значение "on".  То есть, если пользователь кликнет на радиокнопку «Phone» и отправит форму, итоговые данные отобразятся как  "contact=on" и будут абсолютно бесполезны. Поэтому никогда не забывайте указывать атрибут value!

Примечание: Если в отправленной форме не была выбрана ни одна радиокнопка, то группа радиокнопок вообще не будет включать в себя никакие данные, так как отсутствуют значения для отправки.

Поскольку отправлять пустую форму в большинстве случаев не имеет никакого смысла, то разумно оставлять одну радиокнопку активированной по умолчанию с помощью атрибута "checked". Смотрите здесь Selecting a radio button by default.

Давайте добавим немного кода в наш пример для того, чтобы изучить данные, полученные из этой формы. HTML изменяется путём добавления блока <pre> для вывода данных формы. 

<form>
  <p>Please select your preferred contact method:</p>
  <div>
    <input type="radio"
           name="contact" value="email">
    <label for="contactChoice1">Email</label>
    <input type="radio"
           name="contact" value="phone">
    <label for="contactChoice2">Phone</label>
    <input type="radio"
           name="contact" value="mail">
    <label for="contactChoice3">Mail</label>
  </div>
  <div>
    <button type="submit">Submit</button>
  </div>
</form>
<pre>
</pre>

Затем добавим немного JavaScript. Установим обработчик события submit (en-US), которая будет отправляться при клике пользователя на кнопку «Отправить»:

var form = document.querySelector("form");
var log = document.querySelector("#log");

form.addEventListener("submit", function(event) {
  var data = new FormData(form);
  var output = "";
  for (const entry of data) {
    output = entry[0] + "=" + entry[1] + "\r";
  };
  log.innerText = output;
  event.preventDefault();
}, false);

Опробуйте этот пример и убедитесь, что для группы радиокнопок  "contact"  будет только один результат.

Мы уже осветили основные моменты работы с радиокнопками выше. Давайте рассмотрим другие распространённые  функции и методы, связанные с использованием радиокнопок, о которых вам нужно знать.

Выбор радиокнопки по умолчанию

Чтобы установить радиокнопку как выбранную по умолчанию, вам необходимо подключить атрибут checked, как показано ниже в немного изменённой версии предыдущего примера.

<form>
  <p>Please select your preferred contact method:</p>
  <div>
    <input type="radio"
     name="contact" value="email" checked>
    <label for="contactChoice1">Email</label>

    <input type="radio"
     name="contact" value="phone">
    <label for="contactChoice2">Phone</label>

    <input type="radio"
     name="contact" value="mail">
    <label for="contactChoice3">Mail</label>
  </div>
  <div>
    <button type="submit">Submit</button>
  </div>
</form>

В данном случае первая радиокнопка будет выбрана по умолчанию.

Примечание: Если вы устанавливаете атрибут checked более чем на одну кнопку, то стоит иметь в виду, что каждый последующий атрибут checked отменяет предыдущий, то  есть как отмеченная будет выбрана последняя радиокнопка с атрибутом checked. Это происходит потому, что в каждой группе радиокнопок одновременно может быть выбрана только одна кнопка, и браузер автоматически отменяет другие выбранные до этого радиокнопки.

Providing a bigger hit area for your radio buttons

В примерах, представленных выше, вы могли заметить, что можно выбрать радиокнопку, кликнув как на соединённый с ней элемент  <label>, так и на саму кнопку. Это действительно полезная функция HTML-форм, которая облегчает пользователям выбор нужной опции, особенно на устройствах с небольшим экраном, таких как смартфоны.  Помимо специальных возможностей, это другая веская причина для правильного использования элементов  <label>  в ваших формах.

Радиокнопки не участвуют в проверке ограничений, так как у них нет реальных значений для ограничения.

Следующий пример отображает немного более проработанную версию примера, который мы использовали на протяжении всей статьи,  с некоторыми дополнительными стилями и с лучшей семантикой, установленной с помощью специализированных элементов.

HTML будет выглядеть следующим образом:

<form>
  <fieldset>
    <legend>Please select your preferred contact method:</legend>
    <div>
      <input type="radio"
       name="contact" value="email" checked>
      <label for="contactChoice1">Email</label>

      <input type="radio"
       name="contact" value="phone">
      <label for="contactChoice2">Phone</label>

      <input type="radio"
       name="contact" value="mail">
      <label for="contactChoice3">Mail</label>
    </div>
    <div>
      <button type="submit">Submit</button>
    </div>
  </fieldset>
</form>

Здесь не так много нового, кроме дополнения в виде элементов <fieldset> и <legend>, которые позволяют сгруппировать элементы форм между собой функционально и семантически.

CSS будет выглядеть так:

html {
  font-family: sans-serif;
}

div:first-of-type {
  display: flex;
  align-items: flex-start;
  margin-bottom: 5px;
}

label {
  margin-right: 15px;
  line-height: 32px;
}

input {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;

  border-radius: 50%;
  width: 16px;
  height: 16px;

  border: 2px solid #999;
  transition: 0.2s all linear;
  outline: none;
  margin-right: 5px;

  position: relative;
  top: 4px;
}

input:checked {
  border: 6px solid black;
}

button,
legend {
  color: white;
  background-color: black;
  padding: 5px 10px;
  border-radius: 0;
  border: 0;
  font-size: 14px;
}

button:hover,
button:focus {
  color: #999;
}

button:active {
  background-color: white;
  color: black;
  outline: 1px solid black;
}

Самым примечательным здесь является использование свойства appearance с использованием префиксов некоторых браузеров. По умолчанию радиокнопки (и чекбоксы) уже имеют собственные стили в каждой операционной системе. Придав свойству appearance значение none, вы можете отменить все «родные» настройки стилей операционной системы и создать свои собственные. Здесь мы использовали свойства border и  border-radius, а также свойство transition для создания хорошо анимированного выбора радиокнопок. Заметьте также, что псевдокласс :checked используется для указания стилей внешнего вида кнопок при их выборе.

Стоит иметь в виду, что свойство  appearance неплохо работает для создания простых стилей, но имеет тенденцию вести себя несколько непоследовательно в некоторых браузерах и полностью не работает в Internet Explorer. Тщательно проверяйте как работает ваш сайт в каждом браузере! 

Обратите внимание, что при клике на радиокнопку, на предыдущей выбранной кнопке появляется мягкий эффект угасания. Кроме того, стиль и окраска легенды и кнопки «Submit» имеет сильный контраст с остальным текстом. Возможно, это не совсем тот эффект, который вы хотели бы видеть в своём реальном веб-приложении, но этот пример хорошо отображает возможности CSS.

BCD tables only load in the browser

Переключатели | htmlbook.ru

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

<input type="radio" name="имя" атрибуты>

Атрибуты переключателей перечислены в табл. 1.

Табл. 1. Атрибуты переключателей
Атрибут Описание
checked Предварительное выделение переключателя. По определению, набор переключателей
может иметь только один выделенный пункт, поэтому добавление checked
сразу к нескольким полям не даст особого результата. В любом случае, будет
отмечен элемент, находящийся в коде HTML последним.
name Имя группы переключателей для идентификации поля. Поскольку переключатели
являются групповыми элементами, то имя у всех элементов группы должно
быть одинаковым.
value Задаёт, какое значение будет отправлено на сервер. Здесь уже каждый элемент
должен иметь свое уникальное значение, чтобы можно было идентифицировать,
какой пункт был выбран пользователем.

Создание группы переключателей показано в примере 1.

Пример 1. Создание переключателей

HTML5IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Переключатели</title>
 </head>
 <body>
  <form action="handler.php">
   <p><b>Какое у вас состояние разума?</b></p>
    <p><input name="dzen" type="radio" value="nedzen"> Не дзен</p>
    <p><input name="dzen" type="radio" value="dzen"> Дзен</p>
    <p><input name="dzen" type="radio" value="pdzen" checked> Полный дзен</p>
    <p><input type="submit" value="Выбрать"></p>
  </form> 
 </body>
</html>

В результате получим следующее (рис. 1).

Рис. 1. Вид переключателей в браузере

Заметьте, что в данном примере значение атрибута name для
всех переключателей одинаково, именно в таком случае браузер понимает, что
переключатели связаны между собой и помечает только один пункт из предложенных.
Значение атрибута value же должно различаться,
чтобы обработчик формы мог понять, какой вариант выбран пользователем.

Radiobutton и Checkbutton. Переменные Tkinter. Урок 5

В Tkinter от класса Radiobutton создаются радиокнопки, от класса Checkbutton – флажки.

Радиокнопки не создают по одной, а делают связанную группу, работающую по принципу переключателей. Когда включена одна, другие выключены.

Экземпляры Checkbutton также могут быть визуально оформлены в группу, но каждый флажок независим от остальных. Каждый может быть в состоянии «установлен» или «снят», независимо от состояний других флажков. Другими словами, в группе Checkbutton можно сделать множественный выбор, в группе Radiobutton – нет.

Radiobutton – радиокнопка

Если мы создадим две радиокнопки без соответствующих настроек, то обе они будут включены и выключить их будет невозможно:

Эти переключатели никак не связаны друг с другом. Кроме того для них не указано исходное значение, должны ли они быть в состоянии «вкл» или «выкл». По-умолчанию они включены.

Связь устанавливается через общую переменную, разные значения которой соответствуют включению разных радиокнопок группы. У всех кнопок одной группы свойство variable устанавливается в одно и то же значение – связанную с группой переменную. А свойству value присваиваются разные значения этой переменной.

В Tkinter нельзя использовать любую переменную для хранения состояний виджетов. Для этих целей предусмотрены специальные классы-переменные пакета tkinterBooleanVar, IntVar, DoubleVar, StringVar. Первый класс позволяет принимать своим экземплярам только булевы значения (0 или 1 и True или False), второй – целые, третий – дробные, четвертый – строковые.

r_var = BooleanVar()
r_var.set(0)
r1 = Radiobutton(text='First',
                 variable=r_var, value=0)
r2 = Radiobutton(text='Second',
                 variable=r_var, value=1)

Здесь переменной r_var присваивается объект типа BooleanVar. С помощью метода set он устанавливается в значение 0.

При запуске программы включенной окажется первая радиокнопка, так как значение ее опции value совпадает с текущим значением переменной r_var. Если кликнуть по второй радиокнопке, то она включится, а первая выключится. При этом значение r_var станет равным 1.

В программном коде обычно требуется «снять» данные о том, какая из двух кнопок включена. Делается это с помощью метода get экземпляров переменных Tkinter.

from tkinter import *
 
 
def change():
    if var.get() == 0:
        label['bg'] = 'red'
    elif var.get() == 1:
        label['bg'] = 'green'
    elif var.get() == 2:
        label['bg'] = 'blue'
 
 
root = Tk()
 
var = IntVar()
var.set(0)
red = Radiobutton(text="Red",
                  variable=var, value=0)
green = Radiobutton(text="Green",
                    variable=var, value=1)
blue = Radiobutton(text="Blue",
                   variable=var, value=2)
button = Button(text="Изменить",
                command=change)
label = Label(width=20, height=10)
red.pack()
green.pack()
blue.pack()
button.pack()
label.pack()
 
root.mainloop()
 

В функции change в зависимости от считанного значения переменной var ход выполнения программы идет по одной из трех веток.

Мы можем избавиться от кнопки «Изменить», связав функцию change или любую другую со свойством command радиокнопок. При этом не обязательно, чтобы радиокнопки, объединенные в одну группу, вызывали одну и ту же функцию.

from tkinter import *
 
 
def red_label():
    label['bg'] = 'red'
 
 
def green_label():
    label['bg'] = 'green'
 
 
def blue_label():
    label['bg'] = 'blue'
 
 
root = Tk()
 
var = IntVar()
var.set(0)
Radiobutton(text="Red", command=red_label,
            variable=var, value=0).pack()
Radiobutton(text="Green", command=green_label,
            variable=var, value=1).pack()
Radiobutton(text="Blue", command=blue_label,
            variable=var, value=2).pack()
label = Label(width=20, height=10, bg='red')
label.pack()
 
root.mainloop()

Здесь метка будет менять цвет при клике по радиокнопкам.

Если посмотреть на пример выше, можно заметить, что код радиокнопок почти идентичный, как и код связанных с ними функций. В таких случаях более грамотно поместить однотипный код в класс.

from tkinter import *
 
 
def paint(color):
    label['bg'] = color
 
 
class RBColor:
    def __init__(self, color, val):
        Radiobutton(
            text=color.capitalize(),
            command=lambda i=color: paint(i),
            variable=var, value=val).pack()
 
 
root = Tk()
 
var = IntVar()
var.set(0)
RBColor('red', 0)
RBColor('green', 1)
RBColor('blue', 2)
label = Label(width=20, height=10, bg='red')
label.pack()
 
root.mainloop()

В двух последних вариациях кода мы не используем метод get, чтобы получить значение переменной var. В данном случае нам это не требуется, потому что цвет метки меняется в момент клика по соответствующей радиокнопке и не находится в зависимости от значения переменной. Несмотря на это использовать переменную в настройках радиокнопок необходимо, так как она обеспечивает связывание их в единую группу и выключение одной при включении другой.

Checkbutton – флажок

Флажки не требуют установки между собой связи, поэтому может возникнуть вопрос, а нужны ли тут переменные Tkinter? Они нужны, чтобы снимать сведения о состоянии флажков. По значению связанной с Checkbutton переменной можно определить, установлен флажок или снят, что в свою очередь повлияет на ход выполнения программы.

У каждого флажка должна быть своя переменная Tkinter. Иначе при включении одного флажка, другой будет выключаться, так как значение общей tkinter-переменной изменится и не будет равно значению опции onvalue первого флажка.

from tkinter import *
root = Tk()
 
 
def show():
    s = f'{var1.get()}, ' \
        f'{var2.get()}'
    lab['text'] = s
 
 
frame = Frame()
frame.pack(side=LEFT)
 
var1 = BooleanVar()
var1.set(0)
c1 = Checkbutton(frame, text="First",
                 variable=var1,
                 onvalue=1, offvalue=0,
                 command=show)
c1.pack(anchor=W, padx=10)
 
var2 = IntVar()
var2.set(-1)
c2 = Checkbutton(frame, text="Second",
                 variable=var2,
                 onvalue=1, offvalue=0,
                 command=show)
c2.pack(anchor=W, padx=10)
 
lab = Label(width=25, height=5, bg="lightblue")
lab.pack(side=RIGHT)
 
root.mainloop()

С помощью опции onvalue устанавливается значение, которое принимает связанная переменная при включенном флажке. С помощью свойства offvalue – при выключенном. В данном случае оба флажка при запуске программы будут выключены, так как методом set были установлены отличные от onvalue значения.

Опцию offvalue можно не указывать. Однако при ее наличии можно отследить, выключался ли флажок.

С помощью методов select и deselect флажков можно их программно включать и выключать. То же самое относится к радиокнопкам.

from tkinter import *
 
 
class CheckButton:
    def __init__(self, master, title):
        self.var = BooleanVar()
        self.var.set(0)
        self.title = title
        self.cb = Checkbutton(
            master, text=title, variable=self.var,
            onvalue=1, offvalue=0)
        self.cb.pack(side=LEFT)
 
 
def ch_on():
    for ch in checks:
        ch.cb.select()
 
 
def ch_off():
    for ch in checks:
        ch.cb.deselect()
 
 
root = Tk()
 
f1 = Frame()
f1.pack(padx=10, pady=10)
checks = []
for i in range(10):
    checks.append(CheckButton(f1, i))
 
f2 = Frame()
f2.pack()
button_on = Button(f2, text="Все ВКЛ",
                   command=ch_on)
button_on.pack(side=LEFT)
button_off = Button(f2, text="Все ВЫКЛ",
                    command=ch_off)
button_off.pack(side=LEFT)
 
root.mainloop()

Практическая работа

Виджеты Radiobatton и Checkbutton поддерживают большинство свойств оформления внешнего вида, которые есть у других элементов графического интерфейса. При этом у Radiobutton есть особое свойство indicatoron. По-умолчанию он равен единице, в этом случае радиокнопка выглядит как нормальная радиокнопка. Однако если присвоить этой опции ноль, то виджет Radiobutton становится похожим на обычную кнопку по внешнему виду. Но не по смыслу.

Напишите программу, в которой имеется несколько объединенных в группу радиокнопок, индикатор которых выключен (indicatoron=0). Если какая-нибудь кнопка включается, то в метке должна отображаться соответствующая ей информация. Обычных кнопок в окне быть не должно.

Помните, что свойство command есть не только у виджетов класса Button.

Курс с примерами решений практических работ:
android-приложение,
pdf-версия.

Радиобаттон в CSS: что это, для чего используется и как применять

Радиобаттон — это своего рода «переключатель» между элементами. Устанавливается в местах, где пользователю необходимо выбрать один элемент из нескольких предложенных. Как правило, это блоки из нескольких вариантов выбора. К данному блоку можно применить вопросы: «Что именно?», «Какой точно выбрать?»

Главное отличие радиобаттон от чекбокса — это возможность выбрать только один элемент из предложенных. В чекбоксах, как вы знаете, можно выбрать несколько элементов из блока. Поэтому не путайте.

Радиобаттон: правила размещения

Блок радиобаттон изначально нужно размещать в столбик вертикально, друг за другом все значения. Горизонтальное размещение неуместно. Да, некоторые размещают радиокнопки горизонтально, чтобы сэкономить место, но смотрится это так себе. Плюс легко запутать пользователя тем, что он может не увидеть все значения. Исключением горизонтального размещения может быть —  когда вы вместо значений используете полноценные кнопки или изображения.

Радиобаттон — это группа элементов. Все значения должны идти друг за другом, и не должно быть никаких разрывов или тем более вставок. По сути радиокнопки «ведут» себя как единый элемент. А само «переключение» осуществляется непосредственно внутри групп радиокнопок.

Делаем радиобаттон заметнее при помощи CSS

По умолчанию у кнопок радиобаттон очень маленькая «площадь» для клика. Они плохо выделены, и если значений много, то найти нужное иногда трудновато. Поэтому можно при помощи CSS индивидуально выделить кнопки в группы:

  1. Превратите радиобаттон в блок полноценных кнопок. Для этого блок значений можно выделить «border», а фон заполнить каким-либо цветом. И организовать таким образом, чтобы при наведении цвет менялся.
  2. Добавьте иконку. Перед или после значений радиобаттон можно добавить тематическую иконку, возможно, даже цветную, чтобы она быстрее бросалась в глаза.
  3. Добавьте псевдоссылку. Можно организовать стиль, как у ссылок на странице. То есть выделить только значения одним цветом, а при наведении на значение сделать так, чтобы цвет менялся.
  4. Полноценный переключатель между 2-мя значениями. Тут можно расположить 2 значения горизонтально и сделать их в виде полноценных кнопок. Сделать так, чтобы выбранный элемент выделялся как минимум цветом.

Помогаем сделать выбор

Радиобаттон предполагает, что будет выбран один элемент из всех значений, иначе он не «сработает». В этом случае имеет смысл изначально установить на самый популярный элемент значение «по умолчанию».

Бывает такое, что невозможно определить «лучшее» или «популярное» значение, к примеру, выбор между:

  • Мужчина
  • Женщина

Установить здесь выбор по умолчанию как минимум неправильно, а можно и вообще нарваться на обвинение в дискриминации. В таких случаях имеет смысл добавить по умолчанию «значение без значения», чтобы радиобаттон хотя бы сработал.

Примерно так:

  • Не указан
  • Мужчина
  • Женщина

Используйте радиобаттон по назначению — это значит, предоставляйте своим пользователям право выбора среди нескольких значений. И не бойтесь экспериментировать с внешнем видом — CSS позволяет сделать многое. Это даст вам возможность «выделиться» и сделать ваш ресурс запоминающимся. Хоть радиобаттон, как правило, небольших размеров, это все равно часть визуального оформления всего вашего ресурса, поэтому он тоже требует к себе внимания.

100 компонентов Delphi — RadioGroup, RadioButton и GroupBox

100 компонентов Delphi — RadioGroup, RadioButton и GroupBox


5.4 Группы радиокнопок — компоненты RadioGroup, RadioButton и GroupBox

Радиокнопки образуют группы взаимосвязанных индикаторов, из которых обычно может быть выбран только один. Они используются для выбора пользователем одной из нескольких взаимоисключающих альтернатив, например, отдела, в котором работает сотрудник, или пола сотрудника. Впрочем, радиокнопки могут использоваться и для отображения аналогичных данных. В этом случае управление кнопками осуществляется программно. Несколько примеров организации размещения радиокнопок вы можете увидеть на рис. 5.1 в разделе 5.1.

Начнем рассмотрение радиокнопок с компонента RadioGroup — панели группы радиокнопок. Это панель, которая может содержать регулярно расположенные столбцами и строками радиокнопки. Надпись в левом верхнем углу панели (см. рис. 5.1) определяется свойством Caption. А надписи кнопок и их количество определяются свойством Items, имеющим тип TStrings. Щелкнув на кнопке с многоточием около этого свойства в окне Инспектора Объектов, вы попадете в редактор списков строк, который уже рассматривался нами в разделе 3.3.4 (рис. 3.9). В нем вы можете занести надписи, которые хотите видеть около кнопок, по одной в строке. Сколько строчек вы запишете — столько и будет кнопок. Например, для компонента RadioGroup в верхней правой части формы рис. 5.1 свойство Items имеет вид:

бухгалтерия
администрация
цех 1
цех 2
цех 3
цех 4

Кнопки, появившиеся в панели после задания значений Items, можно разместить в несколько столбцов (не более 17), задав свойство Columns. По умолчанию Columns = 1, т.е. кнопки размещаются друг под другом.

Определить, какую из кнопок выбрал пользователь, можно по свойству ItemIndex, которое показывает индекс выбранной кнопки. Индексы, как всегда в Delphi, начинаются с 0. По умолчанию ItemIndex = -1, что означает отсутствие выбранной кнопки. Если вы хотите, чтобы в момент начала выполнения приложения какая-то из кнопок была выбрана (это практически всегда необходимо), то надо установить соответствующее значение ItemIndex во время проектирования. Если вы используете радиокнопки не для ввода, а для отображения данных, устанавливать значение ItemIndex можно программно во время выполнения приложения.

Компонент RadioGroup очень удобен, но не свободен от некоторых недостатков. Его хорошо использовать, если надписи кнопок имеют примерно одинаковую длину и если число кнопок в каждом столбце (при размещении их в нескольких столбцах) одинаково. Посмотрите, например, рис. 5.1 из раздела 5.1. Группа радиокнопок в нижнем левом углу формы имеет нормальный вид. А группа аналогичных радиокнопок в верхней правой части формы выглядит плохо: она занимает слишком много места, которое пропадает в пустую. Связано это с тем, что длина надписей у кнопок первого столбца превышает длину надписей у остальных кнопок. A RadioGroup при размещении кнопок ориентируется на надпись максимальной длины. Еще хуже выглядела бы эта группа, если бы число кнопок было, например, равно 5.

В подобных случаях желательно нерегулярное расположение кнопок. Такую возможность дают компоненты RadioButton, сгруппированные панелью GroupBox. Панель GroupBox выглядит на форме так же, как RadioGroup (см. рис. 5.1), и надпись в ее верхнем левом углу также определяется свойством Caption. Эта панель сама по себе пустая. Ее назначение — служить контейнером для других управляющих элементов, в частности, для радиокнопок RadioButton. Отдельная радиокнопка RadioButton особого смысла не имеет, хотя и может служить индикатором, включаемым и выключаемым пользователем. Но в качестве индикаторов обычно используются другие компоненты — CheckBox. А радиокнопки имеют смысл, когда они взаимодействуют друг с другом в группе. Эта группа и объединяется единым контейнером, обычно панелью GroupBox.

Рассмотрим свойства радиокнопки RadioButton. Свойство Caption содержит надпись, появляющуюся около кнопки. Значение свойства Alignment определяет, с какой стороны от кнопки появится надпись: taLeftJustify — слева, taRightJustify — справа (это значение принято по умолчанию). Свойство Checked определяет, выбрана ли данная кнопка пользователем, или нет. Поскольку в начале выполнения приложения обычно надо, чтобы одна из кнопок группы была выбрана по умолчанию, ее свойство Checked надо установить в true в процессе проектирования. Если вы поэкспериментируете, то заметите, что и во время проектирования можно установить в true значение Checked только у одной кнопки из группы.

Размещение кнопок RadioButton в панели GroupBox, как можно видеть из рис. 5.1 раздела 5.1, дает большую свободу по сравнению с компонентом RadioGroup и позволяет разместить кнопки не регулярно.

Радиокнопки RadioButton могут размещаться не только в панели GroupBox, но и в любой панели другого типа, а также непосредственно на форме. Группа взаимосвязанных кнопок в этих случаях определяется тем оконным компонентом, который содержит кнопки. В частности, для радиокнопок, размещенных непосредственно на форме, контейнером является сама форма. Таким образом, все кнопки, размещенных непосредственно на форме, работают как единая группа, т.е. только в одной из этих кнопок можно установить значение Checked в true.


Что такое радиокнопка?

Обновлено: 13 ноября 2018 г., компания Computer Hope

Радиокнопка — это один из типов индикатора выбора в списке опций. Если выбран вариант, круг закрашен. Если опция не выбрана, кружок будет пустым. Когда выбран один кружок, остальные не выделяются, так что в любой момент можно выбрать только один вариант.

Пример радиокнопки

Ниже приведен пример того, как выглядит переключатель в вашем браузере.

Как создать переключатель на моей веб-странице HTML

Чтобы создать переключатель на веб-странице, используйте тег , как показано ниже. В приведенном ниже примере мы используем код из примера с переключателем, чтобы создать переключатель, за которым следует текст «Пример 1».

  Пример 1 

Если вы хотите, чтобы пользователь вводил данные с переключателя, он должен быть включен в тег

. При отправке он часто отправляется в сценарий Perl, PHP или Python, который выполняет различные действия в зависимости от выбранного переключателя.

Кончик

Если вы используете несколько переключателей и хотите, чтобы одновременно была выбрана только одна, присвойте им одинаковый атрибут name , но присвойте каждой уникальное значение value attribute. Например, если бы мы использовали приведенный выше код и хотели создать еще один переключатель, он все равно назывался бы «пример», но ему было бы присвоено другое значение.

Примечание

Можно сделать переключатель, позволяющий посетителю выбирать несколько переключателей. Однако, чтобы избежать путаницы, мы всегда рекомендуем использовать флажки, а не переключатели, если вы хотите выбрать более одного варианта.

В чем разница между флажком и переключателем?

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

Кнопка, Флажок, Кнопка, Условия использования программного обеспечения

HTML input type = «radio»

❮ Атрибут типа HTML

Пример

Радиокнопки позволяют пользователю выбрать только один из ограниченного числа вариантов:




Попробуй сам »


Определение и использование

определяет переключатель.

Радиокнопки обычно представлены в радиогруппах (набор радиокнопок).
описание набора связанных опций). Только один переключатель в группе может
быть выбранными одновременно.

Примечание: Радиогруппа должна иметь одно и то же имя (
значение атрибута name ) для обработки как группы. Как только радиогруппа
создан, выбор любого переключателя в этой группе автоматически отменяет выбор любого
другой выбранный переключатель в той же группе.У вас может быть столько радиогрупп
на странице, как хотите, при условии, что каждая группа имеет собственное имя.

Примечание: Атрибут value определяет уникальное значение
связанный с каждой радиокнопкой. Значение не отображается пользователю, но отображается
значение, которое отправляется на сервер при «отправке», чтобы определить, какой переключатель
что было выбрано.

Совет: Всегда добавляйте тег
за лучшие практики доступности!


Поддержка браузера

Атрибут
type = «радио» Есть Есть Есть Есть Есть

Синтаксис


❮ Атрибут типа HTML

Флажки vs.Radio Buttons

Недавно я обнаружил следующее поле на странице регистрации крупного веб-сайта. В нем есть как минимум две дизайнерские ошибки. Посмотрите, сможете ли вы их найти, прежде чем читать дальше.

Ошибка №1 является основной темой этой статьи: ошибочное использование флажков вместо переключателей. Поскольку два вышеуказанных варианта являются взаимоисключающими, на странице пользователям должны быть представлены переключатели, которые ограничивают их выбор только одним вариантом.

Ошибка №2: сначала нужно задать два вопроса, а затем поместить их в большую многословную рамку.Один, более короткий вопрос здесь был бы намного лучше: «Да, пришлите мне информацию о других рекомендуемых продуктах, решениях, услугах и возможностях обучения».

По иронии судьбы, с одним вопросом использование флажка было бы правильным, потому что пользователь отвечал бы да или нет. В результате пользовательского тестирования сайтов электронной коммерции рекомендуется, чтобы оставил флажок пустым по умолчанию , поэтому пользователи должны активно щелкнуть его, чтобы подписаться на получение дальнейших сообщений.

Когда какие виджеты использовать

Начиная с первого издания Inside Macintosh в 1984 году, правило было одинаковым для того, когда использовать флажки вместо переключателей.Все последующие стандарты графического интерфейса пользователя и официальные веб-стандарты W3C включают одно и то же определение этих двух элементов управления:

  1. Радиокнопки используются, когда есть список из двух или более опций, которые являются взаимоисключающими , и пользователь должен выбрать ровно один вариант. Другими словами, щелчок невыбранной радиокнопки отменяет выбор любой другой кнопки, ранее выбранной в списке.
  2. Флажки используются, когда есть списки опций, и пользователь может выбрать любое количество вариантов, включая ноль, один или несколько.Другими словами, каждый флажок не зависит от всех других флажков в списке, поэтому установка одного флажка не снимает отметки с остальных.
  3. Автономный флажок используется для единственной опции, которую пользователь может включить или выключить.

Звучит достаточно просто, правда?

Тем не менее, я часто сталкиваюсь с веб-страницами, на которых неправильно используются переключатели и флажки. Даже по прошествии двадцати лет стоит повторить эти рекомендации еще раз.

Дополнительные инструкции

  1. Используйте стандартные визуальные представления. Флажок должен быть маленьким квадратом с галочкой или X, когда он установлен. Радиокнопка должна быть маленьким кружком, внутри которого будет сплошной кружок при выборе.
  2. Визуально представьте группы вариантов выбора как группы, и четко отделите их от других групп на той же странице. Приведенный выше пример в рамке нарушает это правило, потому что в макете два флажка кажутся относящимися к разным темам, хотя на самом деле они являются альтернативными вариантами для одной темы.
    • Используйте подзаголовки, чтобы разбить длинный список флажков на логические группы. Это ускоряет сканирование и упрощает понимание вариантов выбора. Риск состоит в том, что пользователи могут рассматривать каждую подгруппу как отдельный набор параметров, но это не обязательно фатально для флажков — в любом случае каждое поле является независимым выбором. Однако список переключателей всегда должен быть единым, поэтому вы не можете использовать подзаголовки, чтобы разбить его.
  3. Разместите списки вертикально , по одному варианту в каждой строке.Если вам необходимо использовать горизонтальный макет с несколькими вариантами в строке, убедитесь, что вы разместили кнопки и метки с промежутками, чтобы было совершенно ясно, какой выбор соответствует какой метке. В следующем списке, например, трудно увидеть правильный переключатель, который нужно щелкнуть для четвертого варианта.
  4. Используйте позитивную и активную формулировку для меток флажков, чтобы было ясно, что произойдет, если пользователь включит флажок. Другими словами, избегайте отрицаний, таких как «Не присылайте мне больше писем», которые означают, что пользователю нужно будет установить флажок, чтобы произошло что-то , а не .
    • Напишите метки для флажков, чтобы пользователи знали, что произойдет, если они отметят конкретное поле, и что произойдет, если они не отметят его.
    • Если вы не можете этого сделать, может быть лучше использовать два переключателя — один для включения функции, а другой для ее отключения — и написать четкие метки для каждого из двух случаев.
  5. По возможности используйте переключатели, а не раскрывающиеся меню . Радиокнопки имеют более низкую когнитивную нагрузку, поскольку они делают все параметры постоянно видимыми, чтобы пользователи могли легко их сравнивать.Радиокнопки также легче использовать для пользователей, которым трудно выполнять точные движения мыши. (Ограниченное пространство может иногда вынудить вас нарушить это руководство, но старайтесь, чтобы варианты выбора оставались видимыми, когда это возможно.)
  6. Всегда предлагать выбор по умолчанию для списков переключателей . По определению, для радиокнопок всегда выбран только один параметр, и поэтому вы не должны отображать их без выбора по умолчанию. (Флажки, напротив, часто по умолчанию не выбирают ни один из параметров.)
    • Если пользователям может потребоваться воздержаться от выбора, вы должны установить переключатель для этого выбора, например, помеченный как «Нет». Лучше предложить пользователям явный, нейтральный вариант щелчка, чем требовать неявного действия отказа от выбора из списка, особенно потому, что выполнение последнего нарушает правило всегда выбирать только один вариант.
  7. Поскольку радиокнопки требуют только одного выбора, убедитесь, что варианты являются исчерпывающими и четко различимы. .Например, в тестах с участием пожилых пользователей люди не могли заполнить форму, в которой они должны были выбрать работу, потому что она не предлагала вариант «пенсионер». Если невозможно дать исчерпывающий ответ, предложите кнопку с надписью «Другое», дополненную полем для ввода.
  8. Позвольте пользователям выбрать вариант, щелкнув либо саму кнопку / поле, либо его метку. : По закону Фиттса более крупную цель щелкнуть быстрее. В формах HTML вы можете легко добиться этого, закодировав каждую метку элементами
  9. Используйте флажки и переключатели только для изменения настроек, а не как кнопки действий , которые заставляют что-то происходить. Кроме того, измененные настройки не должны вступить в силу до тех пор, пока пользователь не нажмет кнопку команды (например, с меткой «ОК» или «Перейти к XXX», где «XXX» — это следующий шаг в процессе).
    • Если пользователь нажимает кнопку Назад , любые изменения, внесенные в флажки или переключатели на странице, должны быть отменены, а исходные настройки восстановлены. Тот же самый принцип, очевидно, выполняется, если пользователь нажимает кнопку Отмена (хотя навигационные веб-страницы не нуждаются в опции отмены, потому что кнопка Назад служит той же цели).
    • Если пользователь сначала нажимает Назад , а затем Вперед , то наиболее целесообразно интерпретировать эту последовательность как пару Отменить-Повторить, что означает, что внешний вид элементов управления должен отображать изменения пользователя, как если бы пользователь никогда не нажимал Назад .Эти изменения по-прежнему не должны вступать в силу в серверной части, пока пользователь не нажмет «ОК» или аналогичную команду.

Почему эти рекомендации имеют значение

Я просто разборчив, когда настаиваю на правильном использовании флажков и переключателей? Нет. Есть веские причины для того, чтобы следовать стандартам графического интерфейса и правильно использовать элементы управления.

Наиболее важно то, что , следуя стандартам проектирования, расширяет возможности пользователей предсказывать, что будет делать элемент управления и как они будут с ним работать.Когда пользователи видят список флажков, они знают, что могут выбрать несколько вариантов. Когда они видят список переключателей, они знают, что могут выбрать только один. (Конечно, не каждый пользователь знает это, но многие знают, тем более что это было стандартом дизайна с 1984 года.)

Поскольку многие люди знают, как работать со стандартными виджетами графического интерфейса пользователя, правильное использование этих элементов дизайна усиливает у пользователей чувство владения технологиями. И наоборот, , нарушая стандарты, делает пользовательский интерфейс хрупким — как будто все может случиться без предупреждения.Предположим, например, что вы предполагаете, что можете щелкнуть переключатель без какого-либо немедленного воздействия, и, таким образом, можете рассмотреть свой выбор после выбора, но до нажатия «ОК». В таком случае неприятно, когда веб-сайт нарушает этот стандарт и неожиданно перемещает вас на следующую страницу после того, как вы вводите выбор. Хуже того, это заставляет вас опасаться того, что может произойти, когда вы работаете с формами в другом месте на сайте.

Самые большие проблемы с удобством использования для флажков и переключателей возникают из-за расплывчатых, вводящих в заблуждение или описывающих параметры, которые обычным пользователям недоступны для понимания .Контекстная справка может решить последнюю проблему, но все же лучше всего протестировать пользователем любой важный набор элементов управления взаимодействием. К счастью, флажки и переключатели легко протестировать с помощью бумажного прототипа, поэтому вам не нужно ничего реализовывать, чтобы увидеть, понимают ли пользователи метки и могут ли они правильно использовать виджеты.

Ни один профессиональный дизайнер взаимодействия не совершит ошибку, используя флажки, когда требуются переключатели. Различие между этими двумя элементами управления — одна из первых вещей, которую преподают в любом классе интерактивного дизайна.Итак, вот последняя причина использовать правильный виджет: если вы этого не сделаете, вас примут за любителя.

Радиокнопок

Радиокнопки позволяют выбрать одну опцию из группы взаимоисключающих опций.

Использование

Используйте радиокнопки, чтобы предоставить людям выбор из двух или пяти взаимоисключающих вариантов. Например, чтобы предложить выбор способа сохранения загрузок.

Комбинация

Обозначение групп радиокнопок

Начинайте каждую группу переключателей с метки, которая определяет, о чем эти опции.

Между 2-5 вариантами

До

Объединяйте переключатели в группы от двух до пяти взаимоисключающих вариантов.

Не

Никогда не используйте только один переключатель, лучше вместо него установите флажок.

Не

Если есть более пяти вариантов, рассмотрите другие варианты. Это может быть выпадающий список или сокращение вариантов.

Всегда точно один выбранный вариант

В любой группе переключателей всегда нужно выбирать одну.Не используйте группу переключателей, если не выбрана ни одна из выбранных кнопок.

До

Не

После выбора опции пользователь не может снова перейти в это состояние.

Рассмотрим порядок выбора

  • Если возможно, сделайте первый выбор по умолчанию.

  • Если варианты выбора описывают диапазон воздействия на поведение в Интернете, упорядочивайте их от наибольшего воздействия к наименьшему.Не устанавливайте значение по умолчанию наверх, если это нарушает последовательность.

Стиль

Индикатор и этикетка

Используйте индикатор, чтобы показать, выбран ли переключатель.

Используйте этикетку, чтобы сделать выбор ясным.

Размеры

Угловой радиус: 100%

Высота: 16px

Ширина: 16px

Отступ по горизонтали: 4px

Текст и цвет

Текст: Body 10

Цвет текста: серый 90 # 0c0c0d

Поведение

Выбрано / Не выбрано

Выбрано:

Значок: радио-кнопка-маркер

Цвет фона: Синий 60 # 0060df

Не выбрано:

Цвет фона: Серый 90 a10 rgba (12, 12, 13, 0.1)

Граница: 1px Серый 90 a30 rgba (12, 12, 13, 0,3)

Clicktarget

Радиокнопку можно выбрать, щелкнув область ее индикатора, а также его метку. Обычно цель clicktarget имеет одинаковую ширину для каждого элемента в наборе переключателей. Это приводит к тому, что цель щелчка выходит за пределы метки для всех элементов, которые короче самого длинного.

Щелчок по радиокнопке выбирает его при отпускании щелчка.Если во время щелчка мышь перемещается с переключателя, он не становится выбранным.

Взаимодействие

Выбрано

Цвет фона:

По умолчанию: синий 60 # 0060df

Наведение: синий 70 # 003eaa

Прессованный: синий 80 # 002275

Не выбран

Цвет фона:

По умолчанию: серый 90 a10 rgba (12, 12, 13, 0.1)

Наведение: серый 90 a20 rgba (12, 12, 13, 0,2)

Прессованный: серый 90 a30 rgba (12, 12, 13, 0,3)

Сосредоточено

Интерактивный пример (в настоящее время правильно отображается только в Firefox.)

Граница: отсутствует

Box Shadow: 0 0 0 1px # 0a84ff inset, 0 0 0 1px # 0a84ff, 0 0 0 4px rgba (10, 132, 255, 0.3)

Правила копирования

  • Используйте повелительный голос для меток переключателей.

  • Не используйте терминальную пунктуацию для меток переключателей.

  • Поддерживать параллельное построение списков связанных меток переключателей.

Радиокнопка | Примеры прототипирования

Что такое радио-кнопка?

Радиокнопка — это простой способ выбора между двумя или более вариантами. Радиокнопки обычно используются при разработке онлайн-форм или анкет.

Если этот флажок не установлен, переключатели обычно имеют форму небольшого кружка с черным контуром и белой заливкой — хотя вы, конечно, можете сделать их любого размера и цвета по своему желанию.Однако при нажатии в центре переключателя обычно появляется точка, указывающая на то, что этот параметр выбран.

Почему они называются переключателями?

Достаточно логично, что радиокнопки получили свое название от физических кнопок на старых радиостанциях. При выборе полосы пропускания радиосвязи, например AM, FM или MW, необходимо было отменить выбор предыдущей полосы пропускания. По этой причине нажатие кнопки новой полосы пропускания автоматически приводило к тому, что старая кнопка полосы пропускания снова выдвигалась в нейтральное, отключенное положение.

В веб-дизайне переключатели работают точно так же. Независимо от того, используют ли кнопки HTML, CSS или Javascript, нажатие на другую кнопку автоматически отменяет выбор предыдущей опции.

Когда использовать радио-кнопки?

Радиокнопки часто включаются в формы, когда пользователь должен выбрать один из нескольких вариантов, которые представлены вместе как группа. С помощью переключателей одновременно можно выбрать только одну кнопку в группе, поэтому пользователи вынуждены выбирать только один вариант из нескольких.

Радиокнопка против флажка: что использовать?

Поскольку они имеют совершенно разные практические применения, важно понимать разницу между флажком и переключателями.

Чтобы уточнить, мы можем сказать, что определяющей характеристикой радиокнопок является именно тот факт, что независимо от того, сколько различных опций включено в группу, только один из них может быть выбран одновременно. Это варианты «или / или».

С другой стороны, с помощью флажков пользователи могут выбрать несколько или ни один из предложенных вариантов.

Используйте переключатели, когда:
● Возможные ответы на данный вопрос по своей природе исключают друг друга. Например. логически ответ не может быть одновременно «яблоком» и «апельсином», но должен быть либо тем, либо другим. Если некоторые пользователи потенциально могут предпочесть выбрать ни яблоко, ни апельсин, обязательно установите для этого переключатель — например, помеченный «ни один» или «другой» — иначе они рискнут отказаться, не заполнив форму.

Используйте флажок, если:

● Вы хотите предоставить пользователям возможность выбрать более одного ответа из списка, состоящего из нескольких вариантов, включая ноль, один или несколько.Например. каждый флажок не зависит от всех других флажков в списке, поэтому выбор данной опции не отменяет выбор каких-либо других.

● Есть только один вариант — и в любом случае пользователь не обязательно должен его выбирать. Например, это может произойти, когда пользователи спрашивают, хотят ли пользователи подписаться на список рассылки. В этом случае, если оставить флажок не установленным, это будет означать, что пользователь , а не , желает получать информационный бюллетень, тогда как установка флажка подписывает их.

Создание группы переключателей

При настройке элементов формы в HTML, чтобы их можно было читать как группу, все параметры в вашей группе переключателей должны иметь одно и то же имя. После создания группы с правильным значением атрибута name пользователи, выбирающие любой переключатель в этой группе, смогут выбрать только один вариант при заполнении формы. Как только они выберут один переключатель, все остальные переключатели в той же группе автоматически отключатся.

Как создать радиокнопку во Framer

Создание элемента формы радиокнопки легко создать с помощью компонента Radio Buttons по умолчанию. Этот компонент позволяет добавлять в прототипы полностью настраиваемые группы переключателей. Вы можете настроить стили для активного, неактивного состояния и состояния наведения, а также установить переход к определенному экрану в зависимости от выбранной опции. Все, что вам нужно сделать, это перетащить компонент на холст, чтобы начать!

Радиокнопок — приложения Win32

  • Читать 9 минут

В этой статье

Примечание

Это руководство по дизайну было создано для Windows 7 и не обновлялось для новых версий Windows.Большая часть рекомендаций по-прежнему применима в принципе, но презентация и примеры не отражают наши текущие рекомендации по проектированию.

С помощью переключателя пользователи могут выбирать между набором взаимоисключающих, связанных опций. Пользователи могут выбрать один и только один вариант. Радиокнопки называются так потому, что они работают как предустановки каналов на радио.

Типичная группа переключателей.

Группа переключателей ведет себя как один элемент управления. Только выбранный вариант доступен с помощью клавиши Tab, но пользователи могут циклически перемещаться по группе с помощью клавиш со стрелками.

Это правильный контроль?

Для принятия решения рассмотрите следующие вопросы:

  • Используется ли элемент управления для выбора одного варианта из набора взаимоисключающих вариантов? Если нет, используйте другой элемент управления. Чтобы выбрать несколько вариантов, используйте вместо них флажки, список с множественным выбором или список флажков.

  • Количество вариантов от двух до семи? Поскольку используемое пространство экрана пропорционально количеству опций, оставьте количество опций в группе от двух до семи.Для восьми или более вариантов используйте раскрывающийся список или список с одним выбором.

  • Будет ли флажок лучше? Если есть только два варианта, вы можете использовать один флажок. Однако флажки подходят только для включения или выключения одного параметра, тогда как переключатели могут использоваться для совершенно разных альтернатив. Если возможны оба решения:

    • Используйте переключатели, если значение снятого флажка не совсем очевидно.

      Неправильно:

      Правильно:

      В правильном примере варианты не являются противоположными, поэтому радиокнопки — лучший выбор.

    • Используйте переключатели на страницах мастера, чтобы очистить альтернативы, даже если в противном случае можно установить флажок.

    • Используйте радиокнопки, если у вас достаточно места на экране, а параметры достаточно важны, чтобы эффективно использовать это пространство на экране.В противном случае используйте флажок или раскрывающийся список.

      Неправильно:

      В этом примере параметры не настолько важны, чтобы использовать переключатели.

      Правильно:

      В этом примере флажок позволяет эффективно использовать пространство экрана для этой периферийной опции.

    • Установите флажок, если на странице есть другие флажки.

  • Может ли раскрывающийся список быть лучшим выбором? Если параметр по умолчанию рекомендуется для большинства пользователей в большинстве ситуаций, переключатели могут привлечь больше внимания к параметрам, чем необходимо.

    • Рассмотрите возможность использования раскрывающегося списка, если вы не хотите привлекать внимание к параметрам или не хотите побуждать пользователей вносить изменения. Выпадающий список фокусируется на текущем выборе, тогда как переключатели выделяют все параметры одинаково.

      В этом примере раскрывающийся список фокусируется на текущем выборе и отговаривает пользователей от внесения изменений.

    • Рассмотрите раскрывающийся список, если на странице есть другие раскрывающиеся списки.

  • Что лучше: набор командных кнопок, командных ссылок или разделенная кнопка? Если радиокнопки используются только для того, чтобы влиять на выполнение команды, часто лучше вместо этого представить варианты команды. Это позволяет пользователям выбрать правильную команду за одно взаимодействие.

  • Представляют ли параметры параметры программы, а не данные? Значения параметров не должны основываться на контексте или других данных.Для данных используйте раскрывающийся список или список с одним выбором.

  • Если элемент управления используется на странице мастера или панели управления, является ли элемент управления ответом на основную инструкцию и могут ли пользователи позже изменить выбор? Если да, рассмотрите возможность использования командных ссылок вместо переключателей, чтобы сделать взаимодействие более эффективным.

  • Значения нечисловые? Для числовых данных используйте текстовые поля, раскрывающиеся списки или ползунки.

Руководящие принципы

Общие

  • Перечислите параметры в логическом порядке, например, от наиболее вероятного выбора до наименьшего, от простейшей операции до наиболее сложной или с наименьшим риском для большинства.Алфавитный порядок не рекомендуется, поскольку он зависит от языка и, следовательно, не может быть локализован.

  • Если ни один из вариантов не является допустимым, добавьте еще один вариант, чтобы отразить этот выбор, , например «Нет» или «Не применяется».

  • Предпочитайте выравнивать переключатели по вертикали, а не по горизонтали. Горизонтальное выравнивание труднее читать и локализовать.

    Правильно:

    В этом примере переключатели выровнены по вертикали.

    Неправильно:

    В этом примере сложнее прочитать выравнивание по горизонтали.

  • Еще раз подумайте об использовании групповых полей для организации групп переключателей — это часто приводит к ненужному беспорядку на экране.

  • Не используйте метки переключателей в качестве меток группового поля.

  • Не используйте выбор переключателя для:

    • Выполнять команды.
    • Отображение других окон, например диалогового окна, для сбора дополнительных данных.
    • Динамически отображать или скрывать другие элементы управления, связанные с выбранным элементом управления (программы чтения с экрана не могут обнаружить такие события). Однако вы можете изменять текст динамически в зависимости от выбора.

Подчиненные органы управления

  • Поместите подчиненные элементы управления справа или ниже (с отступом, на одном уровне с меткой переключателя) переключателя и его метки. Заканчивайте метку радиокнопки двоеточием.

    В этом примере радиокнопка и подчиненный ей элемент управления совместно используют метку радиокнопки и ее ключ доступа. В этом случае клавиши со стрелками перемещают фокус с переключателя на подчиненное ему текстовое поле.

  • Оставьте зависимые редактируемые текстовые поля и раскрывающиеся списки включенными, если они используют метку переключателя. Когда пользователь вводит или вставляет что-либо в поле, автоматически выбирает соответствующий параметр. Это упрощает взаимодействие.

    В этом примере при вводе номера страницы автоматически выбираются страницы.

  • Избегайте вложения переключателей с другими переключателями или флажками. Если возможно, оставьте все параметры на одном уровне.

    Правильно:

    В этом примере параметры находятся на одном уровне.

    Неправильно:

    В этом примере использование вложенных параметров добавляет ненужной сложности.

  • Если вы вставляете переключатели с другими переключателями или флажками, отключите эти подчиненные элементы управления, пока не будет выбран параметр высокого уровня. Это позволяет избежать путаницы в значении подчиненных элементов управления.

Значения по умолчанию

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

  • Исключения: Нет выбора по умолчанию, если:

    • Не существует приемлемого варианта по умолчанию по соображениям безопасности, защиты или по юридическим причинам, поэтому пользователь должен сделать явный выбор. Если пользователь не сделал выбор, отобразить сообщение об ошибке, чтобы сделать выбор.
    • Пользовательский интерфейс (UI) должен отражать текущее состояние, и этот параметр еще не установлен. Значение по умолчанию неправильно означает, что пользователю не нужно делать выбор.
    • Цель — сбор объективных данных. Значения по умолчанию могут повлиять на сбор данных.
    • Группа переключателей представляет свойство в смешанном состоянии , которое происходит при отображении свойства для нескольких объектов, у которых разные настройки. В этом случае не отображайте сообщение об ошибке, поскольку каждый объект имеет допустимое состояние.
  • Сделайте первый вариант параметром по умолчанию , поскольку пользователи часто этого ожидают — если этот порядок не является логическим.Для этого вам может потребоваться изменить метки параметров.

    Неправильно:

    В этом примере вариант по умолчанию — не первый вариант.

    Правильно:

    В этом примере метки параметров изменены, чтобы сделать первый вариант параметром по умолчанию.

Рекомендуемый размер и шаг

Рекомендуемый размер и интервал для переключателей.

Этикетки

Ярлыки радиокнопок

  • Обозначьте каждую радиокнопку.
  • Назначьте уникальный ключ доступа для каждой метки. Инструкции см. В разделе Клавиатура.

  • Используйте заглавные буквы в стиле предложения.

  • Напишите метку как фразу, а не как предложение, и не используйте конечную пунктуацию.

    • Исключение: Если метка переключателя также помечает подчиненный элемент управления, который следует за ним, завершите метку двоеточием.
  • Используйте параллельную формулировку и старайтесь, чтобы длина была примерно одинаковой для всех этикеток.

  • Сосредоточьте внимание в тексте метки на различиях между вариантами. Если все параметры имеют одинаковый вводный текст, переместите этот текст на метку группы.

  • Используйте позитивную формулировку. Например, используйте do вместо do и print вместо do not print.

  • Опишите только вариант с этикеткой. Держите ярлыки краткими, чтобы на них было легко ссылаться в сообщениях и документации. Если для параметра требуется дополнительное объяснение, предоставьте объяснение в статическом текстовом элементе управления, используя полные предложения и завершающие знаки препинания.

    В этом примере параметры объясняются с помощью отдельных элементов управления статическим текстом.

    Примечание

    Добавление пояснения к одному переключателю не означает, что вы должны предоставить объяснение для всех переключателей. Если можете, укажите соответствующую информацию на этикетке и используйте пояснения только при необходимости. Не просто переформулируйте ярлык для единообразия.

  • Если вариант настоятельно рекомендуется, добавьте на этикетку «(рекомендуется)». Обязательно добавьте на этикетку элемента управления, а не в дополнительные примечания.

  • Если параметр предназначен только для опытных пользователей, добавьте к метке «(расширенный)». Обязательно добавьте на этикетку элемента управления, а не в дополнительные примечания.

  • Если необходимо использовать многострочные метки, совместите верх метки с переключателем.

  • Не используйте подчиненный элемент управления, содержащиеся в нем значения или его метку единиц измерения для создания предложения или фразы.Такой дизайн нельзя локализовать, потому что структура предложения зависит от языка.

Ярлыки групп радиокнопок

  • Используйте метку группы, чтобы объяснить назначение группы, а не то, как сделать выбор. Предположим, что пользователи знают, как использовать переключатели. Например, не говорите «Выберите один из следующих вариантов».

  • Все группы радиокнопок нуждаются в метках. Напишите метку как слово или фразу, а не как предложение, заканчивая двоеточием, используя статический текст или групповое поле.

    Исключение: Пропустите метку, если это просто повторение основной инструкции диалогового окна. В этом случае основная инструкция принимает двоеточие (если это не вопрос) и ключ доступа (если он есть).

    Допустимо:

    В этом примере метка группы переключателей — это просто повторение основной инструкции.

    Лучше:

    В этом примере лишняя метка удалена, поэтому основная инструкция принимает двоеточие.

  • Не назначать метке ключ доступа. В этом нет необходимости, и это затрудняет назначение других клавиш доступа.

    • Исключение: Если не все элементы управления могут иметь уникальные ключи доступа, вы можете назначить ключ доступа метке вместо отдельных элементов управления. Дополнительные сведения см. В разделе «Клавиатура».

Документация

При обращении к переключателям:

  • Используйте точный текст метки, включая его заглавные буквы, но не включайте подчеркивание клавиши доступа или двоеточие.
  • В документации по программированию и другой технической документации радиокнопки называются радиокнопками. Повсюду используйте кнопки выбора, особенно в пользовательской документации.
  • Для описания взаимодействия с пользователем используйте щелчок.
  • По возможности отформатируйте этикетку, используя полужирный текст. В противном случае заключите метку в кавычки, только если это необходимо, чтобы избежать путаницы.

Пример: щелкните Текущая страница , а затем щелкните ОК .

Радиокнопки — Кнопки — macOS — Руководство по человеческому интерфейсу

Кнопки радио

Радиокнопка — это маленькая круглая кнопка, за которой следует заголовок.Обычно представленные группами от двух до пяти переключателей предоставляют пользователю набор связанных, но взаимоисключающих вариантов. Состояние радиокнопки либо включено (закрашенный кружок), либо выключено (пустой кружок).

Радиокнопка также может разрешать смешанное состояние (кружок с тире), которое частично включено и частично выключено. Однако лучше использовать флажки, когда вашему приложению требуется смешанное состояние.

Дайте переключателям понятные названия. Название каждого переключателя должно четко описывать эффект от его выбора.Как правило, используйте заглавные буквы в стиле предложения, не заканчивая знак препинания.

Предпочитайте стандартную кнопку вместо переключателя, чтобы инициировать действие. Радиокнопки предоставляют пользователю опции. Радиокнопка, запускающая действие, сбивает с толку и не интуитивно понятна.

Используйте переключатели в виде, а не в рамке окна. Радиокнопки не предназначены для использования в частях оконных рам, например, на панелях инструментов и строках состояния.

Рассмотрите возможность использования метки для введения группы переключателей. Опишите набор параметров и выровняйте базовую линию метки с базовой линией заголовка первого переключателя.

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

Рассмотрите возможность установки флажка, когда пользователю нужно выбрать одно из двух состояний. Состояния включения и выключения флажка обычно ясны для большинства пользователей, а флажок занимает меньше места, чем набор переключателей.См. Флажки. В редких случаях, когда флажок недостаточно ясен, может потребоваться набор переключателей с описательными заголовками.

Используйте набор флажков, когда пользователю требуется возможность выбрать несколько параметров одновременно.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *