第5章 フォーム
■第9回 フォームの設定
◆フォームは、アンケートや投票システム、掲示板等で用いられる閲覧者から直接の反応を伺い知るうえでも、インタラクティブな入力ツールです。フォームの種類としては、チェックボックス、ラジオボタン、ドロップダウンボックス、リストボックス、テキストボックス、テキスト領域、サブミット、リセット等などがあります。多くの場合CGIやJavaScriptなどと併用されてメリットを発揮します。ここでは、サーバーなどでCGIの利用が可能であるとか、CGIやJavaScriptの知識がある程度あることなどが前提になります。詳細は、他の専門のWebサイトなどで確認してください。
●Webツールの表示
@フォームを使用する上で、以下図:1のようにWebツールがあることを確認します。
もしこのWebツールがツールバーになければ、
Wordのメニュー[表示]⇒[ツールバー]⇒[Webツール]を選択して取り込むようにします。
(図:1
)
●チェックボックスの挿入
@以下の図:2のWebツール上で赤丸囲みしたチェックボックスのボタンを押します。
すると画面本体部分にチェックボックスのフォームが挿入されます。

(図:2
)
A任意の数のチェックボックス挿入します。
何のためのチェックボッ クスかを横に文字入力し添えます。以下の図:3。

(図:3
)
Bチェックボックスを任意挿入したら、それぞれのチェックボックスのプロパティを設定します。
画面のように設定するチェックボックスをアクティブにします。
右クリックして表示されたメニューからプロパティを選択すると(以下図:4)のように
プロパティのダイアローグが表示されます。
(図:4
)
C以下の図:5ABCそれぞれは、
上記Aで挿入したチェックボックスのそれぞれのプロパティです。
[HTMLName] は、すべて、グループして共通のものにします。仮に
it-use。
[Value]は、 仮の想定で、
午前のチェックボックスを選んだ場合のmorning。
午後のチェックボックスを選んだ場合のafternoon。
深夜のチェックボックスを選んだ場合のnight。
としています。
[Checked](図:5C)は、
(例えば:ここでは、深夜を選択する確立が高いなどとした時など)初期値の値が一般的な前提となるだろうと想定される場合に、プロパティで「True」にして便宜的に
チェックを入れます。 入れなくても構わないものです。 入れると、 ブラウザで表示した時、[Checked]したところだけ、
事前にチェックマークが入った状態で表示されます。
 |
 |
 |
(図:5
)
A
|
(図:5
)
B
|
(図:5
)
C
|
●ラジオボタンの挿入
@以下図:6の赤丸囲みした部分のラジオボタンをClickして、
任意ラジオボタンを挿入し配置します。
(図:6
)
A配置したラジオボタンに対し個別にプロパティを設定します。
それぞれのラジオボタンを右Clickしてプロパティダイアローグを表示します。
[HTMLName]
。ラジオボタンをグループ化して共通の名称にします。
以下の例ではseibetsuとしています。
[Value]。ラジオボタンの個別の値をValueに入れます。
以下の例 図:7AB では、男をman 女を womanとしました例です。
[Checked]は設定してもしなくてもかまいません。
 |

|
(図:7) A |
(図:7) B |
●テキストボックスを挿入
以下図:8の赤丸囲み部分をClickして任意テキストボックスを挿入します。
[Width] で入力範囲を広げます。
[MaxLength] は入力できる文字数です。0で、無限大の文字数がはいます。
(図:8)
[Value]
に値を入力すると、例えば、図:9のように「http://」などを設定しておくと、
ブラウザが表示されたとき、
あらかじめ「http://」(図:10)の部分がテキストボックスには入力されます。
●ドロップダウンボックスの挿入
以下図:11の赤丸囲み部分のドロップダウンボックスボタンをClickし配置します。(プルダウンメニューのことです。)
(図:11)
プロパティの設定は
[DisplayValues] 以下ず:12のように複数入力し、それぞれをセミコロンで区切ります。
(以下の例は例えば= 東京駅;名古屋駅;京都駅;大阪駅;岡山駅 とした例です。[Value]に同様の内容が自動的に入力されます。)
[MultiSelect] Trueにするとプルダウンメニューの形式からリストボックスになります。
[Size] 一度に表示できる項目数のことです。図:13。
※ブラウザで表示した状態です。以下図:14のように、
プルダウンで 表示された項目の中から一つの項目が選択できます。
(図:14)
●リストボックスの挿入
基本的には、ドロップダウンボックスと同様の設定手順で行います。
ドロップダウンボックスとの違いは、
[MultiSelect]
Trueにすると、 ブラウザで表示したときに複数の項目の選択ができます。
●テキスト領域の挿入
以下図:17のテキスト領域の赤囲み部分をClickします。
プロパティの設定は
[Clumns] テキスト全体の幅の設定
[Rows] テキスト全体の高さの設定
[WordWrap]
Virtual もしくはPhysical に設定した場合は、入力した文字がボックス内で折り返されます。
それぞれの違いは、
Virtual の場合: 画面上では折り返され、送信データは折り返しません。
Physical の場合: 画面上でも、送信データ上でも折り返されます。
(図:17)
●送信・リセットボタンの挿入
以下図:18のテキスト領域の赤囲み部分をClickします。
任意配置した後、プロパティを設定します。
(図:18)
(図:19)
プロパティの設定は
[Encoding]
application/x-www-form-urlencoded
CGIを使う場合はこのままでOKです。
[Method]
一般的には「GET」ではなく「POST」大文字で設定します。
詳細はサーバーで確認する必要があります。
|