ラジオボタン

ラジオボタン（またはオプションボタン）は、グラフィカルユーザーインターフェース（GUI）において、複数の選択肢の中から一つだけを選択する際に用いられるウィジェットです。その名称は、カーラジオの選局ボタンに由来しており、一つのボタンを押すと他のボタンが非選択状態に戻り、常に一つのボタンだけが選択された状態になるという特徴を表しています。

ラジオボタンは、通常、二つ以上がグループとして表示され、例えば丸い形状のものが一列に並んで配置されます。選択されていない状態では、単なる丸い枠として表示され、選択されると内部に点などが表示されます。それぞれのラジオボタンの横には、通常ラベルが付与されており、そのボタンを選択した場合にどのような項目が選択されるのかを説明しています。ユーザーがラジオボタンをクリックすると、同じグループ内でそれまで選択されていたボタンは選択が解除されます。ラジオボタンの選択は、ボタンそのものをクリックするか、あるいはラベルの上でクリックするか、またはショートカットキーを使用して行います。

初期状態では、グループ内のどのボタンも選択されていないように設定することが可能です。ただし、ラジオボタンのウィジェットの操作だけでは、その状態に戻すことはできません。初期状態に戻すためには、他のインターフェース要素を利用する必要があります。Macintoshのユーザーインターフェースガイドラインでは、ラジオボタングループでは常に一つのアイテムが選択されている必要があるとされています。Microsoft Windowsのユーザーエクスペリエンスガイドラインにおいても、原則としていずれかのラジオボタンが初期状態で選択されている状態にすることが推奨されています。

HTMLフォームにおいては、グループ内のどのボタンも選択されていない場合、フォームが送信される際に値が渡されません。例えば、「性別」というラジオボタングループで「男性」と「女性」のボタンが用意されているものの、どちらも選択されていない場合、「性別」の値はサーバーに送信されず、空白値も渡されません。

HTMLでの実装

ウェブフォームでラジオボタンを表示するには、``というHTML要素を使用します。`name`属性を用いてグループを定義します。同じ`name`を持つラジオボタンは同一グループとして扱われ、そのグループ内では一つのラジオボタンのみが選択可能になります。

html
男性
女性

Unicodeでの表現

Unicode標準のバージョン6では、ラジオボタンを表現するための文字（🔘）が追加されました。この文字のコードポイントはU+1F518であり、Miscellaneous Symbols and Pictographsセクションに収録されています。類似の文字としては、circled dot演算子（⊙）（U+2299）、魚の目 (◉) (U+25C9）、二重丸（◎）（U+25CE）などが存在します。

また、Wingdings 2フォントには、ポジション153と158にラジオボタンに似た見た目の字体が用意されています。

ラジオボタンは、ユーザーが複数の選択肢の中から一つだけを選びたい場合に非常に有効なインターフェース要素です。ウェブサイトやアプリケーション開発において、ユーザーエクスペリエンスを向上させるために活用されています。

もう一度検索