path: root/files/ru/web/html/element/input/radio/index.html

---
title: <input type="radio">
slug: Web/HTML/Element/Input/radio
tags:
  - HTML
  - Input
  - Reference
  - form
  - radio button
  - Варианты
  - Группа радиокнопок
  - Радиокнопка
  - Справка
  - Ссылки
translation_of: Web/HTML/Element/input/radio
---
<div>{{HTMLRef}}</div>

<p><span class="seoSummary">Атрибут<strong> type</strong> тега <code>&lt;input&gt;</code> со значением <strong><code>radio</code></strong> обычно используется для создания группы радиокнопок (переключателей), описывающих набор взаимосвязанных параметров.</span> Одновременно пользователь может выбрать лишь одну радиокнопку из предложенных. Радиокнопки обычно отображаются как небольшие кружки, которые заполняются или подсвечиваются при наведении.</p>

<div id="Basic_example">
<pre class="brush: html notranslate">&lt;input type="radio" id="radioButton"&gt;</pre>

<p>{{ EmbedLiveSample('Basic_example', 600, 30) }}</p>

<p>Исходный код к данному интерактивному примеру находиться на GitHub репозитории. Если вы желаете внести свой вклад в проект интерактивных примеров, то склонируйте удалённый репозиторий <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a>и отправьте нам запрос на включение сделанных вами изменений «pull request».</p>

<p>Радиокнопки называются так потому, что выглядят и функционируют в схожей манере с кнопками старомодных радиоприёмников, подобных представленному ниже. </p>

<p><img alt="Shows what radio buttons looked like in the olden days." src="https://mdn.mozillademos.org/files/15610/old-radio.jpg" style="height: 400px; width: 600px;" title="Photo of an old-time radio"></p>
</div>

<div class="note">
<p><strong>Примечание</strong>: <a href="/en-US/docs/Web/HTML/Element/input/checkbox">Чекбоксы</a> похожи на радиокнопки, но с одним важным отличием: радиокнопки предназначены для выбора одного значения из предложенных, в то время как чекбоксы позволяют "включать" и "выключать"  значения. Если существует несколько элементов управления, то с помощью радиокнопок пользователь сможет выбрать лишь один из них, а чекбоксы позволят выбрать несколько значений одновременно.</p>
</div>

<table class="properties">
 <tbody>
  <tr>
   <td><strong>{{anch("Value")}}</strong></td>
   <td>{{domxref("Строка DOM")}} отображающая значение радиокнопки</td>
  </tr>
  <tr>
   <td><strong>События</strong></td>
   <td>{{event("change")}} и {{event("input")}}</td>
  </tr>
  <tr>
   <td><strong>Универсальные атрибуты</strong></td>
   <td>{{htmlattrxref("checked", "input")}}</td>
  </tr>
  <tr>
   <td><strong>Атрибуты IDL</strong></td>
   <td><code>checked</code> и <code>value</code></td>
  </tr>
  <tr>
   <td><strong>Методы</strong></td>
   <td>{{domxref("HTMLInputElement.select", "select()")}}</td>
  </tr>
 </tbody>
</table>

<h2 id="Атрибут_value">Атрибут value </h2>

<p>Атрибут <code>value</code> - это {{domxref("строка DOM")}}, содержащая значение радиокнопки. Это значение никогда не показывается пользователю его веб-браузером. Атрибут value используется для того, чтобы точно определить какая из радиокнопок была выбрана пользователем.</p>

<h3 id="Создание_группы_радиокнопок">Создание группы радиокнопок</h3>

<p>Группа радиокнопок определяется путём присвоения каждой радиокнопке в данной группе одного и того же значения атрибута ({{htmlattrxref("name", "input")}}). Выбор любой радиокнопки в этой группе автоматически отменяет выбор другой радиокнопки в той же группе. </p>

<p>Вы можете создать любое количество групп радиокнопок, если каждой из этих групп будет присвоено своё уникальное значение атрибута <code>name</code>.</p>

<p>Например, если в вашей форме необходимо запросить  предпочитаемый способ контакта с пользователем, то вы можете создать три радиокнопки с <strong>name= <code>"contact"</code> , </strong>но с разными<strong> value = </strong><code>"email"</code>, <strong>value =</strong><code>"phone"</code> и <strong>value =</strong>  <code>"mail"</code> соответственно. Пользователь не видит атрибуты <code>name</code>  и <code>value</code> (если только вы не добавляете код для их отображения).</p>

<p>HTML будет выглядеть следующим образом:</p>

<pre class="brush: html notranslate">&lt;form&gt;
  &lt;p&gt;Please select your preferred contact method:&lt;/p&gt;
  &lt;div&gt;
    &lt;input type="radio" id="contactChoice1"
     name="contact" value="email"&gt;
    &lt;label for="contactChoice1"&gt;Email&lt;/label&gt;

    &lt;input type="radio" id="contactChoice2"
     name="contact" value="phone"&gt;
    &lt;label for="contactChoice2"&gt;Phone&lt;/label&gt;

    &lt;input type="radio" id="contactChoice3"
     name="contact" value="mail"&gt;
    &lt;label for="contactChoice3"&gt;Mail&lt;/label&gt;
  &lt;/div&gt;
  &lt;div&gt;
    &lt;button type="submit"&gt;Submit&lt;/button&gt;
  &lt;/div&gt;
&lt;/form&gt;</pre>

<p>Здесь вы видите три радиокнопки, каждая из которых имеет атрибут <code>name</code>  со значением <code>"contact"</code> и уникальный атрибут <code>value</code>, который однозначно идентифицирует эту радиокнопку в данной группе. Каждой радиокнопке присвоен уникальный {{domxref("Element.id", "id")}},  связанный с тегом {{HTMLElement("label")}} через атрибут {{htmlattrxref("for", "label")}}  для установления связи между конкретной меткой и конкретной радиокнопкой. </p>

<p>Вы можете опробовать этот код здесь: </p>

<p>{{ EmbedLiveSample('Defining_a_radio_group', 600, 130) }}</p>

<h3 id="Представление_данных_группы_радиокнопок">Представление данных группы радиокнопок</h3>

<p>Когда представленная выше форма отправляется на сервер с информацией о выбранной радиокнопке,  то её данные  включают запись в виде <strong>"contact=name".</strong> Например, если пользователь кликает на радиокнопку "Phone", а затем отправляет форму на сервер, данные формы будут включать в себя строку <code>"contact=phone"</code>.</p>

<p>Если вы пренебрежёте атрибутом <code>value</code> в  вашем HTML, то отправленные данные просто присвоят данной группе значение <code>"on"</code>.  То есть, если пользователь кликнет на радиокнопку "Phone" и отправит форму, итоговые данные отобразятся как  <code>"contact=on"</code> и будут абсолютно бесполезны. Поэтому никогда не забывайте указывать атрибут <code>value</code>!</p>

<div class="note">
<p><strong>Примечание</strong>: Если в отправленной форме не была выбрана ни одна радиокнопка, то группа радиокнопок вообще не будет включать в себя никакие данные, так как отсутствуют значения для отправки.</p>
</div>

<p>Поскольку отправлять пустую форму в большинстве случаев не имеет никакого смысла, то разумно оставлять одну радиокнопку активированной по умолчанию с помощью атрибута <code>"checked"</code>. Смотрите здесь {{anch("Selecting a radio button by default")}}.</p>

<p>Давайте добавим немного кода в наш пример для того, чтобы изучить данные, полученные из этой формы. HTML изменяется путём добавления блока {{HTMLElement("pre")}} для вывода данных формы. </p>

<pre class="brush: html notranslate">&lt;form&gt;
  &lt;p&gt;Please select your preferred contact method:&lt;/p&gt;
  &lt;div&gt;
    &lt;input type="radio" id="contactChoice1"
           name="contact" value="email"&gt;
    &lt;label for="contactChoice1"&gt;Email&lt;/label&gt;
    &lt;input type="radio" id="contactChoice2"
           name="contact" value="phone"&gt;
    &lt;label for="contactChoice2"&gt;Phone&lt;/label&gt;
    &lt;input type="radio" id="contactChoice3"
           name="contact" value="mail"&gt;
    &lt;label for="contactChoice3"&gt;Mail&lt;/label&gt;
  &lt;/div&gt;
  &lt;div&gt;
    &lt;button type="submit"&gt;Submit&lt;/button&gt;
  &lt;/div&gt;
&lt;/form&gt;
&lt;pre id="log"&gt;
&lt;/pre&gt;
</pre>

<p>Затем добавим немного <a href="/en-US/docs/Web/JavaScript">JavaScript</a>. Установим обработчик события {{event("submit")}}, которая будет отправляться при клике пользователя на кнопку "Отправить":</p>

<pre class="brush: js notranslate">var form = document.querySelector("form");
var log = document.querySelector("#log");

form.addEventListener("submit", function(event) {
  var data = new FormData(form);
  var output = "";
  for (const entry of data) {
    output = entry[0] + "=" + entry[1] + "\r";
  };
  log.innerText = output;
  event.preventDefault();
}, false);</pre>

<p>Опробуйте этот пример и убедитесь, что для группы радиокнопок  <code>"contact"</code>  будет только один результат.</p>

<p>{{EmbedLiveSample("Представление_данных_группы_радиокнопок", 600, 130)}}</p>

<h2 id="Использование_радиокнопок">Использование радиокнопок</h2>

<p>Мы уже осветили основные моменты работы с радиокнопками выше. Давайте рассмотрим другие распространённые  функции и методы, связанные с использованием радиокнопок, о которых вам нужно знать.</p>

<h3 id="Выбор_радиокнопки_по_умолчанию">Выбор радиокнопки по умолчанию</h3>

<p>Чтобы установить радиокнопку как выбранную по умолчанию, вам необходимо подключить атрибут <code>checked</code>, как показано ниже в немного изменённой версии предыдущего примера.</p>

<pre class="brush: html notranslate">&lt;form&gt;
  &lt;p&gt;Please select your preferred contact method:&lt;/p&gt;
  &lt;div&gt;
    &lt;input type="radio" id="contactChoice1"
     name="contact" value="email" checked&gt;
    &lt;label for="contactChoice1"&gt;Email&lt;/label&gt;

    &lt;input type="radio" id="contactChoice2"
     name="contact" value="phone"&gt;
    &lt;label for="contactChoice2"&gt;Phone&lt;/label&gt;

    &lt;input type="radio" id="contactChoice3"
     name="contact" value="mail"&gt;
    &lt;label for="contactChoice3"&gt;Mail&lt;/label&gt;
  &lt;/div&gt;
  &lt;div&gt;
    &lt;button type="submit"&gt;Submit&lt;/button&gt;
  &lt;/div&gt;
&lt;/form&gt;</pre>

<p>{{ EmbedLiveSample('Selecting_a_radio_button_by_default', 600, 130) }}</p>

<p>В данном случае первая радиокнопка будет выбрана по умолчанию.</p>

<div class="note">
<p><strong>Примечание</strong>: Если вы устанавливаете атрибут <code>checked</code> более чем на одну кнопку, то стоит иметь в виду, что каждый последующий атрибут <code>checked</code> отменяет предыдущий, то  есть как отмеченная будет выбрана последняя радиокнопка с атрибутом <code>checked</code>. Это происходит потому, что в каждой группе радиокнопок одновременно может быть выбрана только одна кнопка, и браузер автоматически отменяет другие выбранные до этого радиокнопки.</p>
</div>

<h3 id="Providing_a_bigger_hit_area_for_your_radio_buttons">Providing a bigger hit area for your radio buttons</h3>

<p>В примерах, представленных выше, вы могли заметить, что можно выбрать радиокнопку, кликнув как на соединённый с ней элемент  {{htmlelement("label")}}, так и на саму кнопку. Это действительно полезная функция HTML-форм, которая облегчает пользователям выбор нужной опции, особенно на устройствах с небольшим экраном, таких как смартфоны.  Помимо специальных возможностей, это другая веская причина для правильного использования элементов  <code>&lt;label&gt;</code>  в ваших формах.</p>

<h2 id="Валидация_формы">Валидация формы</h2>

<p>Радиокнопки не участвуют в проверке ограничений, так как у них нет реальных значений для ограничения.</p>

<h2 id="Установка_стилей_радиокнопок">Установка стилей радиокнопок</h2>

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

<p>HTML будет выглядеть следующим образом:</p>

<pre class="brush: html notranslate">&lt;form&gt;
  &lt;fieldset&gt;
    &lt;legend&gt;Please select your preferred contact method:&lt;/legend&gt;
    &lt;div&gt;
      &lt;input type="radio" id="contactChoice1"
       name="contact" value="email" checked&gt;
      &lt;label for="contactChoice1"&gt;Email&lt;/label&gt;

      &lt;input type="radio" id="contactChoice2"
       name="contact" value="phone"&gt;
      &lt;label for="contactChoice2"&gt;Phone&lt;/label&gt;

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

<p>Здесь не так много нового, кроме дополнения в виде элементов {{htmlelement("fieldset")}} и {{htmlelement("legend")}}, которые позволяют сгруппировать элементы форм между собой функционально и семантически.</p>

<p>CSS будет выглядеть так:</p>

<pre class="brush: css notranslate">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 {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;

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

  border: 2px solid #999;
  transition: 0.2s all linear;
  outline: none;
  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;
}</pre>

<p>Самым примечательным здесь является использование свойства {{cssxref("appearance")}} с использованием префиксов некоторых браузеров. По умолчанию радиокнопки (и чекбоксы) уже имеют собственные стили в каждой операционной системе. Придав свойству <code>appearance</code> значение <code>none</code>, вы можете отменить все "родные" настройки стилей операционной системы и создать свои собственные. Здесь мы использовали свойства {{cssxref("border")}} и  {{cssxref("border-radius")}}, а также свойство {{cssxref("transition")}} для создания хорошо анимированного выбора радиокнопок. Заметьте также, что псевдокласс {{cssxref(":checked")}} используется для указания стилей внешнего вида кнопок при их выборе.</p>

<p>Стоит иметь в виду, что свойство  <code>appearance</code> неплохо работает для создания простых стилей, но имеет тенденцию вести себя несколько непоследовательно в некоторых браузерах и полностью не работает в Internet Explorer. Тщательно проверяйте как работает ваш сайт в каждом браузере! </p>

<p>{{ EmbedLiveSample('Styling_radio_inputs', 600, 120) }}</p>

<p>Обратите внимание, что при клике на радиокнопку, на предыдущей выбранной кнопке появляется мягкий эффект угасания. Кроме того, стиль и окраска легенды и кнопки "Submit" имеет сильный контраст с остальным текстом. Возможно, это не совсем тот эффект, который вы хотели бы видеть в своём реальном веб-приложении, но этот пример хорошо отображает возможности CSS.</p>

<h2 id="Спецификации">Спецификации</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th>Specification</th>
   <th>Status</th>
   <th></th>
  </tr>
  <tr>
  </tr>
  <tr>
   <td>{{SpecName('HTML WHATWG', 'forms.html#radio-button-state-(type=radio)', '&lt;input type="radio"&gt;')}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{SpecName('HTML5 W3C', 'forms.html#radio-button-state-(type=radio)', '&lt;input type="radio"&gt;')}}</td>
   <td>{{Spec2('HTML5 W3C')}}</td>
   <td></td>
  </tr>
 </tbody>
</table>

<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>

<p>{{Compat("html.elements.input.input-radio")}}</p>

<h2 id="Смотрите_также">Смотрите также</h2>

<ul>
 <li>{{HTMLElement("input")}} and the {{domxref("HTMLInputElement")}} interface that implements it.</li>
 <li>{{interface("RadioNodeList")}}: the interface that describes a list of radio buttons</li>
</ul>