この翻訳は不完全です。英語から この記事を翻訳 してください。

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

<input type="radio" id="radioButton">

ラジオボタンと呼ばれるのは、以下のように外見や操作方法が古い型のラジオのプッシュボタンに似ているからです。

ラジオボタンが古い時代のように見える例を示しています。

メモ: チェックボックスはラジオボタンに似ていますが、重要な違いがあります。ラジオボタンは一組の中で一つの値を選択するように設計されているのに対し、チェックボックスは個別に値をオンまたはオフに設定できます。複数のコントロールが存在するところでは、ラジオボタンは全体の中で1つを選択できますが、チェックボックスは複数の値を選択することができます。

ラジオボタンの値を表す DOMString
イベント change 及び input
対応する共通属性 checked
IDL 属性 checked 及び value
メソッド select()

value 属性

value 属性はラジオボタンの値を含む DOMString です。値はユーザーエージェントがユーザーに表示することはありません。代わりに、グループ内のどのラジオボタンが選択されているかを識別するために使用されます。

ラジオグループの定義

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

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

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

最終的な HTML はこのようになります。

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

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

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

Here you see the three radio buttons, each with the name set to "contact" and each with a unique value that uniquely identifies that individual radio button within the group. They each also have a unique id, which is used by the <label> element's for attribute to associate the labels with the radio buttons.

You can try out this example here:

ラジオグループのデータ表現

When the above form is submitted with a radio button selected, the form's data includes an entry in the form "contact=value". For example, if the user clicks on the "Phone" radio button then submits the form, the form's data will include the line "contact=phone".

If you omit the value attribute in the HTML, the submitted form data assigns the value "on" to the group. In this scenario, if the user clicked on the "Phone" option and submitted the form, the resulting form data would be "contact=on", which isn't helpful. So don't forget to set your value attributes!

Note: If no radio button is selected when the form is submitted, the radio group is not included in the submitted form data at all, since there is no value to report.

It's fairly uncommon to actually want to allow the form to be submitted without any of the radio buttons in a group selected, so it is usually wise to have one default to the "checked" state. See Selecting a radio button by default below.

Let's add a little bit of code to our example so we can examine the data generated by this form. The HTML is revised to add a <pre> block to output the form data into:

<form> 
  <p>Please select your preferred contact method:</p>
  <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>
</form>
<pre id="log">
</pre>

Then we add some JavaScript to set up an event listener on the submit event, which is sent when the user clicks the "Submit" button:

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);

Try this example out and see how there's never more than one result for the "contact" group.

ラジオボタンの使用

We already covered the fundamentals of radio buttons above. Let's now look at the other common radio-button-related features and techniques you may need to know about.

既定のラジオボタンの選択

To make a radio button selected by default, you simply include checked attribute, as shown in this revised version of the previous example:

<form>
  <p>Please select your preferred contact method:</p>
  <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>
</form>

In this case, the first radio button is now selected by default.

Note: If you put the checked attribute on more than one radio button, later instances will override earlier ones; that is, the last checked 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.

ラジオボタンのヒット領域を大きくする。

In the above examples, you may have noticed that you can select a radio button by clicking on its associated <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.

Beyond accessibility, this is another good reason to properly set up <label> elements on your forms.

検証

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

ラジオボタンの整形

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:

<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>

There's not much new to note here except for the addition of <fieldset> and <legend> elements, which help to group the functionality nicely and in a semantic way.

The CSS involved is a bit more significant:

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;
}

Most notable here is the use of the appearance property (with prefixes needed to support some browsers). By default, radio buttons (and checkboxes) are styled with the operating system's native styles for those controls. By specifying appearance: none, you can remove the native styling altogether, and create your own styles for them. Here we've used a border along with border-radius and a transition to create a nice animating radio selection. Notice also how the :checked pseudo-class is used to specify the styles for the radio button's appearance when selected.

This is not without its problems: appearance is not too bad for simple styling, but it tends to behave inconsistently in some browsers, and it doesn't work at all in Internet Explorer. Test carefully to make sure your site works in every browser for which you want users or customers.

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.

仕様策定状況

仕様書 策定状況 コメント
HTML Living Standard
<input type="radio"> の定義
現行の標準  
HTML5
<input type="radio"> の定義
勧告  

ブラウザーの対応

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari
基本対応 (有) (有) (有) (有) (有)
機能 Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
基本対応 (有) 4.0 (2.0) (有) (有) (有)

関連情報

  • 全般的な <input> 及びその操作に使用する HTMLInputElement インターフェイス
  • RadioNodeList: ラジオボタンのリストを表現するインターフェイス

ドキュメントのタグと貢献者

 このページの貢献者: mfuji09
 最終更新者: mfuji09,