はじめてのWWWドキュメントづくり「フォームとスクリプト:フォームデータの処理」

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

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

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

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

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

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

このように、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”として利用するのは、検索エンジンなどサーバ側の仕掛けがある場合のことで、私達のアンケート利用などにはあまり関係がありません。

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

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

この送信ボタンを読み手が押すと、「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>

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