次の手順では、ページにフォームエレメントを挿入して、Dreamweaver で Web フォームを視覚的に作成する方法を説明します。

ページにフォームエレメントを挿入することにより、Dreamweaver で Web フォームを視覚的に作成できますが、これは、Web フォーム作成のほんの一部にすぎません。より複雑な作業の一つとして、訪問者がフォームによって送信するデータを処理するメカニズムの開発があります。例えば、データが顧客データベースに保存されていることもあります。一般的には、PHP、Adobe ColdFusion などの Web アプリケーションテクノロジーによりフォームデータが処理されます。

この記事では、シンプルな Web フォームを作成する方法について説明します。送信されたフォームデータを処理するためのメカニズムの開発については、この記事では取り上げません。フォームの構築方法と、PHP を使用して送信されたデータを処理するメカニズムの構築方法ついて詳しくは、アドビデベロッパーセンターのこちらのチュートリアルシリーズを参照してください。

Web フォームの作成

  1. Dreamweaver でデザインビューでページを開き、フォームを表示する場所に挿入ポイントを置きます。
  2. 挿入/フォーム/フォームを選択します。または、挿入パネルでフォームカテゴリーを選択し(パネルのタブの下の小さい三角形)、フォームアイコンをクリックします。Dreamweaver により空のフォームが挿入されます。デザインビューで、フォームが赤い点線のアウトラインで示されます。このアウトラインが表示されない場合は、表示/ビジュアルエイド/不可視エレメントを選択します。
  3. フォームデータを処理するページまたはスクリプトを指定します。ドキュメントウィンドウで、フォームのアウトラインをクリックしてフォームを選択します。プロパティインスペクター(ウィンドウ/プロパティ)で、プロパティインスペクターのアクションテキストボックスに処理ページのファイル名(および必要に応じて、パス)を入力します。または、フォルダーアイコンをクリックして、該当するページまたはスクリプトに移動します(process_order.php など)。
  4. フォームデータのサーバーへの送信に使用するメソッドを指定します。プロパティインスペクターのメソッドポップアップメニューで、次のいずれかのオプションを選択します。
    • POST:フォームデータを HTTP 要求に埋め込みます。詳しくは、Dreamweaver ヘルプの HTML フォームパラメーターを参照してください。
    • GET:ページを要求する URL に値を付加します。詳しくは、Dreamweaver ヘルプの URL パラメーターを参照してください。
    • 初期設定:ブラウザーの初期設定を使用してフォームデータをサーバーに送信します。通常、初期設定値は GET メソッドです。
  5. フォームオブジェクトを挿入します。フォーム内のフォームオブジェクトを表示する場所に挿入ポイントを置きます。次に、挿入/フォームメニュー、または「挿入」バーの「フォーム」カテゴリーでオブジェクトを選択します。ページ上のフォームの赤い点線のアウトライン内にフォームオブジェクトを配置します。フォームオブジェクトについて詳しくは、Dreamweaver ヘルプのフォームオブジェクトを参照してください。

  6. フォームのレイアウトを調整します。行の区切り、段落の区切り、フォーマット済みのテキスト、またはテーブルを使用して、フォームをフォーマットします。1 ページに複数のフォームを入れることはできますが、別のフォームにフォームを追加することはできません。フォームのデザイン時には、フォームオブジェクトのラベルには説明文を記述して、ユーザーにわかりやすくする必要があります。例えば、名前情報を要求する場合は、「名前を入力してください」とします。テーブルを使用して、フォームオブジェクトとラベルを構造化します。必ずすべての table タグが form タグの間にあるようにします。

本作品は Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License によってライセンス許可を受けています。  Twitter™ および Facebook の投稿には、Creative Commons の規約内容は適用されません。

法律上の注意   |   プライバシーポリシー