Радиокнопки
Радиокнопки следует использовать всякий раз, когда вы хотите дать своему пользователю выбор между двумя или более опциями. Они очень похожи на флажки, но вместо того, чтобы разрешить ноль или несколько вариантов выбора в группе параметров, переключатель заставит вас выбрать только один. В своей самой простой форме переключатель — это просто элемент ввода со свойством type, установленным в radio, например:
Однако, как и для всех элементов ввода, вам нужно определить имя, чтобы оно было пригодно для использования — без имени элемент не будет идентифицируемым при отправке формы обратно на сервер для обработки. Вы также хотите установить значение — это будет значение, отправленное на сервер, если выбран переключатель. Вот пример:
Итак, теперь у нас есть полнофункциональная радиокнопка, которую можно отправить обратно на сервер. Однако, если вы попробуете этот пример, вы заметите, что одна кнопка-переключатель не имеет смысла. Это связано с природой переключателя, который всегда предлагает вам выбрать между двумя или более вариантами — если у вас есть только один вариант (включен или выключен), то вам следует использовать флажок (checkbox).
Имея это в виду, позвольте мне показать вам гораздо более полный пример, где у нас есть несколько переключателей, которые предлагают вам выбрать вашего любимого питомца:
Cats
Dogs
Birds
Обратите внимание, что все три переключателя имеют одинаковое значение в свойстве name — это очень важно, поскольку оно связывает переключатели в одной группе. Поскольку в группе переключателей может быть только один выбор, это означает, что при выборе одного из переключателей любой другой отмеченный переключатель станет не отмеченным. С другой стороны, свойство value, как правило, должно быть уникальным, поскольку это значение используется для представления выбора пользователя для этой группы параметров.
Включен ли переключатель или нет?
Если вы посмотрите предыдущие примеры, вы заметите, что ни одна из переключателей по умолчанию не включена. Для флажков это может иметь смысл, но с помощью переключателей вы обычно хотите заставить пользователя выбрать один из вариантов. Конечно, это можно сделать с помощью валидации, но гораздо проще предварительно проверить одну из опций. Это очень просто — просто используйте свойство checked:
Обратите внимание, как слово «флажок» было добавлено в первую радиокнопку — теперь это будет проверено с самого начала, что позволяет пользователю изменять выбор, но в основном делает невозможным НЕ выбирать ни один из параметров. Для записи, в старые времена XHTML, где каждый атрибут всегда должен иметь значение (даже логические атрибуты), это выглядело бы так:
Любой способ должен работать во всех современных браузерах, но первый способ короче и более похож на HTML5.
Ярлыки для радиокнопок
Если вы проверили предыдущий пример, вы заметите, что мы можем поместить текст рядом с переключателем, но это по-прежнему две разные вещи — вы не можете щелкнуть текст, чтобы вызвать переключатель. Это может быть очень раздражающим для пользователя, но, к счастью для нас, это легко решить: просто используйте label ! Вот основной пример, чтобы показать вам разницу:
Две радиокнопки — одна без метки и одна с меткой. Они могут выглядеть почти одинаково, но тот, у которого есть метка, может быть активирован нажатием как самой кнопки-переключателя, так и прикрепленной метки. Это хорошо, если вы сидите на настольном компьютере с мышью, но еще лучше, когда вы используете сенсорное устройство, такое как смартфон, где маленькие радиокнопки или флажки могут быть трудно ударить пальцем.
Ярлык (label) очень прост — он использует атрибут for, чтобы присоединиться к элементу формы с соответствующим атрибутом id (обратите внимание, что у меня есть «dogs» в обоих местах).
Динамическая работа с переключателями
Как и любой другой элемент DOM, вы можете управлять переключателями с помощью JavaScript. Чтобы показать вам, как это работает, вот небольшой пример, где мы используем JavaScript, чтобы проверить, какой вариант был выбран, а затем попросить пользователя подтвердить его перед отправкой формы:
Cats
Dogs
Birds
function ValidateForm()
var radioButtons = document.getElementsByName("favorite_pet");
for(var i = 0; i < radioButtons.length; i++)
if(radioButtons[i].checked == true)
if(confirm("You have selected " + radioButtons[i].value + " as your favorite pet. Is that correct?"))
return true;
else
return false;
>
>
> Форма почти такая же, как и в предыдущем примере, но обратите внимание, как я добавил обработчик события для события onsubmit. Он ссылается на функцию JavaScript, которую я определил в нижней части примера, — на простую функцию, которая перебирает все переключатели выбора питомца и сразу же нажимает кнопку, в которой свойство checked имеет значение true.Он запрашивает у пользователя подтверждение. Мы возвращаем true или false, в зависимости от того, получим ли мы подтверждение от пользователя или нет, который решает, разрешено ли заполнять форму или нет.
Это был простой пример того, как работать с переключателями с помощью JavaScript. Вы можете сделать гораздо больше, особенно если вы используете JavaScript-фреймворк, такой как jQuery, который значительно облегчит выбор и управление элементами DOM.
Заключение
С помощью переключателей можно настроить список параметров, из которых пользователь может выбрать только один. Вы должны использовать метки, чтобы связать радиокнопку и текст описания, чтобы пользователь мог щелкнуть большую область при манипулировании радиокнопкой — это также хорошо для поддержки технологий, таких как программы чтения с экрана, для слабовидящих.
Is your preferred language not on the list? Click here to help us translate this article into your language!
Переключатели
Переключатели (жарг. радиокнопки) используют, когда необходимо выбрать один единственный вариант из нескольких предложенных. Создаются следующим образом.
Атрибуты переключателей перечислены в табл. 1.
| Атрибут | Описание |
|---|---|
| checked | Предварительное выделение переключателя. По определению, набор переключателей может иметь только один выделенный пункт, поэтому добавление checked сразу к нескольким полям не даст особого результата. В любом случае, будет отмечен элемент, находящийся в коде HTML последним. |
| name | Имя группы переключателей для идентификации поля. Поскольку переключатели являются групповыми элементами, то имя у всех элементов группы должно быть одинаковым. |
| value | Задаёт, какое значение будет отправлено на сервер. Здесь уже каждый элемент должен иметь свое уникальное значение, чтобы можно было идентифицировать, какой пункт был выбран пользователем. |
Создание группы переключателей показано в примере 1.
Пример 1. Создание переключателей
Какое у вас состояние разума?
Не дзен
Дзен
Полный дзен
В результате получим следующее (рис. 1).
Рис. 1. Вид переключателей в браузере
Заметьте, что в данном примере значение атрибута name для всех переключателей одинаково, именно в таком случае браузер понимает, что переключатели связаны между собой и помечает только один пункт из предложенных. Значение атрибута value же должно различаться, чтобы обработчик формы мог понять, какой вариант выбран пользователем.
Переключатели
Переключатели (жарг. радиокнопки) используют, когда необходимо выбрать один единственный вариант из нескольких предложенных. Создаются следующим образом.
Атрибуты переключателей перечислены в табл. 1.
| Атрибут | Описание |
|---|---|
| name | Имя группы переключателей для идентификации поля. Поскольку переключатели являются групповыми элементами, то имя у всех элементов группы должно быть одинаковым. |
| disabled | Блокирует переключатель для выбора. |
| form | Идентификатор формы для связывания кнопки с элементом . |
| type | Для переключателя значение должно быть radio . |
| checked | Предварительное выделение переключателя. По определению, набор переключателей может иметь только один выделенный пункт, поэтому добавление checked сразу к нескольким полям не даст особого результата. В любом случае, будет отмечен элемент, находящийся в коде HTML последним. |
| value | Задаёт, какой текст будет отправлен на сервер. Здесь уже каждый элемент должен иметь свое уникальное значение, чтобы можно было идентифицировать, какой пункт был выбран пользователем. |
| autofocus | Переключатель получает фокус после загрузки документа. |
| required | Выбор переключателя перед отправкой формы становится обязательным. |
Как обычно, переключатели нельзя вкладывать внутрь ссылок и кнопок.
Создание группы переключателей показано в примере 1.
Пример 1. Создание переключателей
В результате получим следующее (рис. 1).
Рис. 1. Вид переключателей в браузере
Заметьте, что в данном примере значение атрибута name для всех переключателей одинаково, именно в таком случае браузер понимает, что переключатели связаны между собой и помечает только один пункт из предложенных. Значение атрибута value же должно различаться, чтобы обработчик формы мог понять, какой вариант выбран пользователем.