Радиокнопки

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

<input type="radio">

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

<input type="radio" name="nameOfChoice" value="1">

Итак, теперь у нас есть полнофункциональная радиокнопка, которую можно отправить обратно на сервер. Однако, если вы попробуете этот пример, вы заметите, что одна кнопка-переключатель не имеет смысла. Это связано с природой переключателя, который всегда предлагает вам выбрать между двумя или более вариантами - если у вас есть только один вариант (включен или выключен), то вам следует использовать флажок (checkbox).

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

<form method="post" action="/Tests/Post">
    <fieldset>
        <legend>What is Your Favorite Pet?</legend>
        <input type="radio" name="favorite_pet" value="Cats">Cats<br>
        <input type="radio" name="favorite_pet" value="Dogs">Dogs<br>
        <input type="radio" name="favorite_pet" value="Birds">Birds<br>
        <br>
        <input type="submit" value="Submit now">
    </fieldset>
</form>

Обратите внимание, что все три переключателя имеют одинаковое значение в свойстве name - это очень важно, поскольку оно связывает переключатели в одной группе. Поскольку в группе переключателей может быть только один выбор, это означает, что при выборе одного из переключателей любой другой отмеченный переключатель станет не отмеченным. С другой стороны, свойство value, как правило, должно быть уникальным, поскольку это значение используется для представления выбора пользователя для этой группы параметров.

Включен ли переключатель или нет?

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

<input type="radio" name="favorite_pet" value="Cats" checked>Cats<br>
<input type="radio" name="favorite_pet" value="Dogs">Dogs<br>
<input type="radio" name="favorite_pet" value="Birds">Birds<br>

Обратите внимание, как слово «флажок» было добавлено в первую радиокнопку - теперь это будет проверено с самого начала, что позволяет пользователю изменять выбор, но в основном делает невозможным НЕ выбирать ни один из параметров. Для записи, в старые времена XHTML, где каждый атрибут всегда должен иметь значение (даже логические атрибуты), это выглядело бы так:

<input type="radio" name="favorite_pet" value="Cats" checked="checked">Cats<br>

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

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

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

<input type="radio" name="favorite_pet" value="Cats" checked>Cats<br>
<input type="radio" name="favorite_pet" value="Dogs" id="dogs">
<label for="dogs">Dogs</label>

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

Ярлык (label) очень прост - он использует атрибут for, чтобы присоединиться к элементу формы с соответствующим атрибутом id (обратите внимание, что у меня есть «dogs» в обоих местах).

Динамическая работа с переключателями

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

<form method="post" action="/Tests/Post" onsubmit="return ValidateForm();">
    <fieldset>
    <legend>What is Your Favorite Pet?</legend>
    <input type="radio" name="favorite_pet" value="Cats" checked>Cats<br>
    <input type="radio" name="favorite_pet" value="Dogs">Dogs<br>
    <input type="radio" name="favorite_pet" value="Birds">Birds<br>
        <br>
    <input type="submit" value="Submit now">
    </fieldset>
</form>

<script type="text/javascript">
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;
        }
    }
}
</script>

Форма почти такая же, как и в предыдущем примере, но обратите внимание, как я добавил обработчик события для события onsubmit. Он ссылается на функцию JavaScript, которую я определил в нижней части примера, - на простую функцию, которая перебирает все переключатели выбора питомца и сразу же нажимает кнопку, в которой свойство checked имеет значение true.Он запрашивает у пользователя подтверждение. Мы возвращаем true или false, в зависимости от того, получим ли мы подтверждение от пользователя или нет, который решает, разрешено ли заполнять форму или нет.

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

Заключение

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