{"type":"doc","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Самый простой "},{"type":"text","marks":[{"type":"bold"}],"text":"radio button (переключатель)"},{"type":"text","text":" в HTML создаётся с помощью элемента"},{"type":"hardBreak"},{"type":"text","marks":[{"type":"code"}],"text":""},{"type":"text","text":"."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Он позволяет пользователю "},{"type":"text","marks":[{"type":"bold"}],"text":"выбрать один вариант из нескольких"},{"type":"text","text":", например, пол, способ оплаты или категорию."}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":3},"content":[{"type":"text","text":"🔹 1. Простейший пример"}]},{"type":"codeBlock","attrs":{"language":"html"},"content":[{"type":"text","text":"\n"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"🟢 На странице появится "},{"type":"text","marks":[{"type":"bold"}],"text":"маленький круг"},{"type":"text","text":", в который можно поставить точку (отметку)."}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":3},"content":[{"type":"text","text":"🔹 2. С подписью (через "},{"type":"text","marks":[{"type":"code"}],"text":""},{"type":"text","text":")"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Чтобы пользователь понимал, за что отвечает переключатель, добавляют "},{"type":"text","marks":[{"type":"bold"}],"text":"текст-описание"},{"type":"text","text":":"}]},{"type":"codeBlock","attrs":{"language":"html"},"content":[{"type":"text","text":"\n \n Мужчина\n\n"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Теперь клик по тексту тоже активирует radio-кнопку."}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":3},"content":[{"type":"text","text":"🔹 3. Группа переключателей"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Чтобы несколько кнопок работали "},{"type":"text","marks":[{"type":"bold"}],"text":"как единый выбор"},{"type":"text","text":" (только одна активна),"},{"type":"hardBreak"},{"type":"text","text":"все они должны иметь "},{"type":"text","marks":[{"type":"bold"}],"text":"одинаковый атрибут "},{"type":"text","marks":[{"type":"code"}],"text":"name"},{"type":"text","text":", но разные "},{"type":"text","marks":[{"type":"code"}],"text":"value"},{"type":"text","text":"."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"📘 Пример:"}]},{"type":"codeBlock","attrs":{"language":"html"},"content":[{"type":"text","text":"\n"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"🟢 Как это работает:"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Можно выбрать "},{"type":"text","marks":[{"type":"bold"}],"text":"только один"},{"type":"text","text":" вариант из трёх."}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"При отправке формы браузер отправит, например:"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"gender=female\n"}]}]}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":3},"content":[{"type":"text","text":"🔹 4. Часто используемые атрибуты"}]},{"type":"table","content":[{"type":"tableRow","content":[{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Атрибут"}]}]},{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Что делает"}]}]},{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Пример"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"code"}],"text":"name"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Объединяет радио-кнопки в одну группу"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"code"}],"text":"name=\"gender\""}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"code"}],"text":"value"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Значение, которое отправляется на сервер"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"code"}],"text":"value=\"male\""}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"code"}],"text":"checked"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Делает кнопку выбранной по умолчанию"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"code"}],"text":"checked"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"code"}],"text":"disabled"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Отключает кнопку (нельзя выбрать)"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"code"}],"text":"disabled"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"code"}],"text":"required"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Обязательный выбор перед отправкой"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"code"}],"text":"required"}]}]}]}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"📘 Пример с выбранным вариантом:"}]},{"type":"codeBlock","attrs":{"language":"html"},"content":[{"type":"text","text":" Мужчина\n"}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":3},"content":[{"type":"text","text":"🔹 5. Отличие от checkbox"}]},{"type":"table","content":[{"type":"tableRow","content":[{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Элемент"}]}]},{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Поведение"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"Checkbox"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Можно выбрать несколько вариантов"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"Radio"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Можно выбрать только один вариант в группе"}]}]}]}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":3},"content":[{"type":"text","text":"💡 Итого:"}]},{"type":"table","content":[{"type":"tableRow","content":[{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Свойство"}]}]},{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Описание"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Тег"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"code"}],"text":""}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Назначение"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Переключатель (выбор одного из нескольких вариантов)"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Группировка"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Через одинаковый "},{"type":"text","marks":[{"type":"code"}],"text":"name"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Передача данных"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Отправляется выбранное "},{"type":"text","marks":[{"type":"code"}],"text":"value"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Часто используется с"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"code"}],"text":""},{"type":"text","text":" для подписи"}]}]}]}]},{"type":"horizontalRule"},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"Простыми словами:"},{"type":"hardBreak"},{"type":"text","marks":[{"type":"code"}],"text":""},{"type":"text","text":" — это "},{"type":"text","marks":[{"type":"bold"}],"text":"круглая кнопка выбора одного варианта"},{"type":"text","text":"."},{"type":"hardBreak"},{"type":"text","text":"Минимальный код:"}]},{"type":"codeBlock","attrs":{"language":"html"},"content":[{"type":"text","text":"\n"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"А с подписью и логикой выбора:"}]},{"type":"codeBlock","attrs":{"language":"html"},"content":[{"type":"text","text":" Мужчина\n"}]},{"type":"paragraph","attrs":{"textAlign":null}}]}

Как сделать самый простой radio button в HTML?

Комментарии