Радиокнопки (input type='radio')

Тренажер по HTML для пользователей с начальным уровнем подготовки.

Опубликовано 04.04.2025
Просмотры 19
Автор
Рек. время прохождения 3 минуты
Упражнений 9
Комментарии 0
Тренажер HTML
Радиокнопки — это один из ключевых элементов любой веб-формы. Они позволяют пользователю сделать единственный выбор из предложенного набора вариантов. Вы встречаете их постоянно: в опросах, настройках профиля, при выборе способа доставки или тарифа. В этой серии заданий мы пройдем путь от создания простейшей радиокнопки до более сложных конструкций со стилизацией. Вам предстоит поработать с основными атрибутами, научиться объединять кнопки в группы и связывать их с текстовыми метками для удобства пользователей. Эти упражнения помогут закрепить знания на практике, заполняя пропущенные фрагменты кода и сразу видя результат своих действий.
Список тем

Создание первой радиокнопки

id: 37847_html-radio-button-1

Давайте начнем с основ. Ваша задача — создать одну радиокнопку для выбора опции. Для этого нужно правильно указать её тип. Пока она не будет ничего делать, но это первый шаг.

CSS
body {
  font-family: sans-serif;
  padding: 15px;
}
.option {
  margin-bottom: 10px;
}
HTML
<div class="option">
  <input input1="radio"> Выбор 1
</div>
Чтобы создать радиокнопку, используется тег `<input>`. Ему нужно задать атрибут `type` со значением `radio`. Атрибут `type` определяет, каким именно элементом ввода будет инпут.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Добавление подписи с помощью <label>

id: 37847_html-radio-button-2

Радиокнопка без подписи бесполезна. Используйте тег `<label>`, чтобы связать текст с кнопкой. Это не только улучшает семантику, но и позволяет выбрать опцию, кликнув на сам текст, а не только на маленький кружок.

CSS
body {
  font-family: sans-serif;
  padding: 15px;
}
.option {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  cursor: pointer;
}
input[type="radio"] {
  margin-right: 8px;
}
HTML
<div class="option">
  <input type="radio" name="contact" id="email-option">
  <label input1="email-option">По Email</label>
</div>
Чтобы связать `<label>` с `<input>`, используйте атрибут `for` у тега `<label>`. Его значение должно в точности совпадать со значением атрибута `id` у связываемого элемента `<input>`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Объединение в группу

id: 37847_html-radio-button-3

Главная особенность радиокнопок — возможность выбрать только один вариант из нескольких. Для этого их нужно объединить в логическую группу с помощью атрибута `name`. Создайте группу из двух кнопок для выбора темы оформления.

CSS
body {
  font-family: sans-serif;
  padding: 15px;
}
.theme-selector {
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 15px;
  max-width: 300px;
}
.option {
  margin-bottom: 10px;
}
HTML
<div class="theme-selector">
  <p>Выберите тему оформления:</p>
  <div class="option">
    <input type="radio" input1="theme-choice" id="light" value="light">
    <label for="light">Светлая</label>
  </div>
  <div class="option">
    <input type="radio" input1="theme-choice" id="dark" value="dark">
    <label for="dark">Темная</label>
  </div>
</div>
Чтобы несколько радиокнопок работали как одна группа (позволяя выбрать только одну), у всех них должен быть одинаковый атрибут `name`. Например, `name="theme"`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Отправка данных: атрибут value

id: 37847_html-radio-button-4

Когда пользователь выбирает опцию и отправляет форму, на сервер уходит не текст подписи, а значение атрибута `value`. Добавьте осмысленные значения для каждой опции, чтобы форма работала корректно.

CSS
body {
  font-family: sans-serif;
  padding: 15px;
}
.delivery-options {
  background-color: #f4f4f4;
  padding: 15px;
  border-radius: 5px;
  max-width: 300px;
}
.option {
  padding: 5px;
}
HTML
<div class="delivery-options">
  <p>Способ доставки:</p>
  <div class="option">
    <input type="radio" name="delivery" id="courier" input1="courier_delivery">
    <label for="courier">Курьером</label>
  </div>
  <div class="option">
    <input type="radio" name="delivery" id="pickup" input2="pickup_point">
    <label for="pickup">Пункт выдачи</label>
  </div>
</div>
Каждой радиокнопке в группе нужен атрибут `value`. Его значение — это та строка, которая будет отправлена с формой, если эта кнопка выбрана. Например, `<input type="radio" value="standard-delivery">`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Выбор по умолчанию

id: 37847_html-radio-button-5

Часто нужно, чтобы одна из опций была выбрана сразу при загрузке страницы. Сделайте так, чтобы опция 'Ежемесячно' была выбрана по умолчанию.

CSS
body {
  font-family: sans-serif;
  padding: 15px;
}
.subscription {
  border: 1px solid #007bff;
  padding: 15px;
  border-radius: 8px;
  max-width: 300px;
}
.option {
  margin: 10px 0;
}
HTML
<div class="subscription">
  <p>Выберите план подписки:</p>
  <div class="option">
    <input type="radio" name="plan" id="monthly" value="monthly" input1>
    <label for="monthly">Ежемесячно</label>
  </div>
  <div class="option">
    <input type="radio" name="plan" id="yearly" value="yearly">
    <label for="yearly">Ежегодно</label>
  </div>
</div>
Чтобы сделать радиокнопку выбранной по умолчанию, добавьте к ней булевый атрибут `checked`. Ему не нужно значение, достаточно просто указать его имя в теге.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Недоступный вариант

id: 37847_html-radio-button-6

Иногда некоторые опции нужно временно отключить, например, если они еще не доступны. Сделайте так, чтобы опция 'Экспресс-доставка' была неактивна для выбора.

CSS
body {
  font-family: sans-serif;
  padding: 15px;
}
.options {
  padding: 10px;
  max-width: 300px;
}
.option label {
  color: #333;
}
.option input:disabled + label {
  color: #999;
  cursor: not-allowed;
}
HTML
<div class="options">
  <p>Выберите скорость доставки:</p>
  <div class="option">
    <input type="radio" name="speed" id="std" value="standard" checked>
    <label for="std">Стандартная</label>
  </div>
  <div class="option">
    <input type="radio" name="speed" id="exp" value="express" input1>
    <label for="exp">Экспресс (недоступна)</label>
  </div>
</div>
Чтобы сделать элемент формы, включая радиокнопку, неактивным, используется булевый атрибут `disabled`. Как и `checked`, он не требует значения.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Комплексная задача: выбор тарифа

id: 37847_html-radio-button-7

Применим все знания на практике. Создайте полноценный блок выбора тарифа. Вам нужно будет заполнить несколько пропусков: указать тип инпута, связать подпись с кнопкой и объединить их в одну группу.

CSS
body {
  font-family: sans-serif;
  padding: 15px;
}
.rate-plan {
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 1rem;
  max-width: 300px;
}
.rate-plan p {
  margin-top: 0;
  font-weight: bold;
}
.option {
  margin-bottom: 0.5rem;
}
.option:last-child {
  margin-bottom: 0;
}
HTML
<div class="rate-plan">
  <p>Выберите ваш тариф:</p>
  <div class="option">
    <input input1="radio" input2="rate" id="base" value="base_rate" checked>
    <label input3="base">Базовый</label>
  </div>
  <div class="option">
    <input type="radio" name="rate" id="pro" value="pro_rate">
    <label for="pro">Профессиональный</label>
  </div>
  <div class="option">
    <input type="radio" name="rate" id="corp" value="corp_rate" disabled>
    <label for="corp">Корпоративный (скоро)</label>
  </div>
</div>
Вспомните все, что мы прошли: тип `radio` для создания радиокнопки, атрибут `name` для группировки, а также `id` и `for` для связи с `<label>`. У всех кнопок в группе `name` должен быть одинаковым.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Стилизация выбранного варианта

id: 37847_html-radio-button-8

Радиокнопки можно стилизовать с помощью CSS. В этом задании CSS уже написан: он делает рамку и текст подписи у выбранного варианта ярче. Ваша задача — правильно связать `<label>` и `<input>`, чтобы стили применились.

CSS
body {
  font-family: sans-serif;
  padding: 15px;
}
.card-selector {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 300px;
}
.card {
  border: 2px solid #ccc;
  border-radius: 8px;
  padding: 15px;
  cursor: pointer;
  transition: all 0.2s ease;
}
input[type="radio"] {
  display: none;
}
input[type="radio"]:checked + .card {
  border-color: #007bff;
  box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
}
.card-title {
  font-weight: bold;
}
HTML
<p>Выберите тип карты:</p>
<div class="card-selector">
  <label input1="debit_card">
    <input type="radio" name="card_type" value="debit" id="debit_card" checked>
    <div class="card">
      <div class="card-title">Дебетовая карта</div>
      <div>Простой способ оплаты</div>
    </div>
  </label>
  <label for="credit_card">
    <input type="radio" name="card_type" value="credit" input2="credit_card">
    <div class="card">
      <div class="card-title">Кредитная карта</div>
      <div>Покупки с лимитом</div>
    </div>
  </label>
</div>
CSS-правило `input[type="radio"]:checked + .card` применяет стили к элементу с классом `.card`, который идет сразу после выбранной (`checked`) радиокнопки. Чтобы это сработало, оберните `input` и блок `.card` в общий `<label>` и свяжите его с `input` через `id` и `for`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Выбор с помощью изображений

id: 37847_html-radio-button-9

Радиокнопки не обязаны быть просто текстом. Можно использовать изображения в качестве меток, чтобы сделать выбор более наглядным. Свяжите первое изображение-метку с его скрытой радиокнопкой.

CSS
body {
  font-family: sans-serif;
  padding: 15px;
}
.image-picker {
  display: flex;
  gap: 15px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}
.image-picker input[type="radio"] {
  display: none;
}
.image-picker label img {
  width: 80px;
  height: 80px;
  border: 3px solid transparent;
  border-radius: 50%;
  cursor: pointer;
  transition: border-color 0.3s;
}
.image-picker input[type="radio"]:checked + label img {
  border-color: #4CAF50;
}
HTML
<p>Выберите аватар:</p>
<div class="image-picker">
  <input type="radio" name="avatar" input1="avatar1" value="1.png" checked>
  <label input2="avatar1">
    <img src="https://naytikurs.ru/img/1.png" alt="Аватар 1">
  </label>

  <input type="radio" name="avatar" id="avatar2" value="2.png">
  <label for="avatar2">
    <img src="https://naytikurs.ru/img/2.png" alt="Аватар 2">
  </label>

  <input type="radio" name="avatar" id="avatar4" value="4.png">
  <label for="avatar4">
    <img src="https://naytikurs.ru/img/4.png" alt="Аватар 4">
  </label>
</div>
Принцип тот же, что и с текстом. Тег `<label>` может содержать внутри себя тег `<img>`. Главное — правильно установить атрибуты `for` у `<label>` и `id` у соответствующего `<input>`, чтобы клик по картинке активировал радиокнопку.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку
Предыдущая темаСледующая тема
НайтиКурс.Ру