Что такое радиокнопка на сайте

21.09.202222.09.2022 admin 0 Comments

Переключатели

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

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

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

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

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

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

HTML5 IE Cr Op Sa Fx

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

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

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

Источник

Радиокнопка

Радиокнопка (от англ. radio button ), или переключатель — элемент интерфейса, который позволяет пользователю выбрать одну опцию (пункт) из предопределенного набора (группы).

Содержание

Название

Описание

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

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

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

См. также

Примечания

Ссылки

Кнопка последовательного выбора • Двунаправленный счётчик • Выпадающий список • Комбинированный список • Флажок • Ползунок • Радиокнопка • Список • Таблица (Grid view) • Текстовое поле

Heads-up display (в играх • OSD) • Боковая панель • Заставка • Значок • Индикатор процесса • Информационная панель • Метка • Подсказка • Строка состояния • Тост • Троббер • Экран загрузки

Диалоговое окно • Диалоговое окно-предупреждение • Модальное окно • О программе • Окно инспектора объектов • Окно-палитра • Файловый диалог

WIMP • Библиотека элементов интерфейса • Внешний вид (Look and feel) • Менеджер разметки (Layout manager) • Наведение мыши

Полезное

Смотреть что такое «Радиокнопка» в других словарях:

Элемент интерфейса — Кроссплатформенный редактор элементов интерфейса Qt designer Элемент интерфейса примитив графического интерфейса пользователя, имеющий стандартный внешний вид и выполняющий ста … Википедия

Флажок (интерфейс) — Примеры чекбоксов. Флажок (также чекбокс (от англ. check box), галочка) элемент графического пользовательского ин … Википедия

Графический интерфейс пользователя — (ГИП), графический пользовательский интерфейс (ГПИ) (англ. Graphical user interface, GUI; сленг. ГУИ) разновидность пользовательского интерфейса, в котором элементы интерфейса (меню, кнопки, значки, списки и т. п.),… … Википедия

Текстовый интерфейс пользователя — Bash пример консольной программы … Википедия

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

Навигационная цепочка — в файловом менеджере Nautilus … Википедия

Вкладка — У этого термина существуют и другие значения, см. Вкладка (значения) … Википедия

Оконный интерфейс — Пример оконного интерфейса в текстовом режиме (файловый менеджер Midnight Commander) несколько окон (две файловых панели и диалоговое окно поверх них … Википедия

Контекстное меню — Пример контекстного меню на рисунке в OpenOffice.org Writer … Википедия

Панель инструментов — У этого термина существуют и другие значения, см. Панель. Панель инструментов Википедии с кнопками в 2 ряда … Википедия

Источник

Полезные советы, как сделать радиокнопки максимально эффективными

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

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

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

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

Элемент был назван по аналогии с кнопками, которые использовались в автомобильных радиоприемниках для выбора определенной радиостанции. Аналогичное решение в СССР широко применялось в телевизорах.

Особенности

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

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

Поведение единственной радиокнопки в группе не определено – в такой ситуации, она должна действовать как чекбокс.

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

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

Преимущества:

Недостатки:

Советы, как сделать радиокнопки максимально эффективными:

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

✓ Удачный пример с сайта Dropbox

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

✘ Неудачный пример – отсутствие кнопки по умолчанию

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

✓ Удачный пример с использованием раскрывающегося списка

3. Флажки и радиокнопки внутри своих групп расставлены по вертикали.

✘ Неудачный пример с горизонтальным расположением списка с сайта EDF

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

Радиокнопки-значки

Радиокнопки-значки работают точно так же, как и радиокнопки: одна кнопка всегда нажата и каждый раз, когда нажимается другая кнопка, первая возвращается в исходное состояние. Отличный пример – элементы, управляющие выравниванием текста в Word.

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

Преимущества:

Недостатки:

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

Проверьте эффективность радиокнопок на вашем сайте прямо сейчас → Обратитесь к нашим экспертам прямо сейчас!

Материалы по теме

Источник

Простая кастомизация Checkbox и Radio

Вместо вступления

Всем доброго времени суток!

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

К сожалению, одного только CSS частенько не достаточно, чтобы с легкостью оформить тот или иной элемент формы. Наверное поэтому многие используют штуки вроде Uniform для своих форм. Лично я всегда стараюсь сократить количество Javascript, используемого в подобных целях, поэтому хочу рассказать о совершенно нативном HTML+CSS методе кастомизации радио-кнопок и чекбоксов.

Уверен, что на большая часть специалистов на Хабре, применяют схожие методы, для тех же, кто использует js-библиотеки, вроде Uniform, надеюсь будет полезной эта статья.

Поехали!

Итак, сразу поставим цель: оформить чекбоксы и радио-кнопки, чтобы внешне они были похожи на js-магию Uniform, но сделать это максимально простым, нативным по отношению в HTML и CSS способом, а также избежать применения лишних тегов, сохраняя семантику. Как-то так.

Основная идея строится на нативном «умении» HTML тега label устанавливать связь с определенным элементом формы. Собственно и все, дальше только код.

Разметка

ul >
li >
input id = «cfirst» type = «checkbox» name = «first» checked hidden / >
label for = «cfirst» > Checked checkbox / label >
/ li >
li >
input id = «csecond» type = «checkbox» name = «second» hidden / >
label for = «csecond» > Unchecked checkbox / label >
/ li >
li >
input id = «cthird» type = «checkbox» name = «third» hidden disabled / >
label for = «cthird» > Disabled checkbox / label >
/ li >
li >
input id = «clast» type = «checkbox» name = «last» checked hidden disabled / >
label for = «clast» > Disabled checked checkbox / label >
/ li >
/ ul >
ul >
li >
input id = «rfirst» type = «radio» name = «radio» checked hidden / >
label for = «rfirst» > Checked radio / label >
/ li >
li >
input id = «rsecond» type = «radio» name = «radio» hidden / >
label for = «rsecond» > Unchecked radio / label >
/ li >
li >
input id = «rthird» type = «radio» name = «radio» hidden disabled / >
label for = «rthird» > Disabled radio / label >
/ li >
/ ul >

Совершенно нативная разметка. Использование label вместе с input прям как из учебников. Важным моментом является только то, что нужно указывать id для каждого input и for для label, чтобы связать их.

Думаю все заметили использование атрибута hidden, который скрывает сами input элементы, однако благодаря связи с label, мы все еще может манипулировать ими. В результате мы получаем что-то вроде:

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

Оформление

Тут все так же максимально просто. Используем псевдо-элемент before для того, чтобы показывать наши «виртуальные контролы» и пользователь не заметил подмены. Части спрайта, меняем в зависимости от состояния input‘а.

В результате получаем что-то вроде:

Выгода использования подобного подхода по сравнению с тем же Uniform очевидна. Никаких javascript для оформления, никаких лишних тегов, более простая, правильная и семантичная разметка. Такой же способ можно использовать для придания данным элементам более причудливых форм. К примеру, без проблем можно заделать чекбоксы в стиле iPhone не применяя при этом javascript.

Надеюсь для статья будет полезна начинающим верстальщикам и остановит их о использования js-костылей для подобных целей. Спасибо за внимание!

UPD: Как было отмечено уважаемым SelenIT2 данный способ вероятно не будет работать в браузере Safari под платформу iOS из-за досадной ошибки в поддержке html спецификации (ссылка).

Источник

Радио-кнопка

Радио-кнопка (radio button) — элемент графического пользовательского интерфейса, который позволяет пользователю выбрать опцию из предопределенного набора.

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

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

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

При использовании HTML формы, если ни одна кнопка в группе не выбрана, то серверу будет отправлена пустая строка. Например, если имеется переключатель группы с именем «Gender» («Пол») и вариантами «мужской» и «женский», переменная Gender не будет отправлена даже с пустым значением.

См. также