フォームの操作-1
JavaScriptはフォームを操作する場合にもよく利用されます。このステップでは、formオブジェクトの指定方法、およびテキストボックス、テキストエリア、チェックボックスのプロパティについて学習します。
16.1 formオブジェクトの指定
formオブジェクトHTMLの<form>～</form>に対応するオブジェクトで、以下のようにforms[i]というオブジェクト名で指定します。[]内の添字「i」は、HTMLファイル内に<form>～</form>が記述された順に0、1、2、3、…と付けられています。
document.forms[i]
また、name属性でformタグに名前を付け、その名前でformオブジェクトを指定することも可能です。
16.2 formオブジェクトの下位オブジェクトを指定する
STEP15の図15-2に示したように、formオブジェクトにはボタンやテキストボックス、ラジオボタンなど、下位オブジェクトが含まれています。JavaScriptでフォームを操作する際は、これらの下位オブジェクトを指定する場合がほとんどです。これらのオブジェクトは、forms[i]に続けてelements[j]という名前で指定します。
document.forms[i].elements[j]
添字[j]は、その<form>～</form>内にinput、textarea、select、buttonといったタグが記述された順に0、1、2、3、…と付けられていきます。
もちろん、各タグにname属性で名前を付け、その名前でオブジェクトを指定することも可能です。
16.3 テキストボックスとテキストエリア
<input type="text" …>により作成されたテキストボックスは、Textオブジェクトとして管理されます。同様に、<textarea>～</textarea>で作成されたテキストエリアはTextareaオブジェクトとして管理されます。
これらのオブジェクトでよく利用されるプロパティはvalueです。valueプロパティを利用すると、テキストボックスやテキストエリアに入力されている文字を操作できます。
たとえば、次のページのようにJavaScriptを記述すると、オブジェクト名document.forms[i].elements[j]のテキストボックス（またはテキストエリア）に入力されている文字を変数「a」に代入できます。
また、ボックス内の文字を変更することも可能です。たとえば、STEP01で紹介した「Sample1_1.html」では、valueプロパティでテキストボックス内の数値を変更しています。
▼Sample1_1.html（抜粋）
体育館の利用料金
■Text、Textareaオブジェクトの主なプロパティ
| プロパティ | 値 | 指定内容 |
|---|---|---|
| value | （文字） | ボックス内に入力されている文字 |
| defaultValue | （文字） | 初期値として表示していた文字 |
| name | （文字） | オブジェクトの名前 |
| type | text/textarea | オブジェクトのタイプ |
16.4 チェックボックス
<input type="checkbox" …>により作成されたチェックボックスは、Checkboxオブジェクトとして管理されます。このオブジェクトでよく利用されるプロパティはcheckedで、チェックされている場合はtrue、チェックされていない場合は、falseを値とします。そのほか、Checkオブジェクトでは、以下のようなプロパティがよく利用されます。
■Checkboxオブジェクトの主なプロパティ
| プロパティ | 値 | 指定内容 |
|---|---|---|
| checked | true/false | チェックの有無 |
| defaultChecked | true/false | チェックの有無の初期値 |
| value | （文字） | チェックボックスの値(HTMLのvalue属性) |
| name | （文字） | オブジェクトの名前 |
| type | checkbox | オブジェクトのタイプ |
16.5 テキストボックスとチェックボックスの活用例
続いては、TextオブジェクトとCheckboxオブジェクトを活用例した例として、STEP01で紹介した「Sample1_1.html」について解説します。
▼Sample1_1.html（抜粋）
このHTMLファイルの作成ポイントは以下のとおりです。
≪HTMLについて≫
・23行目
formタグに"fi"という名前を付けています。このため、formオブジェクトはdocument.f1で指定できます。
・24～26行目
チェックボックスをクリックした際に、関数「goukei( )」を呼び出します。どのチェックボックスがクリックされたかは、引数の数値で識別します。
≪JavaScriptについて≫
・3～7行目
合計金額の初期値（基本使用料）を変数「total」に指定します。また、配列「a」に追加分の利用料金を指定します。
・8～15行目
関数「goukei( )」の処理を記述します。引数は変数「i」に代入され、Checkboxオブジェクトを識別する添字、および対応する配列「a」（利用料金）の添字として利用されます。
・9～13行目
if～else文により条件分岐を行います。クリックされたチェックボックス（document.f1.elements[i]）がチェックされていた場合（checked==true）、配列a[i]の値を変数「total」に加算します。逆に、チェックされていない場合（チェックを外した場合）は、配列a[i]の値を変数「total」から減算します。
・14行目
合計金額を表示するテキストボックス（document.f1.elements[3]）の値に、変数「total」を代入します。これで、表示される合計金額が変更されます。
演習
（１）以下のようなクイズのホームページを作成してみましょう。
(問題)
英語のことわざで「1日1個食べると医者いらず」と言われている果物は何でしょう？
（チェックボックスをチェックした場合）
「apple」「Apple」「APPLE」と答えた場合………「正解です！」と表示
他の答えの場合…………………………………………「間違いです！」と表示
（チェックボックスをチェックしなかった場合）
「りんご」「リンゴ」「林檎」と答えた場合………「正解です！」と表示
他の答えの場合…………………………………………「間違いです！」と表示
※ボタンをクリックすると、関数「check( )」を呼び出します。
※関数「check( )」では、チェックの有無を変数「eigo」に、入力された答えを変数「kotae」に代入します。
※変数「eigo」についてswitch文で条件分岐を行い、さらにif文で変数「kotae」を確認し、「正解です！」または「間違いです！」と表示します。
※ここに直接入力できます。↓↓(テキストボックスのサイズは、右下の角をドラッグすると調節できます。)
→STEP15へ
→STEP17へ