このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docsコミュニティーについてもっと知り、仲間になるにはこちらから。
<input type="radio">
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月.
<input> 要素のradio 型は、一般にラジオグループ、すなわち関連するオプションの組み合わせを示すラジオボタンの集まりです。
グループ内でラジオボタンは一つしか同時に選択することができません。ラジオボタンはふつう、小さな円で描かれ、選択されたら塗りつぶされたりや強調表示されたりします。
試してみましょう
<fieldset> <legend>Select a maintenance drone:</legend> <div> <input type="radio" name="drone" value="huey" checked /> <label for="huey">Huey</label> </div> <div> <input type="radio" name="drone" value="dewey" /> <label for="dewey">Dewey</label> </div> <div> <input type="radio" name="drone" value="louie" /> <label for="louie">Louie</label> </div></fieldset>p,label { font: 1rem "Fira Sans", sans-serif;}input { margin: 0.4rem;}ラジオボタンと呼ばれるのは、以下のように外見や操作方法が古い型のラジオのプッシュボタンに似ているからです。
メモ:チェックボックスはラジオボタンに似ていますが、重要な違いがあります。ラジオボタンは一組の中で一つの値を選択するように設計されているのに対し、チェックボックスは個別に値をオンまたはオフに設定できます。複数のコントロールが存在するところでは、ラジオボタンは全体の中で一つを選択できますが、チェックボックスは複数の値を選択することができます。
値
value 属性はラジオボタンの値を持つ文字列です。値はユーザーエージェントがユーザーに表示することはありません。代わりに、グループ内のどのラジオボタンが選択されているかを識別するために使用されます。
ラジオグループの定義
ラジオグループは、グループ内のそれぞれのラジオボタンに同じname を設定することで定義します。ラジオグループが確立されると、グループ内のラジオボタンを選択すると、同じグループの現在選択されているラジオボタンが自動的に選択解除されます。
ページ内には、固有のname を持っている限り、好きなだけの数のラジオグループを作成することができます。
例えば、フォームでユーザーに希望する問い合わせ方法を尋ねる必要がある場合、3 つのラジオボタンを作成し、それぞれのname プロパティにcontact を設定しますが、1 つはvalue をemail に、1 つは value をphone に、1 つは value をmail に設定します。ユーザーはvalue またはname を見ることはありません（表示させるコードを追加しない限り）。
最終的な HTML はこのようになります。
<form> <fieldset> <legend>希望する連絡方法を選択してください。</legend> <div> <input type="radio" name="contact" value="email" /> <label for="contactChoice1">メール</label> <input type="radio" name="contact" value="phone" /> <label for="contactChoice2">電話</label> <input type="radio" name="contact" value="mail" /> <label for="contactChoice3">郵便</label> </div> <div> <button type="submit">送信</button> </div> </fieldset></form>ここでは三つのラジオボタンがあり、それぞれのname がcontact に設定されており、それぞれのラジオボタンを個別に識別するための固有のvalue を持っています。それぞれは固有のid も持っており、<label> 要素のfor 属性でラジオボタンにラベルを結びつけるために使われます。
この例をこちらで試すことができます。
ラジオグループのデータ表現
ラジオボタンが選択された状態で上記のフォームが送信されると、フォームのデータにはcontact=value の形の項目が含まれます。例えば、ユーザーが「電話」ラジオボタンをクリックしてからフォームを送信すると、フォームのデータにはcontact=phone という行が含まれます。
HTML でvalue 属性を省略すると、送信されたフォームデータのそのグループにはon の値が割り当てられます。この場合、ユーザーが「電話」をクリックしてフォームを送信したのに、結果のフォームデータがcontact=on となるため有益ではありません。ですから、value 属性を設定することを忘れないようにしてください。
メモ:フォームが送信されたときにラジオボタンが全く選択されていないと、ラジオグループが送信されたフォームにまったく含まれず、報告される値がなくなります。
実際には、フォームがグループ内のラジオボタンをまったく選択しない状態で送信するのを許可することは一般的ではないので、既定で一つをchecked 状態を設定しておくことには意味があります。下記の既定のラジオボタンの選択を参照してください。
例に若干のコードを加えて、このフォームで生成されるデータを確認できるようにしましょう。 HTML を変更して、フォームデータを出力するための<pre> を追加します。
<form> <fieldset> <legend>希望する連絡方法を選択してください。</legend> <div> <input type="radio" name="contact" value="email" /> <label for="contactChoice1">メール</label> <input type="radio" name="contact" value="phone" /> <label for="contactChoice2">電話</label> <input type="radio" name="contact" value="mail" /> <label for="contactChoice3">郵便</label> </div> <div> <button type="submit">送信</button> </div> </fieldset></form><pre></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 は他のブラウザーとは異なり、既定でページ読み込みをまたがって
<input>のチェック状態を維持します。この機能を制御するにはautocomplete属性を使用してください。
value
value はすべての<input> で共通のものの一つです。しかし、radio 型の入力欄では特別な目的になります。フォームが送信されるとき、現在チェックされているラジオボタンのみがサーバーに送信され、報告される値はvalue 属性の値になります。value が指定されていない場合は、既定でon という文字列になります。これは以前に値の節で説明した通りです。
ラジオボタンの使用
上記で最も基本的なラジオボタンの使用方法を見てきました。他に必要になりそうなラジオボタンに関するよく使われる機能や技術を見てみましょう。
既定のラジオボタンの選択
ラジオボタンを既定で選択状態にするには、単にchecked 属性を加えるだけです。前回の例を更新するとこのようになります。
<form> <fieldset> <legend>希望する連絡方法を選択してください。</legend> <div> <input type="radio" name="contact" value="email" checked /> <label for="contactChoice1">メール</label> <input type="radio" name="contact" value="phone" /> <label for="contactChoice2">電話</label> <input type="radio" name="contact" value="mail" /> <label for="contactChoice3">郵便</label> </div> <div> <button type="submit">送信</button> </div> </fieldset></form>この場合、最初のラジオボタンは既定で選択されるようになります。
メモ:複数のラジオボタンにchecked 属性を指定した場合、後から指定したものが先に指定したものを上書きします。つまり、最後にchecked されたラジオボタンが選択されることになります。これは、一度に選択できるラジオボタンはグループ内の 1 つだけであり、ユーザーエージェントは新しいラジオボタンがチェックされるたびに、他のラジオボタンの選択を自動的に解除するからです。
ラジオボタンのヒット領域を大きくする
上記の例では、ラジオボタンそのものだけでなく、関連する<label> 要素をクリックすることで、ラジオボタンを選択できることにお気づきでしょうか。これは HTML フォームのラベルの実に便利な機能で、特にスマートフォンのような画面の小さな機器では、ユーザーが望む選択肢をクリックしやすくなります。
アクセシビリティを越えて、このこともフォームに<label> 要素を適切に設定する良い理由です。
検証
required 属性が設定されたラジオボタンの場合、または同じ名前のラジオボタンのグループで、そのうちの 1 つ以上にrequired が設定されている場合、このコントロールが有効とみなされるにはラジオボタンが選択されている必要があります。どのラジオボタンもチェックされていない場合、バリデーション中にValidityState オブジェクトのvalueMissing プロパティがtrue を返し、ブラウザーがユーザーにオプションの選択を要求します。
ラジオボタンのスタイル設定
次の例は、この記事全体で見てきた例を少し詳しくしたもので、いくつかの追加のスタイル設定と、専門要素を使用することでより適切な意味づけがなされています。 HTML はこのようになっています。
<form> <fieldset> <legend>希望する連絡方法を選択してください。</legend> <div> <input type="radio" name="contact" value="email" checked /> <label for="contactChoice1">メール</label> <input type="radio" name="contact" value="phone" /> <label for="contactChoice2">電話</label> <input type="radio" name="contact" value="mail" /> <label for="contactChoice3">郵便</label> </div> <div> <button type="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 擬似クラスが、選択時のラジオボタンの外観のスタイルを指定するために使用されていることに注目してください。
メモ:もしappearance プロパティを使用したい場合は、とても慎重にテストする必要があります。このプロパティはほとんどの現代のブラウザーで対応していますが、その実装は大きく異なっています。古いブラウザーでは、キーワードnone でさえ異なる形で同じ効果を持たず、まったく対応していないブラウザーもあります。最新のブラウザーでは、そのような違いは小さくなっています。
ラジオボタンをクリックすると、 2 つのボタンの状態が変わるときに、きれいで滑らかなフェードアウト/イン効果があることに注意してください。さらに、凡例と送信ボタンのスタイルと色は、強いコントラストを保有するようにカスタマイズされています。これは、実際のウェブアプリケーションで使用したい外観ではないかもしれませんが、その可能性を示していることは間違いありません。
技術的概要
仕様書
| Specification |
|---|
| HTML # radio-button-state-(type=radio) |
ブラウザーの互換性
関連情報
<input>およびそれが実装しているHTMLInputElementインターフェイスRadioNodeList: ラジオボタンのリストを表現するインターフェイス