Оглавление:
Видео: CSS фичи #9 ➤ Чекбокс-кнопки CSS | CSS custom checkbox input style 2025
Чтобы включить радиокнопки на своей веб-странице HTML5, это помогает узнать, что это такое и как их использовать. На поверхности радиокнопки кажутся очень похожими на флажки, но они различны по ряду важных способов:
-
Радио кнопки появляются только в группах. У вас может быть один флажок в форме, но переключатели имеют смысл только при размещении в группах.
-
Можно выбрать только один элемент. Выбор одной радиокнопки отменяет выбор остальных. Это похоже на автомобильное радио, где нажатие одной из предустановленных кнопок отменяет выбор остальных. (Это действительно похоже на старые автомобильные радиостанции, где, если бы кнопка для выбранной станции была физически нажата, появлялись другие кнопки. Хотя этот тип радио уже давно ушел, имя живет.)
-
Уникальный идентификатор каждого переключателя. Каждый идентификатор на веб-странице должен быть уникальным, а элементы идентификатора каждого переключателя соответствуют этим правилам.
-
Каждый элемент радиосвязи также имеет атрибут name . Атрибут name используется для указания всей группы радиообъектов.
-
Все радиокнопки в группе имеют одно и то же имя. В HTML используется атрибут name, чтобы определить, в какую группу включен переключатель, и чтобы была выбрана только одна кнопка в группе.
На этом рисунке показана форма, содержащая группу переключателей для выбора Small, Medium или Large:
Обратитесь к следующему коду, чтобы увидеть настройку веб-страницы с кнопками:
formDemo. htmlДемо-версия
Выбор элементовРадиокноповые малые средние большие
Чтобы создать группу переключателей, выполните следующие действия:
-
Начните с создания элемента ввода , который будет служить основой.
-
Установите тип на радио .
-
Дайте каждому переключателю уникальный идентификатор .
-
Используйте атрибут имени , чтобы идентифицировать все кнопки в группе.
-
Рассмотрите также визуальную группировку.
Пользователь не сможет указать, какие кнопки являются частью группы только в формате HTML. Вы можете использовать поля или другие трюки форматирования, чтобы помочь пользователю узнать, какие кнопки в какой группе. Все кнопки в одной группе должны находиться рядом друг с другом.
-
Сделать по умолчанию одну из отмеченных (выбранных) кнопок.
Примените атрибут checked = "checked" (предоставленный отделом отдела избыточности) к одному из элементов, чтобы он запускался.
Если вы не предварительно выделите один переключатель, любые программы, прикрепленные к вашей форме, будут запутаны.
