Радіо перемикачі в HTML

Вивчаємо елемент input type="radio" для створення вибору одного варіанта зі списку.

Радіо перемикачі в HTML

Радіо кнопки використовуються у формах, коли користувач повинен вибрати тільки один варіант із декількох запропонованих.

Для створення радіо перемикача використовується тег input з атрибутом type="radio".

<input type="radio">

<input type="radio">

<input type="radio">

Групування радіо кнопок

Щоб декілька радіо кнопок працювали як одна група, їм потрібно задати однаковий атрибут name.

<form>

  <label>
    <input type="radio" name="city">
    Київ
  </label>

  <label>
    <input type="radio" name="city">
    Львів
  </label>

  <label>
    <input type="radio" name="city">
    Одеса
  </label>

</form>

Вибраний варіант за замовчуванням

За допомогою атрибута checked можна зробити один варіант вибраним одразу після відкриття сторінки.

<form>

<label>
  <input type="radio" name="gender" checked>
  Чоловік
</label>

<label>
  <input type="radio" name="gender">
  Жінка
</label>

</form>

type="radio" — створює радіо кнопку.
name — об'єднує кнопки в одну групу.
checked — вибирає кнопку за замовчуванням.
value — значення, яке буде передано при відправці форми.

Приклад форми з радіо кнопками

<form>

<p>Оберіть спосіб доставки:</p>

<label>
  <input 
    type="radio" 
    name="delivery"
    value="courier">
  Кур'єр
</label>

<br>

<label>
  <input 
    type="radio" 
    name="delivery"
    value="pickup">
  Самовивіз
</label>

<br>

<label>
  <input 
    type="radio" 
    name="delivery"
    value="post">
  Пошта
</label>

<br><br>

<button>
  Відправити
</button>

</form>

❗ Важливо:

Якщо потрібно дозволити вибрати декілька варіантів одночасно — використовуйте checkbox, а не radio.

Практичне завдання

📌 Завдання:

№1. Створіть форму вибору статі.
№2. Додайте три варіанти: Чоловік, Жінка, Інше.
№3. Об'єднайте кнопки одним атрибутом name.
№4. Зробіть перший варіант вибраним за замовчуванням.

<!-- Ваш код -->

<form>

  <label>
    <input type="radio" name="gender">
    Чоловік
  </label>

  <label>
    <input type="radio" name="gender">
    Жінка
  </label>

  <label>
    <input type="radio" name="gender">
    Інше
  </label>

</form>

💡 Показати підказку

Пам'ятайте: усі radio кнопки, які повинні працювати разом, мають мати однаковий name.

✅ Показати відповідь

<form>

<label>
  <input 
    type="radio" 
    name="gender"
    checked>
  Чоловік
</label>

<label>
  <input 
    type="radio" 
    name="gender">
  Жінка
</label>

<label>
  <input 
    type="radio" 
    name="gender">
  Інше
</label>

</form>