webdonsk.ruКак сделать радиобаттон
Добавил пользователь Евгений Кузнецов Обновлено: 28.08.2024
Доброго времени суток, любители веб-разработки и мои дорогие подписчики. Сегодняшняя статья будет посвящена разбору Bootstrap radiobutton.
Я во всех подробностях расскажу вам, что это за кнопки и для чего их обычно используют в пользовательском интерфейсе, перечислю все способы их создания, объясню роль каждого ключевого слова в коде и конечно же для наглядности приведу в пример несколько небольших приложений. Ну что ж, приступим к работе!
Что за странные кнопки и зачем они нужны?
Давайте вспомним те ситуации, когда при установке какого-либо программного продукта вам нужно выбрать сам способ установки. Из предложенных вариантов вы выбираете один наиболее подходящий и отмечаете его, нажав на круг слева от описания способа. Область круга закрашивается.
Теперь вспомните другую ситуацию. При посещении некоторых сайтов перед вами всплывает окошко с опросом, где вам необходимо указать свой пол и возраст. Там из предложенной однотипной группы вариантов вы выбираете один подходящий ответ.
Все это и является radio button-ами. Таким образом, радиокнопка – это особый вид кнопки, которая создается и функционирует в единственном экземпляре или (в основном) внутри определённой группы похожих элементов, позволяя при этом выбрать один единственный вариант ответа.
Варианты создания Radio Buttons
Во фреймворке Bootstrap данный вид кнопок вошел в раздел Input groups. Все элементы данной группы расширяют возможности форм и обязательно создаются внутри непарного тега .
Radio Buttons можно реализовать несколькими способами:
При этом отличаться они будут только внешним видом, а вот сама реализация инструмента в коде будет практически идентичной.
Radiobuttons в виде кнопок
Ну а теперь пришло время рассмотреть первый пример. В своем приложении я создал несколько описываемых элементов, принимающих вид обычных кнопок.
Radio buttons – одни из важнейших элементов форм. Они используются, когда есть список двух или более взаимоисключаемых опций, из которых пользователь должен выбрать что-то одно. Другими словами, если кликнуть на невыбранный пункт, то выделение с ранее выбранного варианта снимется.
Пример radio buttons
Radio buttons классно работают при корректном использовании – они защищают пользователей от введения ошибочных данных, так как дают выбирать только среди корректных вариантов. В них есть много интересных возможностей, таких как навигация с помощью клавиатуры, стабильный кросс-платформенный рендеринг. В этом посте мы рассмотрим практические советы по использованию radio buttons на основе тестирования юзабилити.
Как radio buttons вошли в обиход?
Radio buttons были названы в честь физических кнопок, используемых на старых автомобильных радиоприемниках для смены станций – когда нажата одна кнопка, остальные отжаты, так что только нажатая остается “активной”. Программная radio button была смоделирована по образу и подобию физических.
Нажать можно только одну кнопку за раз. Источник: Tumblr
Лучшие советы по использованию radio buttons
Используйте radio buttons только для настроек
Если radio buttons используются только для влияния на то, как выполняется команда, часто вместо этого лучше презентовать варианты команды. Так вы позволите пользователю выбрать нужную команду в одно действие.
Кнопочный ввод позволяет сделать выбор в одно касание. Источник: LukeW
Логический порядок опций
Вы должны располагать варианты в логическом порядке, например, от наиболее вероятного выбора до наименее вероятного, от простейших операций к самым сложным, или от меньшего риска к большему. Алфавитный порядок не рекомендуется, потому что он зависит от языка, поэтому такой порядок не локализуем.
Опции должны быть исчерпывающими и четко отличающимися друг от друга
Самые большие проблемы в юзабилити radio buttons начинаются с неопределенных, расплывчатых надписей, или описаний, которые невозможно понять среднестатистическому пользователю. Контекстные подсказки могут облегчить жизнь пользователю, но все равно лучше сначала протестировать любой важный набор опций на пользователях.
Всегда предлагайте выбор по умолчанию
Одна из 10 эвристик UI-дизайна гласит, что пользователи должны иметь возможность отменить (и повторить) свои действия. Это означает, что нужно позволять людям менять элемент управления на его первоначальное состояние. Это означает, что в radio button всегда должен быть минимум один вариант, выбранный по умолчанию. Выберите самый безопасный (без потери данных или доступа в систему) вариант, самую безопасную опцию. Если безопасность роли не играет, выберите самую вероятную или самую удобную опцию.
Если пользователям понадобится воздержаться от выбора, вы должны предоставить радикнопку для такого варианта, например, с надписью “None.” Предложить пользователям точную, нейтральную опцию – гораздо лучше, чем неявно намекать на возможность не выбрать ни один вариант из списка.
Старайтесь располагать ваши списки вертикально
Горизонтальные radio buttons иногда сложно сканировать и локализировать. Горизонтальное расположение radio buttons также может вызвать сложности с определениям, какая надпись какой кнопке соответствует: надпись над кнопкой или под ней. Вертикальное позиционирование безопаснее.
Постарайтесь располагать списки выборов вертикально, по одному выбору на строку. Если вам все же необходим горизонтальный макет с несколькими опциями на строку, обязательно добавьте интервалы между кнопками и надписями, чтобы было полностью понятно, какая кнопка какой надписи соответствует. Например, вы должны избегать ситуации, при которой сложно понять, на какую кнопку стоит кликнуть, чтобы выбрать вариант четыре.
Плохо: горизонтальные radio buttons.
Используйте теги с надписями как область касания или клика
Radio buttons крошечные по своей природе, и поэтому, по закону Фиттса, их трудно кликнуть или коснуться пальцем. Чтобы увеличить область касания, позвольте пользователю выбрать опцию, кликая или касаясь не только саму кнопку, а и надпись, которая к ней привязана. Пусть пользователи смогут выбрать опцию, кликнув на саму кнопку или на ее надпись.
Слева: кликнуть можно только крошечную область кнопки. Справа: Огромная область клика.
Вы можете увидеть хороший пример горизонтальных radio buttons в приложении Duolingo: они используют классические горизонтальные radio buttons, но сделали области касания визуально отличными друг от друга, и достаточно большими для сенсорного управления.
Хорошо: горизонтальные radio buttons
Используйте radio buttons вместо дроп-даунов.
По возможности, используйте radio buttons вместо выпадающих меню. Radio buttons дают меньшую когнитивную нагрузку, потому что все опции находятся перед пользователем, и их легко сравнить.
Когда на выбор дается менее 7 опций, вы должны использовать radio buttons. Ваши пользователи смогут тут же просмотреть все свои варианты действий без каких-либо манипуляций.
Слева: Пол в выпадающем списке. Справа: выбор пола с помощью radio buttons
Избегайте вложений
Избегайте вложенных radio buttons или чекбоксов. Вы должны располагать все опции на одном уровне, чтобы не сбивать пользователя с толку.
Использование вложенных опций добавляет ненужных сложностей
Используйте анимацию и визуальный отклик
Хорошо прорисованные анимации добавляют удобства интерфейсу. Элементы интерфейса, такие как radio buttons, должны выглядеть осязаемыми, даже если они находятся за слоем стекла. Визуальные подсказки немедленно подтверждают выбор и вносят ясность в действия пользователя с помощью видимой реакции.
Может, лучше использовать чекбокс?
Если есть всего два варианта на выбор, лучше используйте чекбокс. Тем не менее, чекбоксы подходят только для включения/выключения единичной опции, а radio buttons можно использовать для совершенно других альтернатив.
Чекбокс. Источник: Material Design
Вы должны помнить следующее, если оба варианта возможны:
Альтернативы. Используйте radio buttons, если смысл невыбранного чекбокса не до конца понятен. В примере ниже выборы противоположны, так что лучше для этой опции использовать radio buttons.
Выберите ориентацию для документа (Ландшафтная или портретная)
Помощник. Вы должны использовать radio buttons на страницах помощника, чтобы внести ясность в альтернативы, даже если чекбокс тоже приемлем. Дизайны с кликнутой по умолчанию radio buttons дают пользователю твердое предложение выбора. Выбор по умолчанию поможет пользователю сделать наилучший выбор, увеличив их уверенность в процессе выбора.
Если опция настоятельно рекомендуется, добавьте к надписи “(recommended)”. Источник: Dropbox
Простые ответы Да и Нет. Использование чекбокса имеет смысл, когда у вас есть один простой вопрос, и пользователю нужно ответить “да” или “нет”.
Простой вопрос можно задать в форме чекбокса
Заключение
Когда вы создаете radio buttons, очень важно следовать стандартам дизайна, потому что это повышает способность пользователя предугадывать, что случится после выбора той или иной опции, и как с ними работать. В то же время, неследование стандартам делает интерфейс нестабильным – как будто что-то может произойти без предупреждения.
Создавайте свои дизайны с заботой. Radio buttons легко тестировать на бумажных прототипах, так что вам не понадобится ничего реализовывать, чтобы проверить, понимают ли пользователи, как использовать ваше решение.
Для того, чтобы оформить чекбоксы и радиокнопки, как того требует дизайн, сегодня не обязательно использовать JavaScript-решения (типа моего плагина jQuery Form Styler), т.к. для этого можно задействовать только CSS, причем с обратной совместимостью для старых браузеров (т.е. не в ущерб юзабилити), которые не поддерживают современные CSS-правила.
Кроме того, сохраняется возможность HTML5-валидации стилизуемых элементов (чего может не быть при использовании JavaScript-плагинов). В современных браузерах ее поддержка — уже давно норма.
- Важные особенности
- Стилизация для современных браузеров
- Теги чекбокса и радиокнопки находятся перед тегом
- Теги чекбокса и радиокнопки находятся внутри тега
- Стилизация с учетом старых браузеров
- Примеры
Важные особенности
Чтобы всё получилось, важно учитывать следующее:
- Кроме, собственно, самого тега элемента, который мы хотим красиво оформить ( или ), понадобится тег , благодаря которому переключать элемент можно, кликая на текст, а не только на сам элемент.
- Тег должен находиться до тега (в этом случае состояние элемента формы переключается с помощью атрибута for ), либо он должен находиться внутри тега (в этом случае атрибут for не нужен, но понадобится тег-обертка для текста).
Стилизация для современных браузеров
Рассмотрим оба вариант расположения стилизуемого элемента формы. Какой из них наиболее удобен — решать вам. Суть от этого не меняется.
Теги чекбокса и радиокнопки находятся перед тегом
В HTML-коде это выглядит следующим образом:
Еще раз хочу заострить ваше внимание — тег обязательно должен быть расположен перед тегом . Если вы поменяете их местами, ничего работать не будет.
CSS-код для чекбокса будет таким:
CSS-код для радиокнопки будет таким:
Теги чекбокса и радиокнопки находятся внутри тега
HTML-код в данном случае будет следующим:
CSS-код для чекбокса будет таким:
CSS-код для радиокнопки будет таким:
Стили здесь те же самые, что и в предыдущем способе, только они применяются для других селекторов.
Стилизация с учетом старых браузеров
CSS-код для чекбокса. В комментариях к коду я добавил пояснения касательно браузеров:
CSS-код для радиокнопки:
Примеры
Вот таким несложным образом это и делается. Благодаря данному способу, оформить чекбоксы и радиокнопки с помощью CSS можно так, как вам будет угодно.
В Tkinter от класса Radiobutton создаются радиокнопки, от класса Checkbutton – флажки.
Радиокнопки не создают по одной, а делают связанную группу, работающую по принципу переключателей. Когда включена одна, другие выключены.
Экземпляры Checkbutton также могут быть визуально оформлены в группу, но каждый флажок независим от остальных. Каждый может быть в состоянии "установлен" или "снят", независимо от состояний других флажков. Другими словами, в группе Checkbutton можно сделать множественный выбор, в группе Radiobutton – нет.
Radiobutton – радиокнопка
Если мы создадим две радиокнопки без соответствующих настроек, то обе они будут включены и выключить их будет невозможно:
Эти переключатели никак не связаны друг с другом. Кроме того для них не указано исходное значение, должны ли они быть в состоянии "вкл" или "выкл". По-умолчанию они включены.
Связь устанавливается через общую переменную, разные значения которой соответствуют включению разных радиокнопок группы. У всех кнопок одной группы свойство variable устанавливается в одно и то же значение – связанную с группой переменную. А свойству value присваиваются разные значения этой переменной.
В Tkinter нельзя использовать любую переменную для хранения состояний виджетов. Для этих целей предусмотрены специальные классы-переменные пакета tkinter – BooleanVar , IntVar , DoubleVar , StringVar . Первый класс позволяет принимать своим экземплярам только булевы значения (0 или 1 и True или False ), второй – целые, третий – дробные, четвертый – строковые.
Здесь переменной r_var присваивается объект типа BooleanVar . С помощью метода set он устанавливается в значение 0.
При запуске программы включенной окажется первая радиокнопка, так как значение ее опции value совпадает с текущим значением переменной r_var . Если кликнуть по второй радиокнопке, то она включится, а первая выключится. При этом значение r_var станет равным 1.
В программном коде обычно требуется "снять" данные о том, какая из двух кнопок включена. Делается это с помощью метода get экземпляров переменных Tkinter.
В функции change в зависимости от считанного значения переменной var ход выполнения программы идет по одной из трех веток.
Мы можем избавиться от кнопки "Изменить", связав функцию change или любую другую со свойством command радиокнопок. При этом не обязательно, чтобы радиокнопки, объединенные в одну группу, вызывали одну и ту же функцию.
Здесь метка будет менять цвет при клике по радиокнопкам.
Если посмотреть на пример выше, можно заметить, что код радиокнопок почти идентичный, как и код связанных с ними функций. В таких случаях более грамотно поместить однотипный код в класс.
В двух последних вариациях кода мы не используем метод get , чтобы получить значение переменной var . В данном случае нам это не требуется, потому что цвет метки меняется в момент клика по соответствующей радиокнопке и не находится в зависимости от значения переменной. Несмотря на это использовать переменную в настройках радиокнопок необходимо, так как она обеспечивает связывание их в единую группу и выключение одной при включении другой.
Checkbutton – флажок
Флажки не требуют установки между собой связи, поэтому может возникнуть вопрос, а нужны ли тут переменные Tkinter? Они нужны, чтобы снимать сведения о состоянии флажков. По значению связанной с Checkbutton переменной можно определить, установлен флажок или снят, что в свою очередь повлияет на ход выполнения программы.
У каждого флажка должна быть своя переменная Tkinter. Иначе при включении одного флажка, другой будет выключаться, так как значение общей tkinter-переменной изменится и не будет равно значению опции onvalue первого флажка.
С помощью опции onvalue устанавливается значение, которое принимает связанная переменная при включенном флажке. С помощью свойства offvalue – при выключенном. В данном случае оба флажка при запуске программы будут выключены, так как методом set были установлены отличные от onvalue значения.
Опцию offvalue можно не указывать. Однако при ее наличии можно отследить, выключался ли флажок.
С помощью методов select и deselect флажков можно их программно включать и выключать. То же самое относится к радиокнопкам.
Практическая работа
Виджеты Radiobatton и Checkbutton поддерживают большинство свойств оформления внешнего вида, которые есть у других элементов графического интерфейса. При этом у Radiobutton есть особое свойство indicatoron . По-умолчанию он равен единице, в этом случае радиокнопка выглядит как нормальная радиокнопка. Однако если присвоить этой опции ноль, то виджет Radiobutton становится похожим на обычную кнопку по внешнему виду. Но не по смыслу.
Напишите программу, в которой имеется несколько объединенных в группу радиокнопок, индикатор которых выключен ( indicatoron=0 ). Если какая-нибудь кнопка включается, то в метке должна отображаться соответствующая ей информация. Обычных кнопок в окне быть не должно.
Помните, что свойство command есть не только у виджетов класса Button .
Курс с примерами решений практических работ: android-приложение, pdf-версия.
Читайте также: