|
第５章 フォーム
■第９回 フォームの設定
◆フォームは、アンケートや投票システム、掲示板等で用いられる閲覧者から直接の反応を伺い知るうえでも、インタラクティブな入力ツールです。フォームの種類としては、チェックボックス、ラジオボタン、ドロップダウンボックス、リストボックス、テキストボックス、テキスト領域、サブミット、リセット等などがあります。多くの場合ＣＧＩやＪａｖａＳｃｒｉｐｔなどと併用されてメリットを発揮します。ここでは、サーバーなどでＣＧＩの利用が可能であるとか、ＣＧＩやＪａｖａＳｃｒｉｐｔの知識がある程度あることなどが前提になります。詳細は、他の専門のＷｅｂサイトなどで確認してください。
●Ｗｅｂツールの表示
①フォームを使用する上で、以下図：１のようにＷｅｂツールがあることを確認します。
もしこのＷｅｂツールがツールバーになければ、
Ｗｏｒｄのメニュー[表示]⇒[ツールバー]⇒[Ｗｅｂツール]を選択して取り込むようにします。
（図：１
）
●チェックボックスの挿入
①以下の図：２のＷｅｂツール上で赤丸囲みしたチェックボックスのボタンを押します。
すると画面本体部分にチェックボックスのフォームが挿入されます。
（図：２
）
②任意の数のチェックボックス挿入します。
何のためのチェックボッ クスかを横に文字入力し添えます。以下の図：３。
（図：３
）
③チェックボックスを任意挿入したら、それぞれのチェックボックスのプロパティを設定します。
画面のように設定するチェックボックスをアクティブにします。
右クリックして表示されたメニューからプロパティを選択すると（以下図：４）のように
プロパティのダイアローグが表示されます。
 （図：４
）
④以下の図：５ＡＢＣそれぞれは、
上記②で挿入したチェックボックスのそれぞれのプロパティです。
[ＨＴＭＬＮａｍｅ] は、すべて、グループして共通のものにします。仮に
it-use。
[Ｖａｌｕｅ]は、 仮の想定で、
午前のチェックボックスを選んだ場合のmorning。
午後のチェックボックスを選んだ場合のafternoon。
深夜のチェックボックスを選んだ場合のnight。
としています。
[Ｃｈｅｃｋｅｄ]（図：５Ｃ）は、
（例えば：ここでは、深夜を選択する確立が高いなどとした時など）初期値の値が一般的な前提となるだろうと想定される場合に、プロパティで「True」にして便宜的に
チェックを入れます。 入れなくても構わないものです。 入れると、 ブラウザで表示した時、[Ｃｈｅｃｋｅｄ]したところだけ、
事前にチェックマークが入った状態で表示されます。
 |
 |
 |
|
（図：５
）
Ａ
|
（図：５
）
Ｂ
|
（図：５
）
Ｃ
|
●ラジオボタンの挿入
①以下図：６の赤丸囲みした部分のラジオボタンをＣｌｉｃｋして、
任意ラジオボタンを挿入し配置します。
 （図：６
）
②配置したラジオボタンに対し個別にプロパティを設定します。
それぞれのラジオボタンを右Clickしてプロパティダイアローグを表示します。
[ＨＴＭＬＮａｍｅ]
。ラジオボタンをグループ化して共通の名称にします。
以下の例ではseibetsuとしています。
[Ｖａｌｕｅ]。ラジオボタンの個別の値をＶａｌｕｅに入れます。
以下の例 図：７ＡＢ では、男をman 女を womanとしました例です。
[Ｃｈｅｃｋｅｄ]は設定してもしなくてもかまいません。
 |
|
| （図：７） Ａ |
（図：７） Ｂ |
●テキストボックスを挿入
以下図：８の赤丸囲み部分をＣｌｉｃｋして任意テキストボックスを挿入します。
[Ｗｉｄｔｈ] で入力範囲を広げます。
[ＭａｘＬｅｎｇｔｈ] は入力できる文字数です。０で、無限大の文字数がはいます。
 （図：８）
[Ｖａｌｕｅ]
に値を入力すると、例えば、図：９のように「http://」などを設定しておくと、
ブラウザが表示されたとき、
あらかじめ「http：//」（図：１０）の部分がテキストボックスには入力されます。
●ドロップダウンボックスの挿入
以下図：１１の赤丸囲み部分のドロップダウンボックスボタンをＣｌｉｃｋし配置します。（プルダウンメニューのことです。）
 （図：１１）
プロパティの設定は
[ＤｉｓｐｌａｙＶａｌｕｅｓ] 以下ず：１２のように複数入力し、それぞれをセミコロンで区切ります。
(以下の例は例えば＝ 東京駅;名古屋駅;京都駅;大阪駅;岡山駅 とした例です。[Ｖａｌｕｅ]に同様の内容が自動的に入力されます。)
[ＭｕｌｔｉＳｅｌｅｃｔ] Tｒｕｅにするとプルダウンメニューの形式からリストボックスになります。
[Ｓｉｚｅ] 一度に表示できる項目数のことです。図：１３。
※ブラウザで表示した状態です。以下図：１４のように、
プルダウンで 表示された項目の中から一つの項目が選択できます。
 （図：１４）
●リストボックスの挿入
基本的には、ドロップダウンボックスと同様の設定手順で行います。
ドロップダウンボックスとの違いは、
[ＭｕｌｔｉＳｅｌｅｃｔ]
Ｔｒｕｅにすると、 ブラウザで表示したときに複数の項目の選択ができます。
●テキスト領域の挿入
以下図：１７のテキスト領域の赤囲み部分をＣｌｉｃｋします。
プロパティの設定は
[Ｃｌｕｍｎｓ] テキスト全体の幅の設定
[Ｒｏｗｓ] テキスト全体の高さの設定
[ＷｏｒｄＷｒａｐ]
Virtual もしくはPhysical に設定した場合は、入力した文字がボックス内で折り返されます。
それぞれの違いは、
Virtual の場合： 画面上では折り返され、送信データは折り返しません。
Physical の場合： 画面上でも、送信データ上でも折り返されます。
（図：１７）
●送信・リセットボタンの挿入
以下図：１８のテキスト領域の赤囲み部分をＣｌｉｃｋします。
任意配置した後、プロパティを設定します。
（図：１８）
（図：１９）
プロパティの設定は
[Encoding]
application/x-www-form-urlencoded
CGIを使う場合はこのままでＯＫです。
[Method]
一般的には「GET」ではなく「POST」大文字で設定します。
詳細はサーバーで確認する必要があります。
|
