Запропонувати правкуПокращити цю статтюДопрацюйте відповідь до «Як зробити найпростішу radio button у HTML?». Ваші зміни проходять модерацію перед публікацією.Потрібне підтвердженняКонтентЩо ви змінюєте🇺🇸EN🇺🇦UAПереглядЗаголовок (UA)Коротка відповідь (UA)Найпростіша **radio button (перемикач)** у HTML створюється за допомогою елемента `<input type="radio">`. Вона дозволяє користувачу обрати один варіант з декількох, наприклад, стать, спосіб оплати чи категорію. **Ключове:** щоб декілька кнопок працювали як єдиний вибір, усі вони мають мати однаковий атрибут `name`, але різні `value`.Показується над повною відповіддю для швидкого нагадування.Відповідь (UA)ЗображенняНайпростіша **radio button (перемикач)** у HTML створюється за допомогою елемента `<input type="radio">`. Вона дозволяє користувачу **обрати один варіант з декількох**, наприклад, стать, спосіб оплати чи категорію. --- ### 1. Найпростіший приклад ```html <input type="radio"> ``` На сторінці з'явиться **невеликий круг**, у якому можна поставити крапку (позначку). --- ### 2. З підписом (через <label>) Щоб користувач розумів, за що відповідає перемикач, додають **текст-опис**: ```html <label> <input type="radio"> Чоловік </label> ``` Тепер клацання на текст теж активує radio-кнопку. --- ### 3. Група перемикачів Щоб декілька кнопок працювали **як єдиний вибір** (активна лише одна), усі вони мають мати **однаковий атрибут** `name`, але різні `value`. Приклад: ```html <form> <label><input type="radio" name="gender" value="male"> Чоловік</label><br> <label><input type="radio" name="gender" value="female"> Жінка</label><br> <label><input type="radio" name="gender" value="other"> Інше</label><br> <button type="submit">Надіслати</button> </form> ``` Як це працює: - Можна обрати **лише один** варіант з трьох. - Під час відправлення форми браузер надішле, наприклад: ```javascript gender=female ``` --- ### 4. Часто використовувані атрибути | Атрибут | Що робить | Приклад | |---|---|---| | `name` | Об'єднує radio-кнопки в одну групу | `name="gender"` | | `value` | Значення, яке надсилається на сервер | `value="male"` | | `checked` | Робить кнопку обраною за умовчанням | `checked` | | `disabled` | Вимикає кнопку (не можна обрати) | `disabled` | | `required` | Обов'язковий вибір перед відправленням | `required` | Приклад з обраним варіантом: ```html <input type="radio" name="gender" value="male" checked> Чоловік ``` --- ### 5. Відмінність від checkbox | Елемент | Поведінка | |---|---| | **Checkbox** | Можна обрати декілька варіантів | | **Radio** | Можна обрати лише один варіант у групі | --- ### Підсумок: | Властивість | Опис | |---|---| | Тег | `<input type="radio">` | | Призначення | Перемикач (вибір одного з декількох варіантів) | | Групування | Через однаковий `name` | | Передавання даних | Надсилається обране `value` | | Часто використовується з | `<label>` для підпису | --- **Простими словами:** `<input type="radio">` - це **кругла кнопка вибору одного варіанта**. Мінімальний код: ```html <input type="radio"> ``` А з підписом і логікою вибору: ```html <label><input type="radio" name="gender" value="male"> Чоловік</label> ```Для рев’юераПримітка для модератора (необов’язково)Бачить лише модератор. Прискорює рев’ю.