<input type="radio">

<input> элементов типа radio обычно используются в группах радиокнопок — наборах радиокнопок, описывающих набор связанных вариантов.

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

Они называются радиокнопками, потому что выглядят и работают аналогично кнопкам нажимания на старых радиоприёмниках, таких как показанный ниже.

Атрибут value представляет собой строку, содержащую значение радиокнопки. Пользовательский агент пользователя никогда не отображает это значение. Вместо этого используется для идентификации выбранной радиокнопки в группе.

Группа радиокнопок определяется назначением одинакового значения атрибута name каждой радиокнопке в группе. После создания группы радиокнопок выбор любой радиокнопки в этой группе автоматически отменяет выбор любой выбранной радиокнопки в той же группе.

Вы можете использовать любое количество групп радиокнопок на странице, при условии, что у каждой есть своё уникальное значение атрибута name.

Например, если вашей форме нужно запросить у пользователя предпочтительный способ связи, вы можете создать три радиокнопки, каждая с атрибутом name значением contact, но одной со значением email, одной со значением phone, и одной со значением mail. Пользователь никогда не видит значение value или name (если вы явно не добавите код для его отображения).

Результирующий HTML выглядит следующим образом:

<form>
  <fieldset>
    <legend>Please select your preferred contact method:</legend>
    <div>
      <input type="radio" id="contactChoice1" name="contact" value="email" />
      <label for="contactChoice1">Email</label>

      <input type="radio" id="contactChoice2" name="contact" value="phone" />
      <label for="contactChoice2">Phone</label>

      <input type="radio" id="contactChoice3" name="contact" value="mail" />
      <label for="contactChoice3">Mail</label>
    </div>
    <div>
      <button type="submit">Submit</button>
    </div>
  </fieldset>
</form>

Здесь вы видите три радиокнопки, каждая с атрибутом name значением contact, и каждая с уникальным атрибутом value, который уникально идентифицирует эту отдельную радиокнопку в группе. У каждой также есть уникальный id, который используется атрибутом <label> элемента for для сопоставления меток с радиокнопками.

Вы можете попробовать этот пример здесь:

При отправке формы с выбранной радиокнопкой данные формы включают запись в виде contact=value. Например, если пользователь нажмёт на радиокнопку «Телефон», а затем отправит форму, данные формы будут содержать строку contact=phone.

Если вы опустите атрибут value в HTML, данные отправляемой формы присвоят группе значение on. В этом случае, если пользователь нажал на «Телефон» и отправил форму, полученные данные формы будут contact=on, что не очень полезно. Поэтому не забудьте установить атрибуты value!

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

Давайте добавим немного кода в наш пример, чтобы мы могли проверить данные, генерируемые этой формой. HTML переработан для добавления блока <pre> для вывода данных формы:

<form>
  <fieldset>
    <legend>Please select your preferred contact method:</legend>
    <div>
      <input type="radio" id="contactChoice1" name="contact" value="email" />
      <label for="contactChoice1">Email</label>
      <input type="radio" id="contactChoice2" name="contact" value="phone" />
      <label for="contactChoice2">Phone</label>
      <input type="radio" id="contactChoice3" name="contact" value="mail" />
      <label for="contactChoice3">Mail</label>
    </div>
    <div>
      <button type="submit">Submit</button>
    </div>
  </fieldset>
</form>
<pre id="log"></pre>

Затем мы добавим JavaScript для установки обработчика событий на событие submit, которое отправляется при нажатии пользователем на кнопку «Отправить»:

const form = document.querySelector("form");
const log = document.querySelector("#log");

form.addEventListener(
  "submit",
  (event) => {
    const data = new FormData(form);
    let output = "";
    for (const entry of data) {
      output = `${output}${entry[0]}=${entry[1]}\r`;
    }
    log.innerText = output;
    event.preventDefault();
  },
  false,
);

Попробуйте этот пример и посмотрите, как для группы contact никогда не будет более одного результата.

В дополнение к общим атрибутам, общим для всех <input> элементов, элементы ввода типа radio поддерживают следующие атрибуты.

checked

Булевый атрибут, который, если присутствует, указывает, что эта радиокнопка выбрана по умолчанию в группе.

В отличие от других браузеров, Firefox по умолчанию сохраняет динамическое состояние checked элемента <input> при перезагрузке страницы. Используйте атрибут autocomplete для управления этой функцией.

value

Атрибут value существует у всех элементов <input>, но для элементов типа radio он служит специальной цели: при отправке формы на сервер передаются только те радиокнопки, которые в данный момент выбраны, а отсылаемое значение — значение атрибута value. Если атрибут value не указан, по умолчанию используется строка on. Это показано в разделе Значение выше.

required

Атрибут required общ для большинства элементов <input>. Если какая-либо радиокнопка в группе с одинаковым именем имеет атрибут required , в этой группе должна быть выбрана какая-либо радиокнопка, хотя это может быть и не та, к которой был применён атрибут.

Мы уже рассмотрели основные принципы работы радиокнопок выше. Теперь давайте рассмотрим другие общие функции и приёмы, связанные с радиокнопками, которые вам могут понадобиться.

Чтобы сделать радиокнопку выбранной по умолчанию, включите атрибут checked, как показано в этой переработанной версии предыдущего примера:

<form>
  <fieldset>
    <legend>Please select your preferred contact method:</legend>
    <div>
      <input
        type="radio"
        id="contactChoice1"
        name="contact"
        value="email"
        checked />
      <label for="contactChoice1">Email</label>

      <input type="radio" id="contactChoice2" name="contact" value="phone" />
      <label for="contactChoice2">Phone</label>

      <input type="radio" id="contactChoice3" name="contact" value="mail" />
      <label for="contactChoice3">Mail</label>
    </div>
    <div>
      <button type="submit">Submit</button>
    </div>
  </fieldset>
</form>

В этом случае первая радиокнопка теперь выбрана по умолчанию.

В вышеприведённых примерах вы, возможно, заметили, что вы можете выбрать радиокнопку, нажав на связанный с ней элемент <label>, а также на саму радиокнопку. Это очень полезная функция меток HTML-формы, которая упрощает пользователям выбор нужного варианта, особенно на устройствах с маленьким экраном, таких как смартфоны.

Помимо доступности, это ещё одна причина для правильной настройки элементов <label> в ваших формах.

В случае радиокнопки с установленным атрибутом required или группы радиокнопок с одинаковым именем, где по крайней мере один член имеет required , для того чтобы элемент считался валидным, необходимо выбрать радиокнопку. Если ни одна радиокнопка не выбрана, свойство valueMissing объекта ValidityState вернёт true во время проверки, и браузер попросит пользователя выбрать вариант.

Следующий пример демонстрирует более полную версию примера, который мы видели в статье, с дополнительным стилистическим оформлением и лучшей семантикой, достигнутой за счет использования специализированных элементов. HTML выглядит так:

<form>
  <fieldset>
    <legend>Please select your preferred contact method:</legend>
    <div>
      <input
        type="radio"
        id="contactChoice1"
        name="contact"
        value="email"
        checked />
      <label for="contactChoice1">Email</label>

      <input type="radio" id="contactChoice2" name="contact" value="phone" />
      <label for="contactChoice2">Phone</label>

      <input type="radio" id="contactChoice3" name="contact" value="mail" />
      <label for="contactChoice3">Mail</label>
    </div>
    <div>
      <button type="submit">Submit</button>
    </div>
  </fieldset>
</form>

CSS, используемый в этом примере, немного более значителен:

html {
  font-family: sans-serif;
}

div:first-of-type {
  display: flex;
  align-items: flex-start;
  margin-bottom: 5px;
}

label {
  margin-right: 15px;
  line-height: 32px;
}

input {
  appearance: none;

  border-radius: 50%;
  width: 16px;
  height: 16px;

  border: 2px solid #999;
  transition: 0.2s all linear;
  margin-right: 5px;

  position: relative;
  top: 4px;
}

input:checked {
  border: 6px solid black;
}

button,
legend {
  color: white;
  background-color: black;
  padding: 5px 10px;
  border-radius: 0;
  border: 0;
  font-size: 14px;
}

button:hover,
button:focus {
  color: #999;
}

button:active {
  background-color: white;
  color: black;
  outline: 1px solid black;
}

Наиболее заметным здесь является использование свойства appearance (с необходимыми префиксами для поддержки некоторых браузеров). По умолчанию радиокнопки (и флажки) стилизуются с помощью собственных стилей операционной системы для этих элементов управления. Указав appearance: none, вы можете полностью удалить родные стили и создать свои собственные стили для них. Здесь мы использовали border вместе с border-radius и transition, чтобы создать красивую анимацию при выборе радиокнопки. Обратите внимание также, как используется псевдокласс :checked для указания стилей отображения радиокнопки при её выборе.

Обратите внимание, что при нажатии на радиокнопку происходит плавное эффект плавного затемнения/высвечивания при изменении состояния обеих кнопок. Кроме того, стиль и цвет легенды и кнопки отправки настраиваются для обеспечения сильного контраста. Это может быть нежелательный вид в реальном веб-приложении, но это демонстрирует возможности.

• <input> и интерфейс HTMLInputElement, который его реализует.
• RadioNodeList: интерфейс, описывающий список радиокнопок
• Совместимость свойств CSS