Sep.16th, 2020
“type="radio"”
“type="radio"”を指定した“input”要素はラジオボタンを表します。
同じ“form”要素に関連付けられ、かつ“name”属性の値が同じラジオボタンはグループ化され、そのうちの一つだけが選択できるようになります。
フォームの送信時には“name”属性の値とともに“value”属性の値が送信されます。同じグループのラジオボタンのいずれも選択されていない場合はフォームの送信時に“name”属性の値も“value”属性の値も送信されません。
“value”属性が指定されていない場合に送信される値の既定値は“on”です。同じグループの複数のラジオボタンで“value”属性が省略されている場合も“on”が入力値として送信されます。
入力の初期値を指定する場合は該当するラジオボタンに“checked”属性を指定します。同じグループの複数のラジオボタンに“checked”属性を指定した場合は最後に配置されたものが選択状態になります。
同じグループのラジオボタンのうちいずれかに“required”属性を指定した場合、そのグループは入力必須になります。なお、“required”属性を指定したラジオボタンが非選択状態でも同じグループのラジオボタンのいずれかが選択されていれば送信できます。
一般的なブラウザでは円として表示され、選択されると塗りつぶされます。通常、同じグループのラジオボタンのいずれかを選択状態にするとフォームのリセット以外の方法でユーザーがすべてを非選択状態にすることができません。
複数の選択肢を選択できるようにする場合はチェックボックス(“type="checkbox"”)を使用します。また、“select”要素でも選択式の入力欄を表すことができます。
サンプルコード
<form method="post" action="sample-inputtag2.php" target="_blank">
<fieldset>
<legend>どんな猫が好きですか？</legend>
<p>
<label><input type="radio" name="sample01" value="単色">単色</label>
<label><input type="radio" name="sample01" value="ハチワレ">ハチワレ</label>
<label><input type="radio" name="sample01" value="ポインテッド">ポインテッド</label>
<label><input type="radio" name="sample01" value="靴下">靴下</label>
<label><input type="radio" name="sample01" value="ヒョウ柄">ヒョウ柄</label>
<label><input type="radio" name="sample01" value="トラ柄">トラ柄</label>
<label><input type="radio" name="sample01" value="サビ">サビ</label>
<label><input type="radio" name="sample01" value="三毛">三毛</label>
</p>
</fieldset>
<p><button type="submit">送信する</button></p>
</form>
属性と値
| 属性 | 値 | ||
|---|---|---|---|
| 属性 | 説明 | 値 | 説明 |
| 必須属性 | |||
| type="" | 入力欄の種類 | radio | ラジオボタン |
| 任意属性 | |||
| グローバル属性 | checked="" | 選択された状態にする | checked | 選択された状態にする |
| disabled="" | 入力欄を無効化 | disabled | 入力欄を無効化 |
form="" |
関連付けるフォーム | ID名 | 関連づける“form”要素の“id”属性の値 |
| name="" | 入力欄の名前 | 文字列 | 入力欄の名前 |
| required="" |
入力を必須にする | required | 入力を必須にする |
| value="" | フォームで送信される値 | 文字列 | フォームで送信される値 |
