ユーザーが入力したデータだけではなく、既定のデータをそのまま送信させたい場合があります。例えば、たくさんの設問の何番目の回答かを示すような場合です。
- データを隠して送信する -
FORMタグによる入力コントロールの設定は、FORMタグを閉じたところまでが１つの入力範囲となります。１つのHTMLファイル内に複数のFORMタグを配置し、複数の入力範囲を設けることができます。
入力範囲が異なれば、nameオプションによるコントロールの識別名が重複しても構いません。すると、サーバーに送信されてきたデータがどの入力範囲のものか、判別できないことがあります。そのようなとき、他のコントロールの状態と共に、入力範囲ごとに“Question:1”などの固定的な文字列を送信するようにすれば便利です。
これらは、ユーザーに操作されてはいけないので、ブラウザの画面に表示する必要はありません。表示させないで固定的なデータを送信させるには、INPUTタグのtypeオプションに“hidden”を設定します。
hiddenを使った場合の書式は、以下のようになります。
<INPUT type="hidden" name="識別名" value="値">
これで、ブラウザの画面には表示されないまま、ユーザーがデータを送信すると、nameで指定した識別名とvalueに設定した値がサーバーに送信されます。
例)
ユーザーに見えないよう、“Question:01”という値を送信させる。
<INPUT type="hidden" name="Question" value="01">
- データを書き換え不可にする -
固定的なデータを送信させたい場合、送信される値をユーザーに見せておきたいこともあるでしょう。しかし、書き換えられてはいけません。そのような場合には、readonlyオプションに“readonly”と設定します。
readonlyオプションの規定値は"readonly"なので、値を省略して単にreadonlyとだけ記述しても同じ結果となります。
この機能は、INPUTタグとTEXTAREAタグで使えます。
例)
テキストボックスに「質問１」と表示し、書き換えられないようにする。
<INPUT type="text" readonly="readonly" name="Question" value="質問１">
通常のテキストボックスの初期値と同じように、画面には“質問１”と表示されますが、ユーザーは内容を書き換えることができません。ユーザーがデータを送信すると、nameで指定した識別名とvalueに設定した値がサーバーに送信されます。
但し、HTML 4.0に非対応のブラウザ（古いバージョンのブラウザ）では、readonlyオプションに対する機能が実装されていないため、ユーザーはvalueで与えた文字列を編集できてしまいます。
フォームのデータをメールで送る
FORMタグでは、入力されたデータをCGIプログラムに渡す代わりに、指定したアドレス宛にメールで送信することもできます。その場合はmethodオプションを省略し、actionオプションで“mailto:<メールアドレス>”として、送信先のアドレスを指定します。
メール送信のための書式は、以下のようになります。
<FORM method="post" action="mailto:メールアドレス?Subject=件名">
actionオプションでは、mailto:に続けて送信先のメールアドレスを設定しておきます。さらにそれに続けて“？”をはさみ、Subject=に続けてメールの件名を設定することもできます。
プロバイダのホームページエリアなどCGIの使用に制限のあるサーバーでは、この方法でフォームのデータをメール送信してもらうという方法もあります。
もちろんこの方法では、CGIプログラムを動かしてインタラクティブな処理を行うことはできません。フォームのデータを処理するための一つの方法として紹介するだけであって、Webアプリケーションのための技法ではありません。
なお、この方法で受信したメールはURLエンコードされています。Subjectに日本語を指定することもできません。テキストボックスなどに日本語の文章が入力される場合、ツールを使って日本語対応のコードにエンコードする必要があります。 |
ここで紹介した入力コントロールを利用すれば、ユーザーにデータを入力させ、それをサーバーで受け取ってCGIプログラムにわたし、処理できるようになります。
HTMLでは、INPUTタグは閉じる必要がありません。XHTMLに準拠したページとする場合は最後“/”記号を付け、タグを閉じることを忘れないようにしましょう。
<INPUT type="hidden" name="Question" value="01" />
~
タグを閉じる↑
データ送信のFORMタグで用いるmethodオプションの値“GET”と“POST”の違い、CGIプログラムに対するデータの渡し方などについては、前回の記事をお読みください。
※ 今回紹介したフォームと入力コントロールのサンプルコードは、ex10.htmlというファイルに収録してあります。但し、データの送信先は“test.cgi”などとなっているため、submitボタンをクリックしてもデータは送信されません。あくまでブラウザ上での表示と動作の見本です。
 サンプルファイル (LZH形式 736 B)
 |
|
|
