Section 12 : フォームの基礎(4)

 <INPUT> で生成される,少し変わったフォームコントロールを紹介していこう。

ファイルセレクト

 フォームデータとしてファイルをアップロードするさいに,そのファイルを選択するためのコントロールで,TYPE="file" で生成される。

 このコントロールは,送信するときに“指定されたファイルの内容”を値として送信する。ファイルのアップロードに用いるから,ふつうはフォームの送信メソッドは post で用いることになるだろう。

<P>Select a text file to upload: <INPUT TYPE="file" NAME="file1" ACCEPT="text/plain"></P>

Select a text file to upload:

フォームが送信されるとき,ファイルは <FORM> の ENCTYPE 属性にしたがってエンコードし直される。

 IE3/4/5/5.5,NN4  VALUE 属性に初期値を与えても無視される。ACCEPT 属性によるファイルタイプのフィルタリングはできない。

見えないコントロール

 TYPE="hidden" で生成されるコントロールは,表示されず,したがって書き換えられない。この用途は,つねに決まった値を名前・値の組で送信するためである(CGI プログラムへの,セッションの状態と遷移を渡すのによく用いられる)。

 見えないからといって,セキュリティ上重要な情報を渡すのに用いてはならない。表示はされなくても,原稿(ソース)を見れば何を渡しているかは一目瞭然だからである。

イメージコントロール

 TYPE="image" で生成されるコントロールは,画像に送信ボタンに準ずる働きをさせるものである。

先ほど送信ボタンと同様の動作をすると述べたが,このイメージコントロールの大きな特徴は,それがポインティングデバイスでクリックされてフォーム内容を送信するきに,クリックした位置が送られる点にある。座標のとりかたはイメージマップのときと同じだが,つねにピクセルを単位として渡される。具体的には,NAME 属性が image1 のコントロールの (a, b) の位置(a,b は数値)がクリックされたら,“image.x=a”,“image.y=b”のように組になって渡される。

<P><INPUT TYPE="image" NAME="image1" SRC="f_btnok.gif" ALT="OK"></P>

これを使うと,クリックした場所によって動作を変えるということも可能であるが,ノングラフィカルな UA のことを考えるとあまり好ましいこととはいえない。このような場合は,複数の送信ボタンで対応するなどの配慮がほしい。

プッシュボタン

 TYPE="button" で生成されるプッシュボタンは送信ボタン,リセットボタンのように決まった動作をするものではなく,おもにコントロールに関連づけられたスクリプトをトリガしてある手続きを行わせるものである。

関連づけるイベントとしては onClick が妥当だろう。

<P><INPUT TYPE="text" NAME="text2" SIZE="40" VALUE="a push button in a form"></P>
<P>以下のボタンでテキストボックスの内容が大文字に変わります。<BR>
  <INPUT TYPE="button" NAME="command1" VALUE="to uppercase" onClick="this.form.text2.value = this.form.text2.value.toUpperCase()"></P>

以下のボタンでテキストボックスの内容が大文字に変わります。

 上の例は <FORM> 内に書かれていることを想定している。スクリプトは JavaScript だが,スクリプト言語の宣言はされていない。このようなときのために,Yes, we love HTML の Section 7 で示したように <META> を用いてヘッダにスクリプト言語の MIME タイプを指定しておくことを確認していただきたい。

 プッシュボタンとして,<BUTTON> を使うこともできる。そちらのほうが利便性が高い。