<input type="radio"> - HTML

この記事では

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

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

HTML で value 属性を省略すると、送信されたフォームデータのそのグループには on の値が割り当てられます。この場合、ユーザーが「電話」をクリックしてフォームを送信したのに、結果のフォームデータが contact=on となるため有益ではありません。ですから、 value 属性を設定することを忘れないようにしてください。メモ: フォームが送信されたときにラジオボタンが全く選択されていないと、ラジオグループが送信されたフォームにまったく含まれず、報告される値がなくなります。実際には、フォームがグループ内のラジオボタンをまったく選択しない状態で送信するのを許可することは一般的ではないので、既定で一つを checked 状態を設定しておくことには意味があります。下記の既定のラジオボタンの選択を参照してください。例に若干のコードを加えて、このフォームで生成されるデータを確認できるようにしましょう。 HTML を変更して、フォームデータを出力するためのを追加します。 html 希望する連絡方法を選択してください。メール電話郵便それから、いくらかの JavaScript を追加して、ユーザーが「送信」ボタンをクリックしたときに発生する submit イベントのイベントリスナーを設定します。 js 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 グループに二つ以上の結果が出ないことを確認してください。

`追加の属性`

すべての型で共通する属性に加え、 radio 型の入力は次の属性にも対応しています。

checked : 論理属性で、もしあれば、このラジオボタンがラジオグループ内で現在選択されているものであることを示します。 Firefox は他のブラウザーとは異なり、既定でページ読み込みをまたがってのチェック状態を維持します。この機能を制御するには autocomplete 属性を使用してください。 value value はすべてので共通のものの一つです。しかし、radio 型の入力欄では特別な目的になります。フォームが送信されるとき、現在チェックされているラジオボタンのみがサーバーに送信され、報告される値は value 属性の値になります。 value が指定されていない場合は、既定で on という文字列になります。これは以前に値の節で説明した通りです。 required required 属性は、ほとんどのに共通する属性です。同じ名前のラジオボタンのグループのいずれかに required 属性がある場合、そのグループのラジオボタンのいずれかをチェックする必要がありますが、その属性が適用されているラジオボタンをチェックする必要があるわけではありません。

`ラジオボタンの使用`

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

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

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

html 希望する連絡方法を選択してください。メール電話郵便この場合、最初のラジオボタンは既定で選択されるようになります。メモ: 複数のラジオボタンに checked 属性を指定した場合、後から指定したものが先に指定したものを上書きします。つまり、最後に checked されたラジオボタンが選択されることになります。これは、一度に選択できるラジオボタンはグループ内の 1 つだけであり、ユーザーエージェントは新しいラジオボタンがチェックされるたびに、他のラジオボタンの選択を自動的に解除するからです。

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

上記の例では、ラジオボタンそのものだけでなく、関連する要素をクリックすることで、ラジオボタンを選択できることにお気づきでしょうか。これは HTML フォームのラベルの実に便利な機能で、特にスマートフォンのような画面の小さな機器では、ユーザーが望む選択肢をクリックしやすくなります。

アクセシビリティを越えて、このこともフォームに要素を適切に設定する良い理由です。

`検証`

required 属性が設定されたラジオボタンの場合、または同じ名前のラジオボタンのグループで、そのうちの 1 つ以上に required が設定されている場合、このコントロールが有効とみなされるにはラジオボタンが選択されている必要があります。どのラジオボタンもチェックされていない場合、バリデーション中に ValidityState オブジェクトの valueMissing プロパティが true を返し、ブラウザーがユーザーにオプションの選択を要求します。

`ラジオボタンのスタイル設定`

次の例は、この記事全体で見てきた例を少し詳しくしたもので、いくつかの追加のスタイル設定と、専門要素を使用することでより適切な意味づけがなされています。 HTML はこのようになっています。

html 希望する連絡方法を選択してください。メール電話郵便この例では、 CSS が絡んでいるのが少し特徴的です。 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 つのボタンの状態が変わるときに、きれいで滑らかなフェードアウト/イン効果があることに注意してください。さらに、凡例と送信ボタンのスタイルと色は、強いコントラストを保有するようにカスタマイズされています。これは、実際のウェブアプリケーションで使用したい外観ではないかもしれませんが、その可能性を示していることは間違いありません。

`技術的概要`

値	ラジオボタンの値を表す文字列です。
イベント	`change` および `input`
対応している共通属性	`checked`, `value`, `required`
IDL 属性	`checked` および `value`
DOM インターフェイス	`HTMLInputElement`
メソッド	`select()`
暗黙の ARIA ロール	`radio`

`仕様書`

Specification
HTML # radio-button-state-(type=radio)

`ブラウザーの互換性`

関連情報およびそれが実装している HTMLInputElement インターフェイス RadioNodeList: ラジオボタンのリストを表現するインターフェイス Help improve MDN Was this page helpful to you? Learn how to contribute.This page was last modified on 2025年4月20日 by MDN contributors. View this page on GitHub • Report a problem with this content