フォームの利用:ラジオボタン

フォームについて

Webページではページの閲覧の他にも、データの入出力を行う場面があります。
ユーザーが何らかのデーターを入力してやり取りを行う要素をフォームといいます。
具体的にはHTMLでの文章の入力欄やボタン等の選択を行うラジオボタンやチェックボックスなどがフォームとなります。
フォームは<input>タグで作成される要素です。
またフォームは<form>タグを用いてデータをまとめて取り扱うことができます。

ラジオボタンについて

今回はフォームの一つであるラジオボタンについて紹介したいと思います。
ラジオボタンは複数ある選択肢の中から一つだけ選択するフォームです。
以下はHTMLのラジオボタンの例の一つです

<input type="radio" name="button" value="A" onchange="buttonSelect(this.value)" checked>

type属性はどのタイプのフォームを用いるか指定します。今回はラジオボタンですのでradioとなります。
name属性はフォームの名前を指定します。フォームの種類ごとに名前でまとめて扱うことができ、ラジオボタンでは同じname属性のボタンから一つを選ぶことになります。
value属性はフォームが持つ値です。そのフォームを参照するときに、その値も利用してデータを処理することができます。
onchange属性はフォームの内容が変わったときの動作を指定します。この例ではラジオボタンの選択が変わったときにbuttonSelectという関数を実行します。
checkedは選択された状態であることを指定します。ラジオボタンでは最初にボタンが選択された状態になります。


今回はラジオボタンに対応してJavaScriptが動作するスクリプトを作りました



ラジオボタンを選択するとonchange属性でJavaScriptの関数buttonSelectを参照して、ラジオボタンが持つvalue属性の値を引数として関数buttonSelectに渡して動作します。