Исполняемые доки HTML: Радиокнопка

Q: Как сделать радиокнопки в HTML?

Напишите по одному на каждый вариант, дайте им всем одинаковый name и разные value и поместите каждый в : Medium . Общее имя объединяет их в одну группу, где можно выбрать только один вариант.

Q: Почему можно выбрать несколько радиокнопок?

У кнопок разный name. Радиокнопки образуют группу только при одинаковом name (в одной форме), и в каждой группе можно выбрать только одну кнопку.

Q: Как получить значение выбранной радиокнопки в JavaScript?

Используйте form.elements.size.value, где size это имя группы; оно возвращает значение выбранной кнопки или пустую строку, если ничего не выбрано. Без формы: document.querySelector('input[name="size"]:checked')?.value.

Q: Как задать радиокнопку по умолчанию?

Добавьте checked одной кнопке группы: . Если он есть у нескольких, побеждает последняя.

Как сделать радиокнопки в HTML

Радиокнопки позволяют читателю выбрать ровно один вариант из группы. Каждый вариант это <input type="radio">, а одинаковый name и делает их группой. Выберите размер и нажмите Order:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Radio buttons</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    fieldset { border: 1px solid #9ca3af; border-radius: 8px; }
    label { display: block; margin: 4px 0; }
  </style>
</head>
<body>
  <form>
    <fieldset>
      <legend>Size</legend>
      <label><input type="radio" name="size" value="s"> Small</label>
      <label><input type="radio" name="size" value="m" checked> Medium</label>
      <label><input type="radio" name="size" value="l"> Large</label>
    </fieldset>
    <p><button type="submit">Order</button></p>
  </form>
</body>
</html>

Форма отправляет одну пару, size=m: name группы и value выбранной кнопки. Из чего это состоит:

Одинаковый name у всех кнопок группы. Выбор одной снимает выбор с остальных.
Разный value у каждой. Именно его получает сервер. Радиокнопка без value отправляет on, что серверу ничего не говорит.
checked у варианта по умолчанию.
<label> вокруг каждой кнопки, чтобы текст был кликабельным, и <fieldset> с <legend>, чтобы программы чтения с экрана объявляли вопрос («Size») вместе с каждым вариантом.

Группу создает name

Радиокнопки с разными именами образуют отдельные группы, и в каждой группе свой выбор. В этом примере две группы, а также сломанный набор, где каждой радиокнопке по ошибке досталось собственное имя:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Radio groups</title>
  <style>
    body { font-family: system-ui, sans-serif; display: flex; flex-wrap: wrap; gap: 16px; }
    fieldset { border: 1px solid #9ca3af; border-radius: 8px; }
    .broken { border-color: #dc2626; }
    label { display: block; margin: 4px 0; }
  </style>
</head>
<body>
  <fieldset>
    <legend>Crust</legend>
    <label><input type="radio" name="crust" value="thin" checked> Thin</label>
    <label><input type="radio" name="crust" value="thick"> Thick</label>
  </fieldset>
  <fieldset>
    <legend>Sauce</legend>
    <label><input type="radio" name="sauce" value="tomato" checked> Tomato</label>
    <label><input type="radio" name="sauce" value="pesto"> Pesto</label>
  </fieldset>
  <fieldset class="broken">
    <legend>Broken: different names</legend>
    <label><input type="radio" name="a" value="1"> One</label>
    <label><input type="radio" name="b" value="2"> Two</label>
    <label><input type="radio" name="c" value="3"> Three</label>
  </fieldset>
</body>
</html>

Кликните по всем трем в сломанной группе: все они остаются выбранными, и ни одну нельзя снова выключить, то есть худшее от обоих вариантов. Радиокнопки группируются по name внутри одной формы, поэтому в двух формах может быть по собственной группе name="size".

Обязательные группы и отсутствие выбора по умолчанию

required у любой радиокнопки группы означает, что перед отправкой формы нужно выбрать одну из них. Если не ставить checked, читателю придется выбрать самому, и это правильно, когда разумного варианта по умолчанию нет:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Required radio group</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    fieldset { border: 1px solid #9ca3af; border-radius: 8px; }
    label { display: block; margin: 4px 0; }
  </style>
</head>
<body>
  <form>
    <fieldset>
      <legend>How did you hear about us?</legend>
      <label><input type="radio" name="source" value="search" required> Search engine</label>
      <label><input type="radio" name="source" value="friend"> A friend</label>
      <label><input type="radio" name="source" value="video"> A video</label>
      <label><input type="radio" name="source" value="other"> Other</label>
    </fieldset>
    <p><button type="submit">Continue</button></p>
  </form>
</body>
</html>

Нажмите Continue, ничего не выбрав, и браузер остановит отправку с сообщением. Как только выбран любой вариант, вся группа становится корректной. Невыбранная необязательная группа не отправляет вообще ничего, как неотмеченный чекбокс.

Клик может выбрать радиокнопку, но никогда не снимает выбор. Если после выбора должна оставаться возможность «без ответа», добавьте для этого отдельный вариант.

Выбранное значение в JavaScript

form.elements.name возвращает всю группу, а ее .value это значение выбранной радиокнопки (пустая строка, если ничего не выбрано). Событие change срабатывает у радиокнопки, которая стала выбранной:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Selected value</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    label { margin-inline-end: 12px; }
    #price { font-size: 1.4em; font-weight: bold; color: #2563eb; }
  </style>
</head>
<body>
  <form id="billing">
    <label><input type="radio" name="period" value="monthly" checked> Monthly</label>
    <label><input type="radio" name="period" value="yearly"> Yearly</label>
  </form>
  <p>Price: <span id="price"></span></p>

  <script>
    const form = document.querySelector('#billing');
    const prices = { monthly: '12 per month', yearly: '96 per year' };
    const show = () => {
      document.querySelector('#price').textContent = prices[form.elements.period.value];
    };
    form.addEventListener('change', show);
    show();
  </script>
</body>
</html>

Обработчик стоит на форме, поэтому ловит изменение любого ее поля. Вне формы найдите выбранную радиокнопку через document.querySelector('input[name="period"]:checked').

Поведение клавиатуры

Группа радиокнопок это одна остановка в порядке Tab. Tab переводит фокус в группу, на выбранную радиокнопку (или на первую, если ничего не выбрано), а стрелки перемещают выбор между вариантами. Следующий Tab выводит из группы. Это работает само собой у настоящих радиокнопок с общим name, и это еще одна причина не собирать радиокнопки из элементов <div>.

Оформление радиокнопок

accent-color перекрашивает стандартную радиокнопку. appearance: none позволяет нарисовать собственный кружок. А поскольку скрытую радиокнопку все равно можно выбрать через ее label, группа может выглядеть как набор карточек и сохранять все поведение радиокнопок:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Radio styles</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .accent { accent-color: #16a34a; }

    .dot {
      appearance: none;
      width: 18px;
      height: 18px;
      margin: 0;
      border: 2px solid #6b7280;
      border-radius: 50%;
      vertical-align: middle;
    }
    .dot:checked { border: 6px solid #2563eb; }
    .dot:focus-visible { outline: 3px solid #f59e0b; outline-offset: 2px; }

    .cards { display: flex; flex-wrap: wrap; gap: 8px; border: 0; padding: 0; margin: 16px 0 0; }
    .card { display: block; padding: 10px 14px; border: 2px solid #e5e7eb; border-radius: 10px; cursor: pointer; }
    .card input { position: absolute; opacity: 0; }
    .card:has(input:checked) { border-color: #2563eb; background: #eff6ff; }
    .card:has(input:focus-visible) { outline: 3px solid #f59e0b; outline-offset: 2px; }
  </style>
</head>
<body>
  <label><input type="radio" class="accent" name="c1" checked> accent-color</label>
  <label><input type="radio" class="accent" name="c1"> accent-color</label>
  <p>
    <label><input type="radio" class="dot" name="c2" checked> Custom</label>
    <label><input type="radio" class="dot" name="c2"> Custom</label>
  </p>
  <fieldset class="cards">
    <legend>Plan</legend>
    <label class="card"><input type="radio" name="plan" value="free" checked> Free</label>
    <label class="card"><input type="radio" name="plan" value="pro"> Pro</label>
    <label class="card"><input type="radio" name="plan" value="team"> Team</label>
  </fieldset>
</body>
</html>

Свой кружок в выбранном состоянии это просто толстая рамка. Карточки скрывают поле через opacity: 0, а не display: none, поэтому оно остается доступным для фокуса и стрелки продолжают работать, а :has(input:checked) оформляет выбранную карточку. :has() работает в современных Chrome, Firefox и Safari.

Радиокнопка, чекбокс или select?

Что использовать	Когда
Радиокнопки	Один выбор из нескольких вариантов (примерно от 2 до 6), которые должны быть видны все сразу
Чекбоксы	Любое количество вариантов, включая ни одного
`<select>`	Один выбор из длинного списка, например стран (см. select в HTML)

Частые ошибки

Разные name в одной группе. Можно выбрать каждую радиокнопку, и ни одну нельзя сбросить.
Нет value. Сервер получает on, что бы ни было выбрано.
Поле скрыто через display: none в своем дизайне. На нем больше нельзя сфокусироваться, и им нельзя пользоваться с клавиатуры.
Нет <fieldset> и <legend>. Программы чтения с экрана объявляют «Small, радиокнопка» без вопроса, к которому это относится.
Одна радиокнопка для флажка «Я согласен». С нее никогда нельзя снять выбор; используйте чекбокс.
checked у нескольких радиокнопок одной группы. Выбранной в итоге оказывается только последняя.

Часто задаваемые вопросы

Как сделать радиокнопки в HTML?

Напишите по одному <input type="radio"> на каждый вариант, дайте им всем одинаковый name и разные value и поместите каждый в <label>: <label><input type="radio" name="size" value="m"> Medium</label>. Общее имя объединяет их в одну группу, где можно выбрать только один вариант.

Почему можно выбрать несколько радиокнопок?

У кнопок разный name. Радиокнопки образуют группу только при одинаковом name (в одной форме), и в каждой группе можно выбрать только одну кнопку.

Как получить значение выбранной радиокнопки в JavaScript?

Используйте form.elements.size.value, где size это имя группы; оно возвращает значение выбранной кнопки или пустую строку, если ничего не выбрано. Без формы: document.querySelector('input[name="size"]:checked')?.value.

Как задать радиокнопку по умолчанию?

Добавьте checked одной кнопке группы: <input type="radio" name="plan" value="free" checked>. Если он есть у нескольких, побеждает последняя.

Можно ли снять выбор с радиокнопки?

Кликом нельзя: клик только выбирает. Добавьте вариант «Нет», сбросьте форму или присвойте в JavaScript button.checked = false. Если выбор должен быть необязательным и отменяемым, лучше подойдет чекбокс или select.

Связанные концепции

Радиокнопка в HTML: группы, выбор по умолчанию и стили