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

---
title: <input type="radio">
slug: Web/HTML/Element/input/radio
tags:
  - Choosing Options
  - Element
  - Form Options
  - HTML
  - HTML Input Types
  - HTML forms
  - HTML input
  - Input
  - Input Types
  - Options
  - Radio Buttons
  - Radio Groups
  - Reference
  - form
  - radio
  - radio button
translation_of: Web/HTML/Element/input/radio
---
<div>{{HTMLRef("Input_types")}}</div>

<p><span class="seoSummary">{{htmlelement("input")}} 要素の <strong><code>radio</code></strong> 型は、一般に<strong>ラジオグループ</strong>、すなわち関連するオプションの組み合わせを示すラジオボタンの集まりです。</span>グループ内でラジオボタンは一つしか同時に選択することができません。ラジオボタンはふつう、小さな円で描かれ、選択されたら塗りつぶしや強調表示されます。</p>

<div>{{EmbedInteractiveExample("pages/tabbed/input-radio.html", "tabbed-standard")}}</div>

<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a></div>

<p><a href="https://github.com/mdn/interactive-examples">をクローンしてプルリクエストを送信してください。</a></p>



<div id="Basic_example">
<p><a href="https://github.com/mdn/interactive-examples">ラジオボタンと呼ばれるのは、以下のように外見や操作方法が古い型のラジオのプッシュボタンに似ているからです。</a></p>

<p><a href="https://github.com/mdn/interactive-examples"><img alt="古い時代のラジオボタンの外観を示します。" src="https://mdn.mozillademos.org/files/15610/old-radio.jpg" style="height: 400px; width: 600px;" title="古い時代のラジオの写真"></a></p>
</div>

<div class="note">
<p><a href="https://github.com/mdn/interactive-examples"><strong>注</strong>: </a><a href="/ja/docs/Web/HTML/Element/input/checkbox">チェックボックス</a>はラジオボタンに似ていますが、重要な違いがあります。ラジオボタンは一組の中で一つの値を選択するように設計されているのに対し、チェックボックスは個別に値をオンまたはオフに設定できます。複数のコントロールが存在するところでは、ラジオボタンは全体の中で一つを選択できますが、チェックボックスは複数の値を選択することができます。</p>
</div>

<table class="properties">
 <tbody>
  <tr>
   <td><strong>{{anch("Value", "値")}}</strong></td>
   <td>ラジオボタンの値を表す {{domxref("DOMString")}}</td>
  </tr>
  <tr>
   <td><strong>イベント</strong></td>
   <td>{{event("change")}} および {{event("input")}}</td>
  </tr>
  <tr>
   <td><strong>対応している共通属性</strong></td>
   <td><code>checked</code> および <code>value</code></td>
  </tr>
  <tr>
   <td><strong>IDL 属性</strong></td>
   <td><code>{{anch("checked")}}</code> および <code>{{anch("value")}}</code></td>
  </tr>
  <tr>
   <td><strong>メソッド</strong></td>
   <td>{{domxref("HTMLInputElement.select", "select()")}}</td>
  </tr>
 </tbody>
</table>

<h2 id="Value" name="Value">値</h2>

<p><code>value</code> 属性はラジオボタンの値を持つ {{domxref("DOMString")}} です。値は{{Glossary("user agent", "ユーザーエージェント")}}がユーザーに表示することはありません。代わりに、グループ内のどのラジオボタンが選択されているかを識別するために使用されます。</p>

<h3 id="Defining_a_radio_group" name="Defining_a_radio_group">ラジオグループの定義</h3>

<p>ラジオグループは、グループ内のそれぞれのラジオボタンに同じ {{htmlattrxref("name", "input")}} を設定することで定義します。ラジオグループが確立されると、グループ内のラジオボタンを選択すると、同じグループの現在選択されているラジオボタンが自動的に選択解除されます。</p>

<p>ページ内には、固有の <code>name</code> を持っている限り、好きなだけの数のラジオグループを作成することができます。</p>

<p>例えば、フォームでユーザーに希望する問い合わせ方法を尋ねる必要がある場合、3つのラジオボタンを作成し、それぞれの <code>name</code> プロパティに <code>contact</code> を設定しますが、1つは {{htmlattrxref("value", "input")}} を <code>email</code> に、1つは value を <code>phone</code> に、1つは value を <code>mail</code> に設定します。ユーザーは <code>value</code> または <code>name</code> を見ることはありません (表示させるコードを追加しない限り)。</p>

<p>最終的な HTML はこのようになります。</p>

<pre class="brush: html notranslate">&lt;form&gt;
  &lt;p&gt;希望する連絡方法を選択してください。&lt;/p&gt;
  &lt;div&gt;
    &lt;input type="radio" id="contactChoice1"
     name="contact" value="email"&gt;
    &lt;label for="contactChoice1"&gt;電子メール&lt;/label&gt;

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

    &lt;input type="radio" id="contactChoice3"
     name="contact" value="mail"&gt;
    &lt;label for="contactChoice3"&gt;郵便&lt;/label&gt;
  &lt;/div&gt;
  &lt;div&gt;
    &lt;button type="submit"&gt;送信&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="Data_representation_of_a_radio_group" name="Data_representation_of_a_radio_group">ラジオグループのデータ表現</h3>

<p>ラジオボタンが選択された状態で上記のフォームが送信されると、フォームのデータには <code>contact=<var>value</var></code> の形の項目が含まれます。例えば、ユーザーが「電話」ラジオボタンをクリックしてからフォームを送信すると、フォームのデータには <code>contact=phone</code> という行が含まれます。</p>

<p>HTML で <code>value</code> 属性を省略すると、送信されたフォームデータのそのグループには <code>on</code> の値が割り当てられます。この場合、ユーザーが「電話」をクリックしてフォームを送信したのに、結果のフォームデータが <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;希望する連絡方法を選択してください。&lt;/p&gt;
  &lt;div&gt;
    &lt;input type="radio" id="contactChoice1"
           name="contact" value="email"&gt;
    &lt;label for="contactChoice1"&gt;電子メール&lt;/label&gt;
    &lt;input type="radio" id="contactChoice2"
           name="contact" value="phone"&gt;
    &lt;label for="contactChoice2"&gt;電話&lt;/label&gt;
    &lt;input type="radio" id="contactChoice3"
           name="contact" value="mail"&gt;
    &lt;label for="contactChoice3"&gt;郵便&lt;/label&gt;
  &lt;/div&gt;
  &lt;div&gt;
    &lt;button type="submit"&gt;送信&lt;/button&gt;
  &lt;/div&gt;
&lt;/form&gt;
&lt;pre id="log"&gt;
&lt;/pre&gt;
</pre>

<p>それから、いくらかの <a href="/ja/docs/Web/JavaScript">JavaScript</a> を追加して、ユーザーが「送信」ボタンをクリックしたときに発生する {{domxref("HTMLFormElement/submit_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 = output + entry[0] + "=" + entry[1] + "\r";
  };
  log.innerText = output;
  event.preventDefault();
}, false);</pre>

<p>この例を試してみて、 <code>contact</code> グループに二つ以上の結果が出ないことを確認してください。</p>

<p>{{EmbedLiveSample("Data_representation_of_a_radio_group", 600, 130)}}</p>

<h2 id="Additional_attributes" name="Additional_attributes">追加の属性</h2>

<p>すべての {{HTMLElement("input")}} 型で共通する属性に加え、 <code>radio</code> 型の入力は次の属性にも対応しています。</p>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">属性</th>
   <th scope="col">説明</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td><code>{{anch("checked")}}</code></td>
   <td>論理属性で、このラジオボタンがグループ内で項目が現在選択されているかどうかを示す</td>
  </tr>
  <tr>
   <td><code>{{anch("value")}}</code></td>
   <td>ラジオボタンがオンになっている場合に、フォームを投稿したときラジオボタンの値として使用される文字列</td>
  </tr>
 </tbody>
</table>

<h3 id="htmlattrdefchecked">{{htmlattrdef("checked")}}</h3>

<p>論理属性で、もしあれば、このラジオボタンがラジオグループ内で現在選択されているものであることを示します。</p>

<p>他のブラウザーとは異なり、 Firefox は既定でページ読み込みを通して <code>&lt;input&gt;</code> の<a href="https://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing">チェック状態を維持します</a>。この機能を制御するには {{htmlattrxref("autocomplete","input")}} 属性を使用してください。</p>

<h3 id="htmlattrdefvalue">{{htmlattrdef("value")}}</h3>

<p><code>value</code> はすべての {{HTMLElement("input")}} で共通のものの一つです。しかし、 <code>radio</code> 型の入力欄では特別な目的になります。フォームが送信されるとき、現在チェックされているラジオボタンのみがサーバーに送信され、報告される値は <code>value</code> 属性の値になります。 <code>value</code> が指定されていない場合は、既定で <code>on</code> という文字列になります。これは前述の{{anch("Value", "値")}}の節で説明しています。</p>

<h2 id="Using_radio_inputs" name="Using_radio_inputs">ラジオボタンの使用</h2>

<p>上記で最も基本的なラジオボタンの使用方法を見てきました。他に必要になりそうなラジオボタンに関するよく使われる機能や技術を見てみましょう。</p>

<h3 id="Selecting_a_radio_button_by_default" name="Selecting_a_radio_button_by_default">既定のラジオボタンの選択</h3>

<p>ラジオボタンを既定で選択状態にするには、単に <code>checked</code> 属性を加えるだけです。前回の例を更新するとこのようになります。</p>

<pre class="brush: html notranslate">&lt;form&gt;
  &lt;p&gt;希望する連絡方法を選択してください。&lt;/p&gt;
  &lt;div&gt;
    &lt;input type="radio" id="contactChoice1"
     name="contact" value="email" checked&gt;
    &lt;label for="contactChoice1"&gt;電子メール&lt;/label&gt;

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

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

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

<p>In this case, the first radio button is now selected by default.</p>

<div class="note">
<p><strong>Note</strong>: If you put the <code>checked</code> attribute on more than one radio button, later instances will override earlier ones; that is, the last <code>checked</code> radio button will be the one that is selected. This is because only one radio button in a group can ever be selected at once, and the user agent automatically deselects others each time a new one is marked as checked.</p>
</div>

<h3 id="Providing_a_bigger_hit_area_for_your_radio_buttons" name="Providing_a_bigger_hit_area_for_your_radio_buttons">ラジオボタンのヒット領域を大きくする</h3>

<p>In the above examples, you may have noticed that you can select a radio button by clicking on its associated {{htmlelement("label")}} element, as well as on the radio button itself. This is a really useful feature of HTML form labels that makes it easier for users to click the option they want, especially on small-screen devices like smartphones.</p>

<p>Beyond accessibility, this is another good reason to properly set up <code>&lt;label&gt;</code> elements on your forms.</p>

<h2 id="Validation" name="Validation">検証</h2>

<p>Radio buttons don't participate in constraint validation; they have no real value to be constrained.</p>

<h2 id="Styling_radio_inputs" name="Styling_radio_inputs">ラジオボタンの整形</h2>

<p>The following example shows a slightly more thorough version of the example we've seen throughout the article, with some additional styling, and with better semantics established through use of specialized elements. The HTML looks like this:</p>

<pre class="brush: html notranslate">&lt;form&gt;
  &lt;fieldset&gt;
    &lt;legend&gt;希望する連絡方法を選択してください。&lt;/legend&gt;
    &lt;div&gt;
      &lt;input type="radio" id="contactChoice1"
       name="contact" value="email" checked&gt;
      &lt;label for="contactChoice1"&gt;電子メール&lt;/label&gt;

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

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

<p>There's not much new to note here except for the addition of {{htmlelement("fieldset")}} and {{htmlelement("legend")}} elements, which help to group the functionality nicely and in a semantic way.</p>

<p>The CSS involved is a bit more significant:</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;
  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>Most notable here is the use of the {{cssxref("-moz-appearance")}} property (with prefixes needed to support some browsers). By default, radio buttons (and <a href="/ja/docs/Web/HTML/Element/input/checkbox">checkboxes</a>) are styled with the operating system's native styles for those controls. By specifying <code>appearance: none</code>, you can remove the native styling altogether, and create your own styles for them. Here we've used a {{cssxref("border")}} along with {{cssxref("border-radius")}} and a {{cssxref("transition")}} to create a nice animating radio selection. Notice also how the {{cssxref(":checked")}} pseudo-class is used to specify the styles for the radio button's appearance when selected.</p>

<div class="note">
<p><strong>Compatibility note</strong>: If you wish to use the {{cssxref("appearance")}} property, you should test it very carefully. Although it is supported in most modern browsers, its implementation varies widely. In older browsers, even the keyword <code>none</code> does not have the same effect across different browsers, and some do not support it at all. The differences are smaller in the newest browsers.</p>
</div>

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

<p>Notice that when clicking on a radio button, there's a nice, smooth fade out/in effect as the two buttons change state. In addition, the style and coloring of the legend and submit button are customized to have strong contrast. This might not be a look you'd want in a real web application, but it definitely shows off the possibilities.</p>

<h2 id="Specifications" name="Specifications">仕様書</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">仕様書</th>
   <th scope="col">状態</th>
   <th></th>
  </tr>
 </thead>
 <tbody>
  <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="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>

<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div>

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

<h2 id="See_also" name="See_also">関連情報</h2>

<ul>
 <li>{{HTMLElement("input")}} およびそれが実装している {{domxref("HTMLInputElement")}} インターフェイス</li>
 <li>{{domxref("RadioNodeList")}}: ラジオボタンのリストを表現するインターフェイス</li>
 <li><a href="/ja/docs/Learn/Forms/Property_compatibility_table_for_form_controls">CSS プロパティの互換性</a></li>
</ul>