HTMLのフォームは、アンケートには関係なくとも、読者が作者に対してページを読んだことを知らせる、“足跡”メールを送るためのボタンに利用する場合があります。また、フォームのボタンをリンクボタンとして利用するようなケースもあります。

フォーム機能と“足跡”メール

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

“足跡”メールの例を見ましょう。

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

この例のように、type属性値がsubmitであるINPUT要素は、FORMの「送信ボタン」として働き、FORM要素のaction属性値のURIに対してmethod属性の内容の働きかけをします。この送信ボタンには、value属性値である「Footnote」が表示されます。

説明し直しましょう。この送信ボタンを読み手が押すと、FORM要素のmethod属性値とaction属性値を組合わせたメッセージが発信されます。このメッセージは、WWWクライアントとWWWサーバの間で交わす応答に関する規約であるHTTP規定の書式によるものです。上の例では、「Footnote」と書かれたボタンを押すと、「POST mailto:uchida@happy.email.ne.jp」というメッセージが読み手のブラウザから発信され、読み手が当該ページを訪れた証拠として、特に内容が書かれていない(本文も表題も空っぽの)“足跡”メールが送られます。

FORM要素はブロック要素、INPUT要素はインライン要素なので、文の途中にボタンを作りたい場合、次のように記述します。

<FORM
method="POST"
action="mailto:uchida@happy.email.ne.jp"
>
<P>文の途中に足跡ボタン <INPUT
type="submit"
value="Footnote"
>
を作ってみたりする。</P> </FORM>

これを表示すると次のようになります。

文の途中に足跡ボタン を作ってみたりする。

FORM要素中には、複数のP要素等があっても構いません。

送信ボタンのように、特別な働きをする要素のことを、総称して「(フォームの)コントロール」と呼びます。FORM要素中には、必要に応じて、様々な形式、様々な個数のコントロールやテキストを配置できます。

Javascriptとの組合せによるリンクボタン

FORM要素中のコントロールは、最終的には「フォーム形式のデータとなって“GET”あるいは“POST”メソッドによって処理される」だけの使い道しかありません。けれども、特殊な装飾効果を持ったインライン要素としてFORM要素外で利用することもできます。この場合、単に装飾的に利用する場合と、スクリプトによって処理内容を決める場合があります。

さて、前のページからこのページへ移動するために、INPUT要素によるボタンとJavascriptとを組み合わせたリンクボタンを用意しました。

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

<P>
<INPUT type="button" value="なる" onClick="location.href='./formyes.html'"<
<INPUT type="button" value="ならない" onClick="location.href='./formno.html'">
</P>

<NOSCRIPT>
<P>リンクボタンが働かない場合は、こちらから選んで下さい。[<A href="./formyes.html">なる</A> / <A href="./formno.html">ならない</A>]</P>
</NOSCRIPT>

ソース後半のNOSCRIPT要素は、スクリプトが利用できない環境で表示されることになります。スクリプト実行環境では表示されません。

INPUT要素のonClick属性は、“ボタンが「クリックされた時点」で「location.href="ほにゃらら"」というスクリプトが実行される”ことを示します。この例のスクリプトは、“現在のウインドウに表示するページのURIを"ほにゃらら"に置き換える”ことを意味しており、結果的にリンクボタンの役割を果たします。

Javascript解説書の中には、同様のリンクボタンを次のようなソースによって実現しようとするものがあります。

<FORM>
<P>リンクボタンの例: <INPUT type="button" value="UCHIDA Akira 'home' page" onClick="location.href='http://www.asahi-net.or.jp/%7Esd5a-ucd/'"<
</P>
</FORM>

けれども、これはHTML 4では不正なマーク付けになります。なぜなら、FORM要素にはaction属性が必須だからです(*上の例にはありませんね)。HTML 4ではINPUT要素など(フォームの)コントロールを他のインライン要素同様にFORM要素外で扱えますから、そのように記しましょう。

上の例では、FORM要素の開始タグと終了タグを取り除いてしまえば、P要素中のINPUT要素として、HTML 4仕様に適合します。

HTML 4仕様には適合しますけれど、スクリプトの実行によって初めて機能するリンクボタンは、スクリプトが利用できない環境では無用の長物と化してしまいます。同様の働きをするNOSCRIPT要素を並記するか、最初からスクリプトを使わないようにするなど、気を使うようにしましょう。


目次/詳細目次

まず1つ作ってみよう

色を変えてみたりする

HTMLの基本的な要素

ファイル名とリンク

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

ページレイアウト

リストと表

フォームとスクリプト

HTML化する文章と文字

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

HTMLで表せない型や要素

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


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

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