内容 (What's Covered)

この文書では、Adobe Dreamweaver でフォームを作成する方法について説明します。

A. フォームについて

フォームとは、テキストボックスやラジオボタン、チェックボタンなどで利用者からの入力を受け付ける要素のことで、Web ページからのメール送信やアンケート入力、ユーザ登録などに利用されます。

フォームでは、サイトの閲覧者がフォームに情報を入力して Web ブラウザの送信ボタンをクリックすると、入力した情報がサーバーに送信され、サーバー上のサーバーサイドスクリプトやアプリケーションで処理されます。サーバーは、処理された情報をサイト閲覧者に送り返すか、フォームの内容に基づいて多様な応答をします。

B. HTML フォームの作成

  1. Dreamweaver を起動してページを開き、フォームを表示する場所に挿入ポイントを置きます。
  2. ウィンドウ/挿入 を選択し、挿入パネルを表示します。
  3. 挿入パネルのカテゴリメニューをクリックして、「フォーム」を選択します。

  4. 挿入パネルから「フォーム」をクリックします。デザインビューでは、フォームは赤い点線のアウトラインで表示されます。

    ※ アウトラインが表示されない場合は、表示/ビジュアルエイド/不可視エレメント を選択します。

  5. プロパティインスペクターで、HTML フォームのプロパティを設定します。

    ※ プロパティインスペクターが表示されていない場合は、ウィンドウ/プロパティ を選択します。

    • フォーム ID : フォームを識別する固有の名前を入力します。
    • アクション : フォームデータを処理するページまたはスクリプトを指定します。該当するページまたはスクリプトを選択するには、パスを入力するか、フォルダーアイコンをクリックします。
    • メソッド : フォームデータをサーバーに送信するためのメソッドを指定します。「指定なし」では、ブラウザーの初期設定を使用してフォームデータがサーバーに送信されます。「GET」では、ページを要求する URL に値が付加されます。「POST」では、フォームデータが HTTP 要求に埋め込まれます。
    • ターゲット(オプション) : 呼び出されたプログラムが返したデータを表示するためのウィンドウを指定します。「_blank」では送信先ドキュメントを、新規の名前のないウィンドウで開きます。「_parent」では送信先ドキュメントを、現在表示されているドキュメントの親ウィンドウで開きます。「_self」では 送信先ドキュメントを、フォームが送信されたウィンドウと同じウィンドウで開きます。「_top」では送信先ドキュメントを、現在のウィンドウのボディ部分で開きます。この値は、元のドキュメントがフレームで表示されている場合でも、送信先ドキュメントがウィンドウ全体に表示されるようにするためのものです。
    • エンコーディングタイプ(オプション) : サーバーに送信して処理するデータの MIME エンコードタイプを指定します。
  6. フォーム内で、フォームオブジェクト(テキストボックスやラジオボタンなど)を表示する位置に挿入ポイントを置きます。
  7. 挿入パネルから、「テキストフィールド」など、追加するフォームオブジェクトを選択してクリックします。

    ※ フォームオブジェクトについて詳しくは、こちら をご確認ください。

  8. Input タグのアクセシビリティ属性 ダイアログボックスの入力を行い、「OK」をクリックします。

    ※ 各項目について詳しくは、ダイアログボックスの「ヘルプ」ボタンをクリックしてください。

  9. プロパティインスペクターで、オブジェクトのプロパティを設定します。

    ※ プロパティの内容は、オブジェクトによって異なります。

    ※ それぞれのオブジェクトには、フォーム内で個別に識別されるように、固有の名前を割り当てる必要があります。

  10. オブジェクトの横にラベルを入力したり、行や段落の区切り、テーブルなどを使用して、フォームのレイアウトを調整します。

C. フォームオブジェクト

Dreamweaver では、フォームの入力タイプのことを「フォームオブジェクト」といいます。 フォームオブジェクトは、ユーザー入力を可能にするための機構です。 フォームには、以下のフォームオブジェクトを追加できます。

オブジェクト名 画面表示 オブジェクトの説明
テキストフィールド

テキスト領域
文字を入力する領域です。シングルライン、マルチライン、またはパスワードフィールドとして表示することができます。パスワードフィールドでは、入力したテキストが第三者の目に触れないように、アスタリスクやブレットに置き換えられます。

 注意 : パスワードフィールドに入力されたパスワードおよびその他の情報は、サーバーに送信される際に暗号化されるわけではありません。 転送データは、不正に取得され、英数字テキストとして読み取られる可能性があります。 このため、データを保護する必要がある場合は、そのデータを暗号化してください。
ボタン   クリックするとアクションを実行するような、処理を割り当てることができます。

ボタンのカスタム名またはラベルを追加したり、「送信」や「リセット」など定義済みのラベルを使用することもできます。フォームデータをサーバーに送信する場合や、フォームをリセットする場合にボタンを使用します。
チェックボックス   1 つのオプショングループで複数の応答を選択できるように設定するときに使用します。ユーザーは、必要に応じてオプションを複数選択できます。
ラジオボタン   1 つの項目しか選択できない排他的な選択リストです。ラジオボタングループで 1 つのボタンを選択すると、そのグループの他のボタンはすべて選択解除されます。
リストメニュー   スクロールリストにオプションの値を表示します。ユーザーはこのリストから複数のオプションを選択できます。

[リスト] オプションを選択すると、メニューにオプションの値が表示され、ユーザーはその中から 1 つだけ選択できます。

メニューは、多くのアイテムを限られたスペースで表示する場合や、サーバーに返される値を制御する必要がある場合に使用します。
ファイルフィールド   ユーザーがコンピュータ上のファイルを参照して、そのファイルをフォームのデータとしてアップロードできるように設定するときに使用します。
イメージフィールド   フォームに画像を利用するときに使用します。 イメージフィールドは、[送信] ボタンや [リセット] ボタンなどのグラフィックボタンの作成に使用します。
非表示フィールド なし 名前、電子メールアドレス、表示の傾向など、一度入力した情報を保存できるので、ユーザーは次に同サイトへアクセスしたときにそのデータを使用できます。
ジャンプメニュー   ナビゲーションリストまたはポップアップメニューのことで、リストの項目は、ドキュメントまたはファイルにリンクさせます。

アドビコミュニティフォーラムをご利用下さい

この文章はお役に立てましたでしょうか?さらに情報をお探しになる場合には、アドビスタッフがお届けしている解決事例やメンバー同士での活発な意見交換をチェックできるコミュニティフォーラムをご利用下さい。

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

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