Dreamweaver でデザインビューでページを開き、フォームを表示する場所に挿入ポイントを置きます。
最終更新日 :
2024年4月25日
次の手順では、ページにフォームエレメントを挿入して、Dreamweaver で Web フォームを視覚的に作成する方法を説明します。
ページにフォームエレメントを挿入することにより、Dreamweaver で Web フォームを視覚的に作成できますが、これは、Web フォーム作成のほんの一部にすぎません。 より複雑な作業の一つとして、訪問者がフォームによって送信するデータを処理するメカニズムの開発があります。 例えば、データが顧客データベースに保存されていることもあります。 一般的には、PHP、Adobe ColdFusion などの Web アプリケーションテクノロジーによりフォームデータが処理されます。
この記事では、シンプルな Web フォームを作成する方法について説明します。 送信されたフォームデータを処理するためのメカニズムの開発については、この記事では取り上げません。 フォームの構築方法と、PHP を使用して送信されたデータを処理するメカニズムの構築方法ついて詳しくは、アドビデベロッパーセンターのこちらのチュートリアルシリーズを参照してください。
Web フォームの作成
挿入／フォーム／フォームを選択します。 または、挿入パネルでフォームカテゴリーを選択し（パネルのタブの下の小さい三角形）、フォームアイコンをクリックします。 Dreamweaver により空のフォームが挿入されます。 デザインビューで、フォームが赤い点線のアウトラインで示されます。 このアウトラインが表示されない場合は、表示／ビジュアルエイド／不可視エレメントを選択します。
フォームデータを処理するページまたはスクリプトを指定します。 ドキュメントウィンドウで、フォームのアウトラインをクリックしてフォームを選択します。 プロパティインスペクター（ウィンドウ／プロパティ）で、プロパティインスペクターのアクションテキストボックスに処理ページのファイル名（および必要に応じて、パス）を入力します。 または、フォルダーアイコンをクリックして、該当するページまたはスクリプトに移動します （process_order.php など）。
フォームデータのサーバーへの送信に使用するメソッドを指定します。 プロパティインスペクターのメソッドポップアップメニューで、次のいずれかのオプションを選択します。
- POST：フォームデータを HTTP 要求に埋め込みます。 詳しくは、Dreamweaver ヘルプの HTML フォームパラメーターを参照してください。
- GET：ページを要求する URL に値を付加します。 詳しくは、Dreamweaver ヘルプの URL パラメーターを参照してください。
- 初期設定：ブラウザーの初期設定を使用してフォームデータをサーバーに送信します。 通常、初期設定値は GET メソッドです。
フォームオブジェクトを挿入します。 フォーム内のフォームオブジェクトを表示する場所に挿入ポイントを置きます。 次に、挿入／フォームメニュー、または「挿入」バーの「フォーム」カテゴリーでオブジェクトを選択します。 ページ上のフォームの赤い点線のアウトライン内にフォームオブジェクトを配置します。 フォームオブジェクトについて詳しくは、Dreamweaver ヘルプのフォームオブジェクトを参照してください。
フォームのレイアウトを調整します。 行の区切り、段落の区切り、フォーマット済みのテキスト、またはテーブルを使用して、フォームをフォーマットします。 1 ページに複数のフォームを入れることはできますが、別のフォームにフォームを追加することはできません。 フォームのデザイン時には、フォームオブジェクトのラベルには説明文を記述して、ユーザーにわかりやすくする必要があります。 例えば、名前情報を要求する場合は、「名前を入力してください」とします。 テーブルを使用して、フォームオブジェクトとラベルを構造化します。 必ずすべての table タグが form タグの間にあるようにします。
