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

Радио кнопочка создается с помощью тега input с атрибутом type в значении radio:

<input type="radio">

Результат выполнения кода:

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

См. также флажок чекбокс.

См. также атрибут checked, который делает радио переключатель отмеченным по умолчанию.

См. также псевдокласс checked, который задает стили для отмеченных чекбоксов или радио.

См. также атрибут disabled, который блокирует элементы форм, и псевдоклассы disabled и enabled, которые задают стили заблокированным и незаблокированным элементам.

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

Примеры

Пример

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

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

<input type="radio" name="test" checked value="1"> <input type="radio" name="test" value="2">

Результат выполнения кода:

Пример

В данном примере сделаны две группы радио переключателя: первая группа имеет одно значение атрибута name (radio1), а вторая - другое (radio2). Попробуйте понажимать по ним, вы увидите, что группы переключаются независимо друг от друга:

<input type="radio" name="radio1" checked>
<input type="radio" name="radio1">
<input type="radio" name="radio1"><br>
<input type="radio" name="radio2" checked>
<input type="radio" name="radio2">
<input type="radio" name="radio2">

Результат выполнения кода: