Web フォームの作成

デザインビューでは、フォームは赤い点線のアウトラインで示されます。 このアウトラインが表示されない場合は、表示／視覚補助／非表示エレメントを選択します。

プロパティインスペクター（ウィンドウ／プロパティ）で、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 タグのアクセシビリティ属性ダイアログボックスの入力を完了します。 詳しくは、ダイアログボックスの「ヘルプ」ボタンをクリックしてください。

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

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

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

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

改行、段落区切り、整形済みテキスト、またはテーブルを使用してフォームを書式設定します。フォーム内に別のフォーム（つまり、タグの重複）を挿入することはできませんが、1つのページに複数のフォームを含めることができます。

フォームを設計する際は、フォームフィールドに説明テキストでラベルを付けて、ユーザーが何に回答しているかがわかるようにすることを忘れないでください。例えば、名前情報を求める場合は「お名前を入力してください」などです。

テーブルを使用して、フォームオブジェクトとフィールドラベルに構造を持たせます。フォームでテーブルを使用する場合は、すべてのtableタグがformタグの間に含まれていることを確認してください。

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

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

フィールドに入力できる最大文字数を指定します。ユーザーがファイルを参照して探す場合、ファイル名とパスが指定された最大文字数の値を超える可能性があります。ただし、ユーザーがファイル名とパスを入力しようとする場合、ファイルフィールドは最大文字数の値で指定された文字数のみを許可します。

イメージソースの選択ダイアログボックスが表示されます。

ボタンに名前を割り当てます。 「Submit」と「Reset」の 2 つの予約名は、フォームデータを処理アプリケーションまたはスクリプトに送信するか、すべてのフォームフィールドを元の値にリセットするかを、それぞれフォームに指示します。

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

ブラウザーで画像の読み込みが失敗した場合に備えて、説明テキストを入力できます。

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

デフォルトの画像エディターを起動し、編集用に画像ファイルを開きます。

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

挿入／フォーム／ラジオグループを選択します。

ダイアログボックスの入力を完了させ、「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 列のテーブルが作成され、チェックボックスが左に、ラベルが右に設定されます。

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

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

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

    b. 挿入／フォーム／リスト/メニューを選択し、フォームオブジェクトを挿入します。

次のいずれかの操作を実行します。

• 新しいまたは既存の HTML リスト/メニューフォームオブジェクトを選択し、プロパティインスペクターの「動的」ボタンをクリックします。

• 挿入／データオブジェクト／動的データ／動的選択リストを選択します。

動的リスト/メニューダイアログボックスに情報を入力し、「OK」をクリックします。

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

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

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

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

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

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

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

データソースには、テキスト形式で情報が含まれている必要があります。 リストにデータソースが表示されない場合、または使用可能なデータソースがニーズに合わない場合は、プラス（+）ボタンをクリックして新しいデータソースを定義します。

• 「チェック項目」ボックスの横の稲妻アイコンをクリックし、データソースのリストからフィールドを選択します。

  データソースには、Yes または No、あるいは true または false などのブール値のデータが含まれている必要があります。 リストにデータソースがまったく表示されない場合や、表示された中に必要なデータソースがない場合は、「+」ボタンをクリックして新しいデータソースを定義します。

• 「同等値の選択」ボックスに、チェックボックスが選択された状態で表示される場合のフィールドの値を入力します。

  例えば、レコードの特定フィールドの値が Yes である場合にチェックボックスをオンの状態で表示するには、「同等」ボックスに「Yes」と入力します。

ラジオボタン値ボックスには、グループ内のすべてのラジオボタンの値が表示されます。

選択したレコードセットには、ラジオボタンのチェック済み値と一致する値が含まれています。ラジオボタンのチェック済み値を表示するには、各ラジオボタンを選択してプロパティインスペクターを開きます （ウィンドウ／プロパティ）。

動的データダイアログボックスに情報を入力し、「OK」をクリックします。

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

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

  c.（オプション）動的テキストを表示するように、Dreamweaver によってページに挿入されるコードを修正します。

検証するすべてのテキストフィールドに 一意の名前があることを確認します。

たとえば、年齢用のテキストフィールドで数字のみを受け入れるように指定することができます。

例えば、processMyForm() などの、まだ存在しない関数名を入力することもできます。

例えば、ユーザーが送信ボタンをクリックした時に メッセージを表示するために、ドキュメントの head セクションで 以下の JavaScript 関数を定義できます：

function processMyForm(){

alert('Thanks for your order!');

}

この操作は、最初に一度だけ実行します。

Input タグのアクセシビリティ属性ダイアログボックスが表示されます。

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

指定すると、以下のように、フォームアイテムが label タグで囲まれます。

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

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

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

注意：これはアクセシビリティのための推奨オプションです。ただし、機能はブラウザーによって異なる場合があります。

指定すると、以下のようにラベルタグが使用されません。

キーボードショートカット（1文字）とAltキー（Windows）またはControlキー（Macintosh）を使用して、ブラウザー内のフォームオブジェクトを選択します。例えば、アクセスキーとして B を入力した場合、 Macintosh ブラウザーを使用するユーザーは Control+B を 押してフォームオブジェクトを選択できます。

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

タブ順序の設定は、ページ上に他のリンクやフォームオブジェクトがあり、 ユーザーに特定の順序でタブ移動してもらう必要がある場合に 便利です。

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

• コードビューで適切な属性を 編集します。

• 右クリック（Windows）または Control キーを押しながらクリック（Macintosh）し、 「タグを編集」を選択します。