【HTML Living Standard】radio属性値の使い方
radio属性値の使い方について、初心者にもわかりやすく解説します。
基本的な使い方
radio定数は、HTMLの<input>要素において、ユーザーが複数の選択肢の中から一つだけを選ぶためのインターフェース、いわゆる「ラジオボタン」を作成することを表す定数です。具体的には、<input type="radio">という形式で記述されます。
この定数の最も重要な特徴は、同じname属性を持つ複数の<input type="radio">要素がグループとして扱われ、そのグループ内では同時に一つの選択肢しか選べないという排他選択の機能を提供することです。例えば、性別選択やアンケートの単一回答などで利用されます。同じname属性を指定しない場合、それぞれのラジオボタンは独立した選択肢として機能し、排他選択は行われません。
各ラジオボタンはvalue属性を持つことができ、これによりユーザーが選択した項目に対応するデータをサーバーへ送信できます。また、checked属性を指定することで、ページ読み込み時にデフォルトで選択されている項目を設定することが可能です。アクセシビリティ向上のためには、<label>要素とid属性を組み合わせ、どのラジオボタンが何を表しているかを明確にすることが推奨されます。これにより、スクリーンリーダーの利用者やマウス操作が苦手なユーザーも容易に操作できるようになります。
構文(syntax)
1<input type="radio" id="optionId" name="groupName" value="selectedValue">
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません
サンプルコード
HTMLラジオボタンで選択肢を作る
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>HTMLラジオボタンのサンプル</title> 7</head> 8<body> 9 <h1>好きな果物を選んでください</h1> 10 11 <!-- フォーム要素を使ってラジオボタンの選択肢をグループ化 --> 12 <form> 13 <!-- fieldsetとlegendで関連するフォームコントロールをグループ化し、説明を提供 --> 14 <fieldset> 15 <legend>果物の選択</legend> 16 17 <!-- ラジオボタンのグループ。name属性が同じinput要素は、そのグループ内で1つだけ選択可能です。 --> 18 <div> 19 <!-- input要素のtype属性を"radio"に設定することでラジオボタンになります --> 20 <!-- id属性はラベルと関連付けるためにユニークな値を設定します --> 21 <!-- name属性はグループ名を示し、同じグループ内で1つしか選択できないようにします --> 22 <!-- value属性は、選択されたときにフォームで送信される値を定義します --> 23 <!-- checked属性は、ページロード時にデフォルトで選択される項目を指定します --> 24 <input type="radio" id="apple" name="favorite_fruit" value="apple" checked> 25 <!-- label要素はinput要素と関連付けられ、クリックでラジオボタンを選択できるようになります --> 26 <!-- for属性には関連付けるinput要素のidを指定します --> 27 <label for="apple">りんご</label> 28 </div> 29 30 <div> 31 <input type="radio" id="orange" name="favorite_fruit" value="orange"> 32 <label for="orange">オレンジ</label> 33 </div> 34 35 <div> 36 <input type="radio" id="grape" name="favorite_fruit" value="grape"> 37 <label for="grape">ぶどう</label> 38 </div> 39 40 <!-- フォーム送信ボタン（ラジオボタンの選択を送信する例） --> 41 <button type="submit">送信</button> 42 </fieldset> 43 </form> 44</body> 45</html>
このサンプルコードは、HTMLで「ラジオボタン」を作成し、ユーザーに複数の選択肢の中から一つだけを選ばせる方法を示しています。
ラジオボタンは、<input>要素のtype属性に"radio"を指定することで作成されます。複数のラジオボタンをグループ化し、そのグループ内で一つだけ選択できるようにするには、すべてのラジオボタンに同じname属性の値を設定します。たとえば、このコードでは全てのラジオボタンにname="favorite_fruit"が指定されており、これにより「りんご」「オレンジ」「ぶどう」の中から一つだけを選択できます。
id属性は、各ラジオボタンを一意に識別するためのもので、<label>要素と関連付けるために使用されます。<label>要素のfor属性にinput要素のidを指定することで、ラベルのテキスト部分をクリックしてもラジオボタンを選択できるようになり、操作性が向上します。
value属性は、ユーザーが選択した際に、フォームデータとしてサーバーに送信される値を定義します。checked属性は、ページが読み込まれたときにデフォルトで選択状態にするラジオボタンを指定するために使われます。
ラジオボタンを含むフォーム全体は<form>要素で囲みます。また、<fieldset>要素と<legend>要素は、関連するフォーム部品を視覚的・意味的にグループ化し、そのグループにタイトルを付けるために使われ、フォームの構造を分かりやすくします。HTMLの要素や属性には、プログラミング言語のような明確な「引数」や「戻り値」の概念はありませんが、type="radio"が要素の種類を定義し、nameやvalueといった属性がその動作や送信データを制御する役割を担っています。
HTMLのラジオボタンを利用する際は、複数の選択肢を一つのグループとして機能させるために、すべてのラジオボタンに同じname属性の値を設定することが最も重要です。このname属性は、選択された項目をサーバーに送信する際の識別子にもなります。
また、各ラジオボタンにはユニークなid属性を付与し、そのidと対応する**label要素のfor属性**を結びつけることで、表示されているテキスト部分をクリックしても選択できるようになり、ユーザビリティとアクセシビリティが向上します。
選択されたときにサーバーへ送信される実際のデータは**value属性で定義するため、各選択肢に適した値を設定してください。ページ読み込み時に初期状態で選択させておきたい項目がある場合は、そのinput要素にchecked属性**を追加します。
関連するラジオボタン群をfieldset要素とlegend要素で囲むと、フォームの構造が分かりやすくなり、スクリーンリーダーを利用するユーザーにも内容が伝わりやすくなるため推奨されます。これらの属性を正しく設定することで、安全で使いやすいフォームが実現できます。
HTML ラジオボタンの初期選択を設定する
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>HTML ラジオボタンと初期選択の例</title> 7</head> 8<body> 9 <h1>好きな果物を選んでください</h1> 10 11 <form> 12 <!-- 複数のラジオボタンを一つのグループにするには、同じ 'name' 属性を使用します。 --> 13 <!-- 'id' 属性は各入力要素を一意に識別し、'label' の 'for' 属性と関連付けます。 --> 14 <!-- 'checked' 属性を付けると、ページが読み込まれたときにその選択肢が初期状態で選ばれます。 --> 15 16 <div> 17 <input type="radio" id="apple" name="fruit" value="apple"> 18 <label for="apple">りんご</label> 19 </div> 20 21 <div> 22 <input type="radio" id="banana" name="fruit" value="banana" checked> 23 <label for="banana">バナナ (初期選択)</label> 24 </div> 25 26 <div> 27 <input type="radio" id="orange" name="fruit" value="orange"> 28 <label for="orange">オレンジ</label> 29 </div> 30 </form> 31</body> 32</html>
HTMLにおけるinput type="radio"は、複数の選択肢の中からユーザーに一つだけを選ばせたい場合に用いる入力フィールドです。複数のラジオボタンを一つのグループとして扱いたい場合は、すべての関連するinput要素に同じname属性の値を設定します。これにより、同じグループ内で同時に一つしか選択できないようになります。例えば、サンプルコードではすべてのラジオボタンにname="fruit"が設定されており、この中から一つだけを選べる仕組みです。
各input要素にはid属性で一意の識別子を付け、対応するlabel要素のfor属性と関連付けることで、ラベルのテキスト部分をクリックしてもラジオボタンを選択できるようになり、操作性が向上します。value属性は、ユーザーが選択した際にフォーム送信時にサーバーへ送られる値を定義します。
そして、checked属性を特定のinput type="radio"要素に追加すると、ウェブページが読み込まれた時点で、そのラジオボタンが初期状態で選択された状態になります。これは論理属性であり、値を指定せず単にcheckedと記述するだけで機能します。このinput type="radio"要素はHTMLの要素であり、プログラミング言語の関数とは異なるため、特定の引数や戻り値といった概念は存在しません。
HTMLのラジオボタンは、複数の選択肢から一つだけを選ばせる際に使用します。同じグループのラジオボタンには、必ず同じname属性値を設定してください。これにより、ユーザーはそのグループ内で一つだけを選択できるようになります。各ラジオボタンには一意のid属性を割り当て、関連する<label>要素のfor属性と一致させることで、クリック可能な領域が広がり、操作性とアクセシビリティが向上します。value属性には、選択された際にフォーム送信でサーバーに渡される値を設定します。checked属性は、ページが読み込まれた際に特定の選択肢を初期状態で選択済みにするために用います。一つのname属性グループ内でchecked属性を複数指定した場合、ブラウザは通常、最後に記述されたchecked属性を持つ要素を有効とするため、意図しない初期選択にならないよう注意が必要です。