Section 10 : フォーム・その2

 今度は <INPUT> で生成されるフォームの要素について見てみよう。ただし,例には書き込んでも何も起こらない。


テキストボックスと伏せ字テキストボックス

 TYPE="text" で指定する。伏せ字の場合は TYPE="password"

 1行のテキスト入力を行う。複数行用は <TEXTAREA> という別の要素がある。
 パスワードなど,画面に文字が出てはまずい場合は TYPE="password" にしておくと入力された文字は * などの記号として表示される。

 以下は SIZE=15,MAXLENGTH=20 のテキストボックスである。


チェックボックス

 TYPE="checkbox" で指定する。

 YES/NO のチェックボックスである。CHECKED を書いておけば初期状態でチェックされた状態になる。
 VALUE 属性には,チェックされたときに CGI プログラムに渡す値を指定する。たとえば,VALUE="true" となっていればチェックされたときにテキストボックスがその中身を値とするのと同様にそのチェックボックスは "true" という値を持つことになる。

 たとえば,次のように使う。

チェックしてみてください。

ラジオボタン

 TYPE="radio" で指定する。

 択一式のラジオボタン(オプションボタン)である。複数から選ぶので,全体のうちひとつは CHECKED を書いてあらかじめチェックしておく。
 NAME 属性は,ラジオボタン群ひと組で同じ値にしておく。違う値の場合,独立に動作する。どのボタンが選択されているかは,VALUE 属性の値で判別することになる。

 次のなかからひとつを選び,動作を確かめてみよう。これらのラジオボタンの NAME 属性はすべて "test3" となっている。

はいいいえどちらでもない

OKボタンとリセットボタン

 OKボタンは TYPE="submit",リセットボタンは TYPE="reset"で指定する。

 OKボタンは,押されると <FORM> によって指定された動作を始める。リセットボタンは,<FORM> 内部,またこのタグでくくられていない場合は全体の部品をすべて初期状態に戻す。
 VALUE 属性の値はボタンに書かれるテキストを指定する。

 リセットボタンを押して,上のテキストボックスなどがどうなるか確認しよう。


ローカルファイルの指定

 TYPE="file" で指定する。

 たとえばこちらからファイルを指定して送るような場合に使う。基本的な動作はテキストボックスに準じるが,「参照(Browse)...」ボタンが付くこともある。


見えないフォーム要素

 TYPE="hidden" で指定する。

 これは見えない,書き込めない。決まった値をサーバに渡すときに使う。だが,ソースを見れば何を渡しているかは一目瞭然である。

 これは例をあげてもしかたあるまい。


フォーム要素としての画像

 TYPE="iamge" で指定する。

 これは,画像をOKボタンの代わりとして用いるというものである。SRC 属性で画像ファイルを指定する。
 ただ,異なる点はクリックしたときの画像における座標Section 4 参照)がサーバに渡されることである。


解決! センター化学 I
解決! センター化学 I ◆ Z 会出版

Next : フォーム・その3
Prev : フォーム・その1
Up : 目次