Webエンジニア向けプログラミング解説動画をYouTubeで配信中!
▶ チャンネル登録はこちら

【HTML Living Standard】radio属性値の使い方

radio属性値の使い方について、初心者にもわかりやすく解説します。

作成日: 更新日:

基本的な使い方

radio定数は、HTMLの<input>要素において、ユーザーが複数の選択肢の中から一つだけを選ぶためのインターフェース、いわゆる「ラジオボタン」を作成することを表す定数です。具体的には、<input type="radio">という形式で記述されます。

この定数の最も重要な特徴は、同じname属性を持つ複数の<input type="radio">要素がグループとして扱われ、そのグループ内では同時に一つの選択肢しか選べないという排他選択の機能を提供することです。例えば、性別選択やアンケートの単一回答などで利用されます。同じname属性を指定しない場合、それぞれのラジオボタンは独立した選択肢として機能し、排他選択は行われません。

各ラジオボタンはvalue属性を持つことができ、これによりユーザーが選択した項目に対応するデータをサーバーへ送信できます。また、checked属性を指定することで、ページ読み込み時にデフォルトで選択されている項目を設定することが可能です。アクセシビリティ向上のためには、<label>要素とid属性を組み合わせ、どのラジオボタンが何を表しているかを明確にすることが推奨されます。これにより、スクリーンリーダーの利用者やマウス操作が苦手なユーザーも容易に操作できるようになります。

公式リファレンス: <input type="radio">

構文(syntax)

1<input type="radio" id="optionId" name="groupName" value="selectedValue">

引数(parameters)

引数なし

引数はありません

戻り値(return)

戻り値なし

戻り値はありません

関連コンテンツ