Як зробити найпростішу radio button у HTML?
Найпростіша radio button (перемикач) у HTML створюється за допомогою елемента
<input type="radio">.
Вона дозволяє користувачу обрати один варіант з декількох, наприклад, стать, спосіб оплати чи категорію.
1. Найпростіший приклад
<input type="radio">На сторінці з'явиться невеликий круг, у якому можна поставити крапку (позначку).
2. З підписом (через
Щоб користувач розумів, за що відповідає перемикач, додають текст-опис:
<label>
<input type="radio">
Чоловік
</label>Тепер клацання на текст теж активує radio-кнопку.
3. Група перемикачів
Щоб декілька кнопок працювали як єдиний вибір (активна лише одна),
усі вони мають мати однаковий атрибут name, але різні value.
Приклад:
<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>Як це працює:
-
Можна обрати лише один варіант з трьох.
-
Під час відправлення форми браузер надішле, наприклад:
javascriptgender=female
4. Часто використовувані атрибути
| Атрибут | Що робить | Приклад |
|---|---|---|
name | Об'єднує radio-кнопки в одну групу | name="gender" |
value | Значення, яке надсилається на сервер | value="male" |
checked | Робить кнопку обраною за умовчанням | checked |
disabled | Вимикає кнопку (не можна обрати) | disabled |
required | Обов'язковий вибір перед відправленням | required |
Приклад з обраним варіантом:
<input type="radio" name="gender" value="male" checked> Чоловік5. Відмінність від checkbox
| Елемент | Поведінка |
|---|---|
| Checkbox | Можна обрати декілька варіантів |
| Radio | Можна обрати лише один варіант у групі |
Підсумок:
| Властивість | Опис |
|---|---|
| Тег | <input type="radio"> |
| Призначення | Перемикач (вибір одного з декількох варіантів) |
| Групування | Через однаковий name |
| Передавання даних | Надсилається обране value |
| Часто використовується з | <label> для підпису |
Простими словами:
<input type="radio"> - це кругла кнопка вибору одного варіанта.
Мінімальний код:
<input type="radio">А з підписом і логікою вибору:
<label><input type="radio" name="gender" value="male"> Чоловік</label>Коротка відповідь
Для співбесідиКоротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.