マニュアルキャンセル

Web フォームの作成

検索

最終更新日 : 2021年4月28日

Dreamweaver

アプリを開く

注意：

Dreamweaver Creative Cloud アップデート内で、HTML フォームエレメントのサポートが強化されています。詳しくは、フォームエレメントの HTML5 サポート強化を参照してください。

Web フォームについて

ビジターが Web ブラウザー（クライアント）に表示されたフォームに情報を入力し、送信ボタンをクリックすると、その情報はサーバーに送信され、サーバー上のサーバーサイドスクリプトやアプリケーションで処理されます。サーバーは、処理された情報をユーザー、つまりクライアントに送り返すか、フォームの内容に基づいて何らかのアクションを実行することで、応答します。

PHP、ASP、および ColdFusion を含む多くのアプリケーションサーバーに、データを送信するフォームを作成することができます。ColdFusion を使用する場合は、ColdFusion 固有のフォームコントロールをフォームに追加することもできます。

注意：

フォームデータを電子メール受信者に直接送信することもできます。

フォームオブジェクト

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

テキストフィールド

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

注意：

パスワードフィールドに入力されたパスワードおよびその他の情報は、サーバーに送信される際に暗号化されるわけではありません。転送データは、不正に取得され、英数字テキストとして読み取られる可能性があります。このため、データを保護する必要がある場合は、そのデータを暗号化してください。

非表示フィールド

名前、電子メールアドレス、表示の傾向など、一度入力した情報を保存できるので、ユーザーは次に同サイトへアクセスしたときにそのデータを使用できます。

ボタン

クリックするとアクションを実行します。ボタンのカスタム名またはラベルを追加したり、"送信" または "リセット" など定義済みのラベルを使用することもできます。フォームデータをサーバーに送信する場合や、フォームをリセットする場合にボタンを使用します。また、スクリプト内で定義した他の処理タスクを割り当てることもできます。例えば、ボタンによって、割り当てられた値を基に選択された項目の合計費用を計算することもできます。

チェックボックス

1 つのオプショングループで複数の応答を選択できるように設定するときに使用します。ユーザーは、必要に応じてオプションを複数選択できます。次の例では、「Surfing」、「Mountain Biking」、「Rafting」の 3 つのチェックボックス項目が選択されています。

ラジオボタン

1 つの項目しか選択できない排他的な選択リストです。ラジオボタングループで 1 つのボタンを選択すると、そのグループの他のボタンはすべて選択解除されます。グループは、共通の名前を持つ複数のボタンで構成されます。次の例では、現在「Rafting」がオンになっています。ここでユーザーが「Surfing」をクリックすると、「Rafting」ボタンは自動的にオフになります。

リストメニュー

スクロールリストにオプションの値を表示します。ユーザーはこのリストから複数のオプションを選択できます。「リスト」オプションを選択すると、メニューにオプションの値が表示され、ユーザーはその中から 1 つだけ選択できます。メニューは、多くのアイテムを限られたスペースで表示する場合や、サーバーに返される値を制御する必要がある場合に使用します。テキストフィールドではユーザーが自由に情報を入力できるため、無効な値でも入力可能ですが、メニューではメニューから返される値を設計者が設定できます。

注意：

HTML フォーム上のポップアップメニューは、グラフィックポップアップメニューとは異なります。グラフィックポップアップメニューの作成、編集、および表示と非表示の切り替えについては、この項の最後にあるリンクを参照してください。

ジャンプメニュー

ナビゲーションリストまたはポップアップメニューのことで、それぞれのオプションは、ドキュメントまたはファイルにリンクしています。

ファイルフィールド

ユーザーがコンピューター上のファイルを参照して、そのファイルをフォームのデータとしてアップロードできるように設定するときに使用します。

イメージフィールド

フォームにイメージを挿入するときに使用します。イメージフィールドは、「送信」ボタンや「リセット」ボタンなどのグラフィックボタンの作成に使用します。イメージを使用して、データの送信以外のタスクを実行するには、ビヘイビアーをフォームオブジェクトに関連付ける必要があります。

HTML フォームの作成

（Creative Cloud ユーザーのみ）：HTML5 サポートの一環として、フォームエレメントのプロパティパネルに新しい属性が導入されました。また、4 つの新しいフォームエレメント（電子メール、検索、電話、URL）が、挿入パネルの「フォーム」セクションに導入されました。詳しくは、フォームエレメントの HTML5 サポート強化を参照してください。

ページを開き、フォームを表示する場所に挿入ポイントを置きます。
挿入／フォームを選択するか、挿入パネルの「フォーム」カテゴリーを選択してフォームアイコンをクリックします。

デザインビューでは、フォームは赤い点線のアウトラインで示されます。アウトラインが表示されない場合は、表示／ビジュアルエイド／不可視エレメントを選択します。
プロパティインスペクター（ウィンドウ／プロパティ）で、HTML フォームのプロパティを設定します。

a. ドキュメントウィンドウで、フォームのアウトラインをクリックしてフォームを選択します。

b.「フォーム名」ボックスに、フォームを識別する固有の名前を入力します。

フォームに名前を付けると、JavaScript や VBScript などのスクリプト言語を使用してそのフォームの参照または制御できるようになります。フォームに名前を付けない場合は、Dreamweaver によってシンタックス formn が使用され、名前が生成されます。n の値は、ページにフォームが追加されるごとに増加します。

c.「アクション」ボックスで、フォームデータを処理するページまたはスクリプトを指定します。該当するページまたはスクリプトを選択するには、パスを入力するか、フォルダーアイコンをクリックします。例：processorder.php

d. メソッドポップアップメニューで、フォームデータをサーバーに送信するためのメソッドを指定します。

次のいずれかのオプションを設定します。

初期設定 ブラウザーの初期設定を使用してフォームデータがサーバーに送信されます。通常、初期設定値は GET メソッドです。

GET ページを要求する URL に値が付加されます。

POST フォームデータが HTTP 要求に埋め込まれます。

GET メソッドを使用して長いフォームを送信しないでください。URL の長さは 8192 文字に制限されています。送信するデータが大きすぎる場合は、データは切り捨てられ、予期しない処理結果が生じたり、処理に失敗する可能性があります。

GET メソッドによって渡されたパラメーターで生成される動的ページは、ブックマークに登録することができます。これは、ブラウザーの「アドレス」ボックスに表示される URL には、ページを再生成する上で必要なすべての値が含まれているためです。それに対して、POST メソッドによって渡されたパラメーターで生成される動的ページは、ブックマークに登録できません。

秘密のユーザー名やパスワード、クレジットカード番号など、機密性の高い情報を収集する場合には、POST メソッドの方が GET メソッドを使用するよりも安全性が高くなります。ただし、POST メソッドによって送信される情報は暗号化されていないので、ハッカーには容易に入手される可能性があります。セキュリティを確保するには、安全なサーバーに安全な方法で接続するようにします。

e.（オプション）エンコーディングタイプポップアップメニューで、サーバーに送信して処理するデータの MIME エンコードタイプを指定します。

初期設定の application/x-www-form-urlencode 設定は通常、POST メソッドと共に使用されます。ファイルアップロードフィールドを作成する場合は、multipart/form‑data MIME タイプを指定します。

f.（オプション）ターゲットポップアップメニューで、呼び出されたプログラムが返したデータを表示するためのウィンドウを指定します。

名前が付けられたウィンドウが開いていない場合は、名前を付けた新しいウィンドウが開きます。必要に応じて、「ターゲット」の値を以下のいずれかに設定します。

_blank 送信先ドキュメントを、新規の名前のないウィンドウで開きます。

_parent 送信先ドキュメントを、現在表示されているドキュメントの親ウィンドウで開きます。

_self 送信先ドキュメントを、フォームが送信されたウィンドウと同じウィンドウで開きます。

_top 送信先ドキュメントを、現在のウィンドウのボディ部分で開きます。この値は、元のドキュメントがフレームで表示されている場合でも、送信先ドキュメントがウィンドウ全体に表示されるようにするためのものです。
ページにフォームオブジェクトを挿入します。

a. フォーム内でフォームオブジェクトを表示する位置に挿入ポイントを置きます。

b. 挿入／フォームまたは挿入パネルの「フォーム」カテゴリーでオブジェクトを選択します。

c. Input タグのアクセシビリティ属性ダイアログボックスの入力を完了します。詳しくは、ダイアログボックスの「ヘルプ」ボタンをクリックしてください。

注意：

Input タグのアクセシビリティ属性ダイアログボックスが表示されない場合は、フォームオブジェクトの挿入を試みたときに、コードビューで挿入ポイントを設定している可能性があります。挿入ポイントがデザインビューにあることを確認し、もう一度試してください。このトピックについて詳しくは、David Powers の記事 Dreamweaver での HTML フォームの作成（英語）を参照してください。

d. オブジェクトのプロパティを設定します。

e. プロパティインスペクターで、オブジェクトの名前を入力します。

それぞれのテキストフィールド、非表示フィールド、チェックボックス、およびリスト/メニューオブジェクトには、フォーム内で一意に識別されるように、固有の名前を割り当てる必要があります。フォームオブジェクトの名前に、スペースまたは特殊文字を含めることはできません。英数字と下線（_）の任意の組み合わせを使用できます。オブジェクトに割り当てたラベルは、フィールドの値（入力されたデータ）を保存する変数名となります。この値は、サーバーに送信されて処理されます。

注意：

同一グループのラジオボタンすべてに、同じ名前を付ける必要があります。

f. ページ上のテキストフィールド、チェックボックス、またはラジオボタンオブジェクトにラベルを付けるには、オブジェクトの横をクリックして、ラベルを入力します。
フォームのレイアウトを調整します。

行の区切り、段落の区切り、フォーマット済みのテキスト、またはテーブルを使用して、フォームをフォーマットします。1 ページに複数のフォームを入れることはできますが、別のフォームにフォームを追加すること、つまり、タグのオーバーラップはできません。

フォームをデザインするとき、フォームフィールドに説明のテキストを付けてユーザーが質問内容を理解するようにします。例えば、"名前を入力してください" というラベルによって名前の情報を要求します。

テーブルを使用して、フォームオブジェクトとフィールドラベルを構造化します。フォームでテーブルを使用するときには、必ずすべての table タグが form タグの間にあるようにします。

フォームの作成のチュートリアルについては、www.adobe.com/go/vid0160_jp を参照してください。

CSS を使用したフォームのスタイル指定のチュートリアルについては、www.adobe.com/go/vid0161_jp を参照してください。

テキストフィールドオブジェクトのプロパティ

テキストフィールドオブジェクトを選択し、必要に応じて、プロパティインスペクターで以下のオプションを設定します。

文字幅

フィールドに表示できる最大文字数を設定します。この数値は、フィールドに入力できる最大文字数を指定する「最大文字数」の数値より小さくてもかまいません。例えば、「文字幅」を 20（初期設定値）に設定している場合は、ユーザーが 100 文字入力しても、20 文字しかテキストフィールドには表示されません。ただし、フィールドに表示されていない文字も、フィールドオブジェクトによって認識され、サーバーに送信されます。

最大文字数

シングルラインのテキストフィールドに入力できる最大文字数を設定します。例えば、「最大文字数」を使用して郵便番号を 5 桁に、またはパスワードを 10 文字に制限します。「最大文字数」ボックスを空白のままにすると、文字数の制限はなくなります。ユーザーが、テキストフィールドの幅に収まる文字数（長さ）を超えて入力した場合、テキストはスクロールされます。最大文字数を超える入力があった場合、警告音が鳴ります。

ライン数

マルチラインのテキストフィールドの高さを設定します。このオプションは、「マルチライン」オプションを選択した場合にのみ設定できます。

使用不可

テキスト領域を無効にします。

読み取り専用

テキスト領域を、読み取り専用テキスト領域にします。

タイプ

「シングルライン」、「マルチライン」、「パスワード」のいずれかを指定します。

シングルライン

選択すると、input タグの type 属性が text に設定されます。「文字幅」の設定は、size 属性にマッピングされ、「最大文字数」の設定は maxlength 属性にマッピングされます。

マルチライン

選択すると、textarea タグが設定されます。「文字幅」の設定は、cols 属性にマッピングされ、「ライン数」の設定は rows 属性にマッピングされます。

パスワード

選択すると、input タグの type 属性が password に設定されます。「文字幅」と「最大文字数」の設定は、シングルラインテキストフィールドと同じ属性にマッピングされます。ユーザーがパスワードテキストフィールドにテキストを入力すると、入力したテキストは、他人に見られないように黒丸またはアスタリスクとして表示されます。

初期値

フォームを最初にロードするときフィールドに表示される値を割り当てます。例えば、フィールドに、ユーザー入力情報についてのメモや入力例を示すことができます。

クラス

オブジェクトに CSS ルールを適用できます。

ボタンオブジェクトのオプション

ボタン名

ボタンに名前を割り当てます。"送信" と "リセット" という定義済みの 2 つの名前は、それぞれ、フォームのデータを処理用のアプリケーションまたはスクリプトに提出する、およびすべてのフォームフィールドをオリジナルの値にリセットする、ということを意味します。

値

ボタンに表示するテキストを入力します。

アクション

ボタンがクリックされたときに生じる動作を設定します。

フォーム送信

ボタンがクリックされたときにフォームデータを処理のために送信する場合に選択します。データは、フォームの「アクション」プロパティで指定されているページまたはスクリプトに送信されます。

フォームリセット

ボタンがクリックされたときにフォームの内容をクリアする場合に選択します。

なし

ボタンがクリックされたときに実行されるアクションを指定する場合に選択します。例えば、ボタンをクリックしたときに別のページを開く JavaScript ビヘイビアーを追加できます。

クラス

選択すると、オブジェクトに CSS ルールが適用されます。

チェックボックスオブジェクトのオプション

チェック済み値

チェックボックスをオンにした場合にサーバーに送信される値を設定します。例えば、アンケートの回答などで、"同意する" 場合は値を 4 に、"まったく同意できない" 場合は値を 1 に設定します。

イニシャル状態

フォームがブラウザーにロードされるときにチェックボックスをオンの状態にするかどうかを指定します。

動的

選択すると、チェックボックスの初期値がサーバーによって動的に決定されます。例えば、データベースレコードに格納されている Yes/No の情報をチェックボックスを使用して視覚的に表示することができます。この情報は、デザイン時には表示されません。実行時にサーバーがデータベースレコードを読み取り、その値が Yes であればチェックボックスをオンにします。

クラス

オブジェクトにカスケーディングスタイルシート（CSS）ルールが適用されます。

単一ラジオボタンオブジェクトのオプション

チェック済み値

ラジオボタンを選択した場合にサーバーに送信される値を設定します。例えば、ユーザーが「スキー」を選択したことを示すには「チェック済み値」ボックスに「skiing」と入力します。

イニシャル状態

フォームがブラウザーにロードされるときにラジオボタンを選択されている状態にするかどうかを指定します。

動的

ラジオボタンの初期値がサーバーによって動的に決定されます。例えば、データベースレコードに保存されている情報をラジオボタンを使用して視覚的に表示することができます。この情報は、デザイン時には表示されません。実行時にサーバーがデータベースレコードを読み取り、その値が指定した値と一致すれば、該当するラジオボタンが選択されます。

クラス

選択すると、オブジェクトに CSS ルールが適用されます。

メニューのオプション

リスト／メニュー

メニューに名前を割り当てます。固有の名前を指定してください。

タイプ

クリックされたときにドロップダウン形式で表示する（「メニュー」オプション）か、スクロール可能なリストとして表示する（「リスト」オプション）かを指定します。フォームがブラウザーに表示されたときに、選択項目を 1 つだけ表示するには、「メニュー」オプションを選択します。下向き矢印をクリックすると、その他の選択項目が表示されます。

フォームがブラウザーに表示されたときに選択項目の一部または全部をリストとして表示する場合や、複数の項目を選択できるようにする場合は、「リスト」オプションを選択します。

高さ

（「リスト」タイプのみ）メニューに表示する項目の数を指定します。

選択

（「リスト」タイプのみ）リストから複数の項目を選択できるようにするかどうかを指定します。

リスト値

フォームメニューに選択項目を追加するためのダイアログボックスを開きます。

「+」ボタンと「-」ボタンを使用して、リストのアイテムを追加または削除します。
メニューアイテムごとに、ラベルのテキストとオプションの値を入力します。
リストの各アイテムには、リストに表示されるテキストであるラベルと、アイテムが選択された場合に処理アプリケーションに送信されるアイテムの値が含まれます。値が指定されていないと、代わりにラベルが処理アプリケーションに送信されます。
リストのアイテムを並べ替えるには、上向き矢印と下向き矢印のボタンを使用します。
各アイテムは、リスト値ダイアログボックスに表示されている順序と同じ順序でメニューに表示されます。リストで最初のアイテムは、ページがブラウザーにロードされるときに選択されているアイテムです。

動的

メニューに最初に表示する選択項目がサーバーによって動的に選択されます。

クラス

オブジェクトに CSS ルールを適用できます。

初期選択値

初期設定で選択された状態になる項目をリストの中から設定します。リスト内で目的の項目をクリックします。

ファイルアップロードフィールドの挿入

ユーザーが、自分のコンピューターからアップロードするファイル（ワードプロセッサーの文書やグラフィックファイルなど）を選択し、そのファイルをサーバーに送信するためのファイルアップロードフィールドを作成できます。ファイルフィールドは、「参照」ボタンがあることを除けば、外観は他のテキストフィールドと同じです。ユーザーは、アップロードするファイルへのパスを手動で入力したり、「参照」ボタンでファイルの場所を検索して選択することができます。

ファイルアップロードフィールドを使用するには、ファイル転送を処理できるサーバーサイドスクリプトまたはページが必要です。フォームデータの処理に使用するサーバーテクノロジのマニュアルを参照してください。例えば、PHP を使用する場合は、オンラインの PHP マニュアル（http://us2.php.net/features.file-upload.php）で「ファイルアップロードの処理」を参照してください。

ファイルフィールドの場合、ブラウザーからサーバーにファイルを転送するには、POST メソッドを使用します。ファイルは、フォームの「アクション」ボックスで指定されたアドレスに送信されます。

注意：

ファイルフィールドを使用する前に、匿名ファイルのアップロードが許可されているかどうか、サーバーのシステム管理者に確認してください。

ページにフォームを挿入します（挿入／フォーム）。
プロパティインスペクターを表示するフォームを選択します。
フォームの「メソッド」を POST に設定します。
エンコーディングタイプポップアップメニューから「multipart/form-data」を選択します。
「アクション」ボックスで、アップロードされるファイルを処理できるサーバーサイドスクリプトまたはページを指定します。
フォームのアウトラインの内側に挿入ポイントを置き、挿入／フォーム／ファイルフィールドを選択します。
プロパティインスペクターで、以下のオプションを設定します。

ファイルフィールド名

ファイルフィールドオブジェクトの名前を指定します。

文字幅

フィールドに表示できる最大文字数を設定します。

最大文字数

フィールドに保持する最大文字数を指定します。ファイルの場所を参照して指定する場合は、ファイル名およびパスは指定された最大文字数を超える場合があります。しかし、ユーザーがファイル名およびパスを入力する場合は、ファイルフィールドは最大文字数を超えることはできません。

イメージボタンの挿入

イメージをボタンアイコンとして使用できます。イメージを使用して、データの送信以外のタスクを実行するには、ビヘイビアーをフォームオブジェクトに関連付ける必要があります。

ドキュメントで、挿入ポイントをフォームのアウトライン内に設定します。
挿入／フォーム／イメージフィールドを選択します。

イメージソースの選択ダイアログボックスが表示されます。
イメージソースの選択ダイアログボックスでボタンのイメージを選択し、「OK」をクリックします。
プロパティインスペクターで、以下のオプションを設定します。

イメージフィールド

ボタンに名前を割り当てます。"送信" と "リセット" という定義済みの 2 つの名前は、それぞれ、フォームのデータを処理用のアプリケーションまたはスクリプトに提出する、およびすべてのフォームフィールドをオリジナルの値にリセットする、ということを意味します。

ソース

ボタンに使用するイメージを指定します。

代替

イメージがブラウザーにロードされなかった場合に表示する説明文を入力できます。

行揃え

オブジェクトの align 属性を設定します。

イメージの編集

初期設定のイメージエディターが起動し、イメージファイルが開いて編集可能になります。

クラス

オブジェクトに CSS ルールを適用できます。
ボタンに JavaScript ビヘイビアーを関連付けるには、イメージを選択してから、ビヘイビアーパネル（ウィンドウ／ビヘイビアー）でビヘイビアーを選択します。

非表示フィールドオブジェクトのオプション

非表示フィールド

フィールドの名前を指定します。

値

フィールドに値を割り当てます。この値は、フォームが送信されたときにサーバーに渡されます。

ラジオボタンのグループの挿入

挿入ポイントをフォームのアウトライン内に置きます。
挿入／フォーム／ラジオグループを選択します。
ダイアログボックスの入力を完了させ、「OK」をクリックします。

a.「名前」ボックスに、ラジオボタングループの名前を入力します。

ラジオボタンを、サーバーにパラメーターを返すように設定するには、名前にパラメーターを関連付けます。例えば、グループに myGroup という名前を付け、フォームメソッドを GET に（つまり、ユーザーが送信ボタンをクリックしたときフォームパラメーターではなく URL パラメーターを渡すように）設定すると、式 myGroup="CheckedValue" が URL に含められてサーバーに渡されます。

b.「+」ボタンをクリックして、ラジオボタンをグループに追加します。新しいボタンのラベルとチェック済み値を入力します。

c. 上向き矢印または下向き矢印をクリックし、ボタンを並べ替えます。

d. ページをブラウザーで表示するときに、特定のラジオボタンがオンの状態で表示されるようにするには、ラジオボタンと同じ値を「同等値の選択」ボックスに入力します。

固定値を入力するか、ボックスの横の稲妻アイコンをクリックし、チェック済み値として使用可能な値を含むレコードセットを選択して、動的な値を指定します。いずれの場合も、指定する値は、グループのいずれかのラジオボタンのチェック済み値と一致している必要があります。ラジオボタンのチェック済み値を表示するには、それぞれのラジオボタンを選択し、プロパティインスペクターを表示します（ウィンドウ／プロパティ）。

e. Dreamweaver によって実行されるボタンのレイアウトの方法を選択します。改行またはテーブルを使用してボタンをレイアウトします。テーブルオプションを選択すると、Dreamweaver によって 1 列のテーブルが作成され、ラジオボタンが左に、ラベルが右に設定されます。

プロパティインスペクターで、またはコードビューから直接プロパティを設定することもできます。

チェックボックスのグループの挿入

挿入ポイントをフォームのアウトライン内に置きます。
挿入／フォーム／チェックボックスグループを選択します。
ダイアログボックスの入力を完了させ、「OK」をクリックします。

a.「名前」ボックスに、チェックボックスグループの名前を入力します。

チェックボックスを、サーバーにパラメーターを返すように設定するには、名前にパラメーターを関連付けます。例えば、グループに myGroup という名前を付け、フォームメソッドを GET に（つまり、ユーザーが送信ボタンをクリックしたときフォームパラメーターではなく URL パラメーターを渡すように）設定すると、式 myGroup="CheckedValue" が URL に含められてサーバーに渡されます。

b.「+」ボタンをクリックして、チェックボックスをグループに追加します。新しいチェックボックスのラベルとチェック済み値を入力します。

c. 上向き矢印または下向き矢印をクリックし、チェックボックスを並べ替えます。

d. ページがブラウザー上で開かれるとき、特定のチェックボックスがオンの状態で表示されるようにするには、チェックボックスと同じ値を「同等値の選択」ボックスに入力します。

固定値を入力するか、ボックスの横の稲妻アイコンをクリックし、チェック済み値として使用可能な値を含むレコードセットを選択して、動的な値を指定します。いずれの場合も、指定する値は、グループのいずれかのチェックボックスのチェック済み値と一致している必要があります。チェックボックスのチェック済み値を表示するには、それぞれのチェックボックスを選択し、プロパティインスペクターを表示します（ウィンドウ／プロパティ）。

e. Dreamweaver によって実行されるチェックボックスのレイアウトの方法を選択します。

改行またはテーブルを使用してチェックボックスをレイアウトします。テーブルオプションを選択すると、Dreamweaver によって 1 列のテーブルが作成され、チェックボックスが左に、ラベルが右に設定されます。

プロパティインスペクターで、またはコードビューから直接プロパティを設定することもできます。

動的フォームオブジェクトについて

「動的フォームオブジェクト」とは、フォームの設計者がデザイン時に初期値を指定するのではなく、該当するページをサーバーが要求したときにそのサーバーによって初期値が決定されるフォームオブジェクトです。例えば、メニューが配置されているフォームを持つ PHP ページをユーザーが要求すると、ページ内の PHP スクリプトによって、データベースに格納されている値が自動的にメニューに挿入されます。その後で、完成したページがサーバーからユーザーのブラウザーに送信されます。

フォームオブジェクトを動的にすると、サイトのメンテナンスを簡略化できます。例えば、多くのサイトでは、ユーザーに一連のオプションを提供するためにメニューを使用しています。メニューが動的フォームオブジェクトであれば、メニュー項目を 1 つの場所、つまりメニュー項目が格納されているデータベーステーブルで追加、削除、または変更するだけで、サイト上の同じメニューのすべてのインスタンスを更新することができます。

動的 HTML フォームメニューの挿入または変更

HTML フォームメニューやリストメニューには、データベースに格納されているエントリを動的に表示できます。HTML メニューオブジェクトは、ほとんどのページに使用できます。

作業を開始する前に、ColdFusion、PHP、または ASP のページ内に HTML フォームを挿入し、メニューで使用する動的コンテンツのレコードセットやその他のソースを定義する必要があります。

HTML リスト/メニューフォームオブジェクトをページに挿入します。

a. ページの HTML フォーム内をクリックします（挿入／フォーム／フォーム）。

b. 挿入／フォーム／リスト/メニューを選択し、フォームオブジェクトを挿入します。
次のいずれかの操作を実行します。
- 新しいまたは既存の HTML リスト/メニューフォームオブジェクトを選択し、プロパティインスペクターの「動的」ボタンをクリックします。
- 挿入／データオブジェクト／動的データ／動的選択リストを選択します。
動的リスト/メニューダイアログボックスに情報を入力し、「OK」をクリックします。

a. レコードセットからのオプションポップアップメニューで、コンテンツソースとして使用するレコードセットを選択します。このメニューは、静的および動的リスト／メニューアイテムを後で編集する場合にも使用します。

b.「静的オプション」領域に、リストまたはメニューの初期設定のアイテムを入力します。また、リスト／メニューフォームオブジェクトの動的コンテンツを追加した後で静的エントリを編集する場合にも、このオプションを使用します。

c.（オプション）「+」ボタンと「-」ボタンを使用して、リストのアイテムを追加または削除します。アイテムは、リストの値ダイアログボックスに表示されているのと同じ順序で表示されます。リストで最初のアイテムは、ページがブラウザーにロードされるときに選択されているアイテムです。リストのアイテムを並べ替えるには、上向き矢印と下向き矢印のボタンを使用します。

d. 値ポップアップメニューで、メニュー項目の値を含むフィールドを選択します。

e. ラベルポップアップメニューで、メニュー項目のラベルを含むフィールドを選択します。

f.（オプション）ページをブラウザーで表示したり、フォームにレコードを表示したりするときに、特定のメニュー項目が選択された状態で表示されるようにするには、「同等値の選択」ボックスに、メニュー項目の値と同じ値を入力します。

固定値を入力することも、ボックスの横の稲妻アイコンをクリックしてデータソースのリストから動的な値を選択して動的な値を指定することもできます。いずれの場合も、指定する値はメニュー項目の値のいずれかと一致している必要があります。

既存の HTML フォームメニューを動的にする

デザインビューで、リスト/メニューフォームオブジェクトを選択します。
プロパティインスペクターの「動的」ボタンをクリックします。
ダイアログボックスの入力を完了させ、「OK」をクリックします。

HTML テキストフィールドでの動的コンテンツの表示

ブラウザーにフォームが表示されるときに、HTML テキストフィールドに動的コンテンツを表示できます。

作業を開始する前に、ColdFusion、PHP、または ASP のページ内にフォームを作成し、テキストフィールドで使用する動的コンテンツのレコードセットやその他のソースを定義する必要があります。

ページの HTML フォームで目的のテキストフィールドを選択します。
プロパティインスペクターの「初期値」ボックスの横にある稲妻アイコンをクリックして、動的データダイアログボックスを表示します。
テキストフィールドに入力される値のソースとなるレコードセットの列を選択し、「OK」をクリックします。

動的テキストフィールドダイアログボックスのオプションの設定

テキストフィールドポップアップメニューから、動的にするテキストフィールドを選択します。
「設定値」ボックスの横の稲妻アイコンをクリックし、データソースのリストからデータソースを選択して、「OK」をクリックします。

データソースには、テキスト形式で情報が含まれている必要があります。リストにデータソースがまったく表示されない場合や、表示された中に必要なデータソースがない場合は、「+」ボタンをクリックして新しいデータソースを定義します。

HTML チェックボックスの動的な事前選択

ブラウザーにフォームが表示されるときに、事前にチェックボックスをオンにするかどうかをサーバー側で判断するように設定できます。

作業を開始する前に、ColdFusion、PHP、または ASP のページ内にフォームを作成し、チェックボックスで使用する動的コンテンツのレコードセットやその他のソースを定義する必要があります。コンテンツのソースに Yes/No や true/false などのブール値のデータが含まれていれば理想的です。

ページ上のチェックボックスフォームオブジェクトを選択します。
プロパティインスペクターの「動的」ボタンをクリックします。
動的チェックボックスダイアログボックスに情報を入力し、「OK」をクリックします。
- 「チェック項目」ボックスの横の稲妻アイコンをクリックし、データソースのリストからフィールドを選択します。
  
  データソースには、Yes または No、あるいは true または false などのブール値のデータが含まれている必要があります。リストにデータソースがまったく表示されない場合や、表示された中に必要なデータソースがない場合は、「+」ボタンをクリックして新しいデータソースを定義します。
- 「同等値の選択」ボックスに、チェックボックスが選択された状態で表示される場合のフィールドの値を入力します。
  
  例えば、レコードの特定フィールドの値が Yes である場合にチェックボックスをオンの状態で表示するには、「同等」ボックスに「Yes」と入力します。
注意：

この値は、ユーザーがフォームの「送信」ボタンをクリックした場合にサーバーにも返されます。

HTML ラジオボタンの動的な事前選択

ブラウザーで HTML フォームにレコードが表示されるときに、HTML ラジオボタンを動的に事前選択できます。

作業を開始する前に、ColdFusion、PHP、または ASP のページ内にフォームを作成し、HTML ラジオボタンのグループを少なくとも 1 つ挿入する必要があります（挿入／フォーム／ラジオボタングループ）。また、ラジオボタンで使用する動的コンテンツのレコードセットやその他のソースも定義する必要があります。コンテンツのソースに Yes/No や true/false などのブール値のデータが含まれていれば理想的です。

デザインビューで、ラジオボタングループの中からラジオボタンを 1 つ選択します。
プロパティインスペクターの「動的」ボタンをクリックします。
動的ラジオボタングループダイアログボックスに情報を入力し、「OK」をクリックします。

動的ラジオボタングループダイアログボックスのオプションの設定

ラジオボタングループポップアップメニューで、ページのフォームおよびラジオボタンのグループを選択します。

「ラジオボタンの値」ボックスに、グループ内のすべてのラジオボタンの値が表示されます。
値のリストから、動的に事前選択する値を選択します。この値は、「値」ボックスに表示されます。
「同等値の選択」ボックスの横にある稲妻アイコンをクリックし、グループのラジオボタンに使用することが可能なチェック済み値を含むレコードセットを選択します。

選択するレコードセットは、ラジオボタンのチェック済み値と一致する値を含んでいます。ラジオボタンのチェック済み値を表示するには、それぞれのラジオボタンを選択し、プロパティインスペクターを表示します（ウィンドウ／プロパティ）。
「OK」をクリックします。

動的ラジオボタングループダイアログボックスのオプションの設定（ColdFusion）

ラジオボタングループポップアップメニューから、ラジオボタングループおよびフォームを選択します。
「同等値の選択」ボックスの横にある稲妻アイコンをクリックします。
動的データダイアログボックスに情報を入力し、「OK」をクリックします。

a. データソースのリストからデータソースを選択します。

b.（オプション）テキストのデータフォーマットを選択します。

c.（オプション）動的テキストを表示するように、Dreamweaver によってページに挿入されるコードを修正します。
「OK」をクリックすると、動的ラジオボタングループダイアログボックスが閉じ、動的コンテンツプレースホルダーがラジオボタングループに挿入されます。

HTML フォームデータの検証

Dreamweaver では、ユーザーが適切なタイプのデータを入力したかどうかを判断するために、特定のテキストフィールドの内容をチェックする JavaScript コードを追加できます。

Spry フォーム Widget を使用してフォームを作成し、特定のフォームエレメントのコンテンツを検証することができます。詳しくは、以下の Spry のトピックを参照してください。

また、Dreamweaver では、指定したフィールドのコンテンツを検証する ColdFusion フォームを作成することもできます。詳しくは、以下の ColdFusion の章を参照してください。

テキストフィールドと「送信」ボタンが含まれている HTML フォームを作成します。

検証するテキストフィールドに、それぞれ固有の名前が割り当てられていることを確認します。
「送信」ボタンを選択します。
ウィンドウ／ビヘイビアーを選択してビヘイビアーパネルを開き、「+」ボタンをクリックして、リストから「検査フォーム」ビヘイビアーを選択します。
各テキストフィールドに検証ルールを設定し、「OK」をクリックします。

例えば、年齢を入力するためのテキストフィールドには数字のみを入力できるようにします。

注意：

「検査フォーム」ビヘイビアーを使用できるのは、ドキュメントにテキストフィールドが挿入されている場合だけです。

HTML フォームオブジェクトへの JavaScript ビヘイビアーの割り当て

Dreamweaver にあらかじめ用意されている JavaScript ビヘイビアーを、ボタンなどの HTML フォームオブジェクトに割り当てることができます。

HTML フォームオブジェクトを選択します。
ウィンドウ／ビヘイビアーを選択してビヘイビアーパネルを開き、「+」ボタンをクリックして、リストからビヘイビアーを 1 つ選択します。

HTML フォームボタンへのカスタムスクリプトの割り当て

一部のフォームは、JavaScript または VBScript スクリプトを使用してクライアントサイドでフォームの処理またはその他のアクションを実行します。この場合、フォームのデータが処理のためにサーバーに送信されることはありません。Dreamweaver を使用して、クリックするとクライアントサイドの特定のスクリプトが実行されるフォームボタンを設定できます。

フォームの「送信」ボタンを選択します。
ウィンドウ／ビヘイビアーを選択してビヘイビアーパネルを開き、「+」ボタンをクリックして、リストから「JavaScript の呼出し」を選択します。
「JavaScript の呼出し」ボックスに、ボタンがクリックされたときに実行する JavaScript 関数の名前を入力し、「OK」をクリックします。

例えば processMyForm() など、まだ存在しない関数名を入力することもできます。
指定した JavaScript 関数がドキュメントの head セクションに存在しない場合は、その関数を追加します。

例えば、以下の JavaScript 関数をドキュメントの head セクションに定義して、ユーザーが「送信」ボタンをクリックしたときにメッセージが表示されるように設定できます。
```
function processMyForm(){ 
    alert('Thanks for your order!'); 
}
```

アクセシビリティを考慮した HTML フォームの作成

HTML フォームオブジェクトを挿入するときにフォームオブジェクトをアクセシブルにしたり、後でアクセシビリティ属性を変更したりできます。

アクセシブルなフォームオブジェクトの追加

アクセシブルなフォームオブジェクトを初めて追加するときには、そのフォームオブジェクトに対応するアクセシビリティダイアログボックスをアクティブにします（詳しくは、ビジュアル開発のためのワークスペースの最適化を参照してください）。

この操作は、最初に一度だけ実行します。
ドキュメントで、フォームオブジェクトを表示する場所に挿入ポイントを置きます。
挿入／フォームを選択し、挿入するフォームオブジェクトを選択します。

Input タグのアクセシビリティ属性ダイアログボックスが表示されます。
ダイアログボックスの入力を完了させ、「OK」をクリックします。これらのオプションは、次のとおりです。

注意：

スクリーンリーダーは、オブジェクトのラベル属性として入力した名前を読み上げます。

ID

フォームフィールドに ID を割り当てます。この値を使用すると、JavaScript からフィールドを参照できます。スタイルオプションで「for 属性によるラベルタグの添付」オプションを選択した場合に、属性の値として使用することもできます。

ラベルタグで囲む

指定すると、以下のように、フォームアイテムが label タグで囲まれます。
<label> <input type="radio" name="radiobutton" value="radiobutton"> RadioButton1</label>

for 属性を使用するラベルタグの追加

指定すると、以下のように、フォームアイテムが for 属性を使用した label タグで囲まれます。

<input type="radio" name="radiobutton" value="radiobutton" id="radiobutton"> <label for="radiobutton">RadioButton2</label>

このオプションを選択すると、ブラウザーでは、チェックボックスおよびラジオボタンと関連するテキストに長方形のフォーカスが配置されます。Web サイトのビジターは、チェックボックスやラジオボタンを選択する際、そのチェックボックスやラジオボタンのコントロールだけでなく、関連するテキストの任意の場所をクリックしても、選択できるようになります。

注意：これは、アクセシビリティの向上には好ましいオプションですが、実際の動作はブラウザーにより異なります。

ラベルタグなし

指定すると、以下のようにラベルタグが使用されません。
<input type="radio" name="radiobutton" value="radiobutton"> RadioButton3

アクセスキー

ブラウザー内のフォームオブジェクトを選択するのに使用できるキーボードの文字（1 文字）と Alt キー（Windows）または Control キー（Mac OS）の組み合わせを指定します。例えば、アクセスキーとして「B」と入力すると、Mac OS ブラウザーを使用するユーザーは、Control + B キーでフォームオブジェクトを選択できます。

タブインデックス

フォームオブジェクトのタブ順序を指定します。1 つのオブジェクトに対してタブ順序を設定したら、他のすべてのオブジェクトについてもタブ順序を設定する必要があります。

タブ順序を設定しておくと、ページに他のリンクやフォームオブジェクトがある場合に、Web サイトのビジターは、Tab キーを使用して特定の順序でオブジェクト間を移動できます。
「はい」をクリックして form タグを挿入します。

フォームオブジェクトがドキュメントに表示されます。

注意：

「キャンセル」を押すと、フォームオブジェクトはドキュメント内に表示されますが、Dreamweaver は、アクセシビリティタグや属性をこのフォームオブジェクトに関連付けません。

フォームオブジェクトのアクセシビリティ設定の変更

ドキュメントウィンドウで、オブジェクトを選択します。
次のいずれかの操作を実行します。
- コードビューで該当する属性を編集します。
- 右クリックするか（Windows)、Control キーを押しながらクリック（Mac OS）し、「タグの編集」を選択します。

その他の関連ヘルプ

ヘルプをすばやく簡単に入手

新規ユーザーの場合

Adobe MAX Japan
クリエイターの祭典

2025 年 2 月 13 日
東京ビッグサイト

詳しく見る