Переключатели
Переключатели (жарг. радиокнопки) используют, когда необходимо выбрать один единственный вариант из нескольких предложенных. Создаются следующим образом.
Атрибуты переключателей перечислены в табл. 1.
| Атрибут | Описание |
|---|---|
| checked | Предварительное выделение переключателя. По определению, набор переключателей может иметь только один выделенный пункт, поэтому добавление checked сразу к нескольким полям не даст особого результата. В любом случае, будет отмечен элемент, находящийся в коде HTML последним. |
| name | Имя группы переключателей для идентификации поля. Поскольку переключатели являются групповыми элементами, то имя у всех элементов группы должно быть одинаковым. |
| value | Задаёт, какое значение будет отправлено на сервер. Здесь уже каждый элемент должен иметь свое уникальное значение, чтобы можно было идентифицировать, какой пункт был выбран пользователем. |
Создание группы переключателей показано в примере 1.
Пример 1. Создание переключателей
HTML5 IE Cr Op Sa Fx
Переключатели Какое у вас состояние разума?
Не дзен
Дзен
Полный дзен
В результате получим следующее (рис. 1).
Рис. 1. Вид переключателей в браузере
Заметьте, что в данном примере значение атрибута name для всех переключателей одинаково, именно в таком случае браузер понимает, что переключатели связаны между собой и помечает только один пункт из предложенных. Значение атрибута value же должно различаться, чтобы обработчик формы мог понять, какой вариант выбран пользователем.
Обязательный выбор кнопки input radio
одно без другого быть не может. Необходимо сделать обязательным выбор в двух секциях. Знаю есть параметр required=»required» для текстовых форм заполнения в HTML5, где выскакивает сообщение об обязательном введении например e-mail. Есть ли что-то для обязательного выбора кнопок? Спасибо.
Лучшие ответы ( 2 )
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
Ответы с готовыми решениями:
Input type=radio
Как с помощью CSS изменить внешний вид радио-кнопки? Какие CSS свойства я могу применить в этой.
Input radio и кнопка Submit
Подскажите, как можно сделать так, чтобы когда я отмечаю radiobutton как cheked, значение cheked.
Вывести выбранный input radio
Подскажите как в html вывести два input type=radio так, чтобы первый из них был помечен как.
3824 / 2674 / 1521
Регистрация: 12.07.2015
Сообщений: 6,672
Записей в блоге: 4
Сообщение было отмечено Fedor92 как решение
Решение
На первую радио-кнопку группы вешайте required:
1 2 3 4 5 6 7
input name="form" type="radio" value="art_0056" required> input name="form" type="radio" value="art_0057"> input name="form" type="radio" value="art_0058"> input name="form_color" type="radio" value="cherry" required> input name="form_color" type="radio" value="lime"> input name="form_color" type="radio" value="tomato">
2964 / 2597 / 1068
Регистрация: 15.12.2012
Сообщений: 9,857
Записей в блоге: 11
Сообщение было отмечено mrtoxas как решение
Решение
Как вариант можно использовать ещё один атрибут — checked. Заранее сделать активной одну из радиокнопок в секции.
1 2 3
input name="form_color" type="radio" value="cherry" checked> input name="form_color" type="radio" value="green"> input name="form_color" type="radio" value="aqua">
Регистрация: 25.03.2016
Сообщений: 28
Все варианты ответов отличные, мне пригодятся. Спасибо. Использовать буду пока первый вариант с required
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
Помогаю со студенческими работами здесь
Выбор radio input + text input
Всем привет. Никак не могу решить задачу. Суть такая: на странице динамически создаются группы по 3.
Как вывести input radio в зависимости от выше выбранного input radio
Нужно сделать как бы вывод на странице двух input radion. Выбор пола. Мужчина и Женщина. Если я.
Как при переключении кнопки выводить разные данные?
У меня есть форма для заявки. Там кнопка input radio: До обеда и После обеда. Хочу чтоб при выборе.
Ошибка в идентификации нажатой кнопки
<html> <head> <link rel="stylesheet" href="CSS_file.css" type="text/css"> .
Как сделать выбор пола html
Флажок представляет элемент, который может находиться в двух состояниях: отмеченном и неотмеченном. Флажок создается с помощью элемента input с атрибутом type=»checkbox» :
Чекбокс в HTML5 Изучаемые технологии
Атрибут checked позволяет установить флажок в отмеченное состояние.
Переключатели
Переключатели или радиокнопки похожи на флажки, они также могут находиться в отмеченном или неотмеченном состоянии. Только для переключателей можно создать одну группу, в которой одновременно можно выбрать только один переключатель. Например:
Радиокнопки в HTML5
Для создания радиокнопки надо указать атрибут type=»radio» . И теперь другой атрибут name указывает не на имя элемента, а на имя группы, к которой принадлежит элемент-радиокнопка. В данном случае у нас две группы радиокнопок: gender и tech . Из каждой группы мы можем выбрать только один переключатель. Опять же чтобы отметить радиокнопку, у нее устанавливается атрибут checked :
Важное значение играет атрибут value , который при отправке формы позволяет серверу определить, какой именно переключатель был отмечен:
HTML: Радиокнопка
Представьте, что вы предлагаете пользователю выбор: доставить товар курьером или почтой. Использовать чекбоксы в этом случае не получится, ведь выбор строго один.
Для создания переключателей, которые умеют обрабатывать только один из множества вариантов, существуют радиокнопки. Название они получили от старых автомобильных радиоприёмников, в которых выбор радио осуществлялся нажатием на одну из множества кнопок для выбора частоты.
Для создания радиокнопки, так же, как и чекбокса, используются два тега:
- с указанием type=»radio» . Обязательным атрибутом является name , значением которого является имя. Данное имя должно быть одинаковым у всей группы радиокнопок. Без этого атрибута будет возможно выбрать все значения сразу, так как браузер не будет видеть связи между ними
- , в котором будет текст, связанный с нужной нам радиокнопкой
Связь с происходит уже по одному из двух знакомых нам сценариев:
- Связь по id . Для этого необходимо задать уникальный id для , и связать с радиокнопкой с помощью атрибута for
- Вложить внутрь тега . При этом указание уникального id не требуется
Для того чтобы после отправки формы на сервер возможно было узнать, какой именно пункт был выбран, используется атрибут value , внутри которого находится значение, позволяющее определить радиокнопку.
Задание
Создайте форму, у которой файл с обработчиком данных лежит по адресу /people . Внутри формы создайте 2 радиокнопки. Свяжите их вложив внутри . Уникальное имя для радиокнопок delivery . Не забудьте добавить атрибут value
Упражнение не проходит проверку — что делать? ��
Если вы зашли в тупик, то самое время задать вопрос в «Обсуждениях». Как правильно задать вопрос:
- Обязательно приложите вывод тестов, без него практически невозможно понять что не так, даже если вы покажете свой код. Программисты плохо исполняют код в голове, но по полученной ошибке почти всегда понятно, куда смотреть.
В моей среде код работает, а здесь нет ��
Тесты устроены таким образом, что они проверяют решение разными способами и на разных данных. Часто решение работает с одними входными данными, но не работает с другими. Чтобы разобраться с этим моментом, изучите вкладку «Тесты» и внимательно посмотрите на вывод ошибок, в котором есть подсказки.
Мой код отличается от решения учителя ��
Это нормально ��, в программировании одну задачу можно выполнить множеством способов. Если ваш код прошел проверку, то он соответствует условиям задачи.
В редких случаях бывает, что решение подогнано под тесты, но это видно сразу.
Прочитал урок — ничего не понятно ��
Создавать обучающие материалы, понятные для всех без исключения, довольно сложно. Мы очень стараемся, но всегда есть что улучшать. Если вы встретили материал, который вам непонятен, опишите проблему в «Обсуждениях». Идеально, если вы сформулируете непонятные моменты в виде вопросов. Обычно нам нужно несколько дней для внесения правок.
Кстати, вы тоже можете участвовать в улучшении курсов: внизу есть ссылка на исходный код уроков, который можно править прямо из браузера.