HTMLのフォームでは、記入を終えて“完成”したフォームのデータが、送信ボタンを押すことによって読み手側のWWWブラウザから発信されます。発信方法は2通りあり、1つは電子メールとして送る方法で、もう1つは“次に読み込みたいリソースのURI”としてWWWサーバに伝える方法です。

HTMLのフォームでは「送信ボタン」と呼ばれる特別な機能を持った要素が定義されており、送信ボタンを押すことによって、WWWブラウザから特別なメッセージが発信されます。メール送信の場合は、“これこれのアドレスにここれの内容のメールを出すゾ”というメッセージになります。“次に読み込みたいリソースのURI”の場合は、“このURIのリソースを寄越せ”です。

ここでは、まずはじめに「“次に読み込みたいリソースのURI”としてWWWサーバに伝える方法」について概説し、次に電子メールとして送る方法の説明をします。私達がHTMLフォームをアンケートなどに活用する場合は、電子メールとして送る方法が主になります。

検索エンジンのフォームと問合せ型URI

数ある検索エンジンの中で、非常にシンプルな検索フォームを用いている例として、Yahoo! Japan にあるフォームを眺めてみます。

このソースは次のようになっています。

<FORM method="GET" action="http://search.yahoo.co.jp/bin/search"> <INPUT size="30" name="p"> <INPUT type="submit" value="Yahoo! 検索"> </FORM>

このように、type属性値がsubmitであるINPUT要素が「送信ボタン」として働きます。送信ボタンには、value属性の値が表示されます。また、特段にtype属性の指定がないINPUT要素は「1行テキスト入力枠」として働き、その横幅がsize属性で指定されます。

送信ボタンを押すと、FORM要素のaction属性値であるURI断片と、問合せ型URIの区切り子である「?」、そして読み手の入力内容の3種を結合して得られたURIについて、(FORM要素のmethod属性値の指定により)“当該リソースをGETするゾ”というメッセージが、読み手のWWWブラウザから発信されます。

この時、漢字やカナなどは「URLエンコード」という方式によって「%」と16進数を組み合わせたコードに置き換えられます。そこで、例えば上の検索フォームで「日本語」について検索すると、“GET http://search.yahoo.co.jp/bin/search?p=%93%FA%96%7B%8C%EA”というメッセージが発信されます。

フォームのデータを“次に読み込みたいリソースのURI”として利用するのは、検索エンジンなどサーバ側の仕掛けがある場合のことで、私達のアンケート利用などにはあまり関係がありません。

フォームデータをメールで送る

別ページで解説する、“足跡”メールの例を見ましょう。

<FORM
method="POST"
action="mailto:uchida@happy.email.ne.jp"
>
<INPUT
type="submit"
value="Footnote"
>
</FORM>

この送信ボタンを読み手が押すと、「POST mailto:uchida@happy.email.ne.jp」というメッセージが読み手のブラウザから発信され、読み手が当該ページを訪れた証拠として、特に内容が書かれていない(本文も表題も空っぽの)“足跡”メールが送られます。

“足跡”メールのフォームを元に、ラジオボタン型コントロールで二者択一の質問をするアンケートを付け加えてみましょう。

このページの情報は、役立ちましたか?

まぁまぁ役にたったかな。 役立ちませんでしたよ。

<FORM
method="POST"
action="mailto:uchida@happy.email.ne.jp?subject=QA%20LHFYFWPA%20form%20mail"
class="sample-form">
<P>このページの情報は、役立ちましたか?</P>
<P>
<INPUT
type="radio"
name="answer"
value="Yes">まぁまぁ役にたったかな。
<INPUT
type="radio"
name="answer"
value="No">役立ちませんでしたよ。
</P>
<P>
<INPUT type="submit" value="送信">
<INPUT type="reset" value="記入内容消去">
</P>
</FORM>

この例では、FORM要素のaction属性値で、通常のメールアドレスの末尾に当該メールの表題に指定する文字列を付け加えました。指定した表題は普通に書けば「QA LHFYFWPA form mail」となるものですが、action属性の値になり得るのはURI書式の文字列なので、URLエンコードによって「スペース」を「%20」に置き換えています。また、漢字やカナをURLエンコードするのは面倒臭いので、アルファベットの表題にしました。(ちなみに、「LHFYFWPA」は「はじめてのWebドキュメントづくり」の英訳「Little help for your first Web page authoring」の略です。)

ラジオボタン型コントロールというのは、“どれかがオンの場合に他がオフになる”という排他関係になる選択肢のことを言います。INPUT要素のtype属性値がradioで、かつname属性値が等しいもの同士が、この排他関係を共有します。二者択一でなく、三択でも五択でも構いません。

送信ボタンはtype属性値がsubmitであるINPUT要素がその役割を担いますが、この例では“記入内容を消去して白紙に戻す”役割を果たすリセットボタン(type属性がresetであるINPUT要素)を併置しました。

フォームのデータ形式

さっきの例を、再掲します。

このページの情報は、役立ちましたか?

まぁまぁ役にたったかな。 役立ちませんでしたよ。

このフォームで、「まぁまぁ役にたったかな。」側をオンにしてアンケートを送信すると、uchida@happy.email.ne.jp 宛に、「QA LHFYFWPA form mail」という表題で、本文に「answer=Yes」と書かれたメールが届きます。

「まぁまぁ役にたったかな。」部分のソース断片を読み返しましょう。

<INPUT
type="radio"
name="answer"
value="Yes">まぁまぁ役にたったかな。

このように、「オン」になっているコントロールや、中身が書かれたテキスト入力コントロールなどの“name属性値とvalue属性値の組み合わせ”が、“完成”したフォームのデータの正体です。複数の項目があるフォームの場合、項目毎に「name=value」という行が出来上がり、項目数分の行があるメールとして送信されます。

このname属性値とvalue属性値が、アルファベットと数字だけで記されていればフォームデータの処理は簡単ですれれど、漢字やカナを含む場合、ひと手間かけた処理が必要になります。

上の例で、name属性値を「答」、value属性値を「まぁまぁ」に変えたモノを送信したとします。おそらく、漢字とカナがURLエンコードされて、人間には読めない本文のメールが届いてしまうでしょう。この場合、「フォームデコード」機能を持ったツールによって元の文字列(答=まぁまぁ)に復元する必要があります。

フォームのデータに漢字やカナを利用する場合、FORM要素のenctype属性でメール形態に関する指定を行うと、デコードの必要がなくなる場合もあります。FORM要素の開始タグに「enctype="multipart/form-data"」という指定を加えてみましょう。

<FORM
method="POST"
action="mailto:uchida@happy.email.ne.jp?subject=QA%20LHFYFWPA%20form%20mail"
enctype="multipart/form-data"
class="sample-form">
<P>このページの情報は、役立ちましたか?</P>
……
</FORM>

すると、フォームのデータがメールの添付書類として、適切な符号化方式によって送信されることでしょう。

クライアント側スクリプトによる入力チェック

フォームの中には、読み手の入力を必須にしたい項目があったりします。ただし、読み手が“うっかり”入力を忘れた状態で送信してしまった場合、再入力を依頼するには電子メールで連絡を取るなど、お互いに手間と時間がかかります。

サービスプロバイダによっては、送信先をメールアドレスではなくプロバイダのフォーム処理プログラム経由にしてくれる場合があり、ひょっとするとそのプログラムで“入力チェック”も出来るかもしれませんが、たいていはフォームデコード処理を提供してくれるだけでしょう。

こんな場合に、クライアント側スクリプトを利用して、入力チェックを行うことが考えられます。もちろん読み手の環境でクライアント側スクリプトが動かなければ機能しませんけれど。

お手元のWWWブラウザがJavascriptの働く環境であれば、下のフォームで“何も記入しない状態”と“何か記入した状態”の違いをお試しください。

ひとことコメントを是非!


目次/詳細目次

まず1つ作ってみよう

色を変えてみたりする

HTMLの基本的な要素

ファイル名とリンク

画像などをページに貼り付ける

ページレイアウト

リストと表

フォームとスクリプト

HTML化する文章と文字

Web用の文章の組み立てを考える

HTMLで表せない型や要素

ドキュメントオブジェクトとDynamic HTML


Thanks a lot for many visits since October 24, 1999.

1999 - 2001 内田明
uchida@happy.email.ne.jp