ホームページでCGIとフォームを組み合わせて使用すると、インタラクティブな動的ページが作成可能となります。 今まで学んできたものは、情報を発信するだけ（文章や画像の表示が中心で、ユーザー操作によって表示結果が変わったり、ユーザーの入力した情報を元に処理をするなどという動作はしませんでした）でした。 しかし、世の中のホームページは情報を発信する静的なページだけではありません。よく見かけるのが『メールフォーム』と呼ばれるもので、メーラーを使わなくても、ホームページ上でメールを送信できます。『Yahoo!』の検索も入力フォームに入力されたキーワードをCGIが受け取って検索結果を表示していますし、ショッピングサイトのページも自分の名前や住所などのデータをフォームを使って入力します。掲示板も同じでフォームに入力された文章が掲示板に書き込まれていきます。その他、最近流行りのBLOGも記事を入力する画面はフォームとなっています。 このように、フォームは様々な場面に登場しホームページをより使いやすいものへと変化させているのです。     Yahoo!の検索窓もフォームです。   ショッピングなどの個人情報入力画面もフォームです。   掲示板の書き込みもフォームで行われます。 フォームは基本的にCGIと対になりますが、今回はフォームの作成の方法の説明を行います。 Dreamweaverのフォーム作成において重要なのが[フォーム]ボタンです。[フォーム]ボタンをクリックすると、ドキュメントウィンドウに赤い点線枠が表示されます。フォームの各項目はこの赤い点線内に配置しないと効果がありませんので注意しましょう。 細かな設定などは、実際にCGIとの兼ねあいがありますので、CGIのプログラムとインターフェイスの調整をしなくてはいけません。         1. 挿入バーから「フォーム」タブを選択します。         2. 挿入バーに「フォーム」が表示されました。         3. 先ずは、フォームの範囲を設定します。 挿入バーのフォームをクリックします。         4. 空フォームが挿入されました。 赤い点線がフォーム範囲です。点線内に各種フォームオブジェクトを配置します。               Tips 不可視エレメントの設定 1. フォーム挿入時に、右図のようなダイアログボックス表示されたり、フォームを挿入しても赤い点線が表示されない場合は、「不可視エレメント」の設定を行ないます。         2. メニューバより「編集」の「環境設定」をクリックします。         3. 環境設定ダイアログボックスが表示されますので、カテゴリ：「不可視エレメント」を選択し、「フォーム区切り」にチェックを入れOKボタンをクリックします。 これで、フォームの範囲を示す赤い点線が表示されます。               5. フォームオブジェクトを挿入したい箇所（フォーム内）にカーソルを移動させ挿入バーの「テキストフィールド」をクリックします。         6. Inputタグのアクセシビリティ属性ダイアログボックスが表示されますので「OK」をクリックします。         7. テキストフィールドが配置されました。         8. 配置したテキストフィールドの後ろにカーソルを合わせ「Enter」キーを押し段落を区切ります。         9. フォームオブジェクトを挿入したい箇所（フォーム内）にカーソルを移動させ挿入バーの「チェックボックス」をクリックします。         10. Inputタグのアクセシビリティ属性ダイアログボックスが表示されますので「OK」をクリックします。         11. チェックボックスが配置されました。         12. 再び「Enter」キーを押し段落分けをし、挿入バーの「ラジオボタン」をクリックします。         13. Inputタグのアクセシビリティ属性ダイアログボックスが表示されますので「OK」をクリックします。         14. ラジオボタンが配置されました。         15. 再び「Enter」キーを押し段落分けをし、挿入バーの「リスト/メニュー」をクリックします。         16. Inputタグのアクセシビリティ属性ダイアログボックスが表示されますので「OK」をクリックします。         17. リスト/メニューが配置されました。         18. 再び「Enter」キーを押し段落分けをし、挿入バーの「ボタン」をクリックします。         19. Inputタグのアクセシビリティ属性ダイアログボックスが表示されますので『OK』をクリックします。         20. ボタンが配置されました。       Tips フォーム   フォームを作成する場合、ドキュメントに配置しなければなりません。配置すると赤い点線でフォームの範囲が表示されますので、赤い点線内に各フォーム項目を配置します。 また、ブラウザ上では赤い点線は表示されません。 [フォーム名]、[アクション]、[メソッド]、[ターゲット]、[エンコーディング]、[クラス]などの設定があります。               Tips テキストフィールド   テキストを入力する窓を作成します。Yahoo!の検索窓や掲示板のコメント入力欄、会員ページにログインする場合のパスワード入力欄などに利用します。 [テキストフィールド名]、[文字幅]、[最大文字数]、[タイプ]、[初期値]、[クラス]などの設定があります。 名前の入力など1行で済む場合のタイプは『シングル』、コメント欄など複数行の文章を入力する場合は『マルチライン』、パスワード入力欄の場合は『パスワード』を選択します。               Tpis チェックボックス   アンケート等で、複数回答が可能な設問などに用います。 [チェックボックス名]、[チェック済み値]、[初期値]、[クラス]などの設定があります。 チェック済み値は、このチェックボックスをチェックした場合、どんな情報をCGIに渡すかの値を入力します。               Tips ラジオボタン   アンケート等で、「次の内どれか一つをお選び下さい」や「性別」など、設問で選択回答が1つしかない場合に用います。 [ラジオボタン名]、[チェック済み値]、[初期値]、[クラス]などの設定があります。 ラジオボタン名が同じラジオボタンは『ラジオボタングループ』として扱われ、グループ内で1つのラジオボタンしか選択できないようになっています。（挿入バーの[ラジオボタングループ]ボタンでも代用できます。） チェック済み値は、このチェックボックスをチェックした場合、どんな情報をCGIに渡すかの値を入力します。               Tips リスト/メニュー   選択項目がリストとして表示されます。住所の都道府県や年代など、選択項目を列挙することで、ユーザーの入力の手間を軽減させることができます。（ラジオボタンでも同様の結果を得られますが、47都道府県をフォームに表示させると広い表示スペースが必要となるためリスト/メニューの方が有効的と言えます。） [リスト/メニュー名]、[タイプ]、[リスト値]、[初期選択値]、[クラス]などの設定があります。 [リスト値]をクリックし、リストに表示される項目を設定します。               Tips ボタン   フォームに入力された値をCGIに受け渡すためのボタンです。基本的に、フォームに入力されただけでは、フォームは機能しません。ボタンを押し入力データをCGIに引渡しCGIが渡された情報を元に様々な処理を行い、その結果を表示します。Yahoo!の場合は『検索』、メールフォームなどは『送信』というボタンになっています。 [ボタン名]、[ラベル]、[アクション]、[クラス]などの設定があります。 アクションで、『フォーム送信』はフォームに入力された情報をCGIに引渡す場合に使います。『フォームリセット』は、フォームに入力された情報を全て削除します。