1行を書き込む
Source:
あなたのお名前は：<INPUT TYPE=TEXT NAME="username" SIZE="20">
Result:
あなたのお名前は：
Description:
このTYPE=TEXTのINPUTタグは1行書き込みのための空欄を作ります。
書き込んだ結果はNAMEで指定した変数に格納されます。
SIZEでそのfieldの幅を設定します。スクロール可能なので
空欄の幅以上の文字列を書き込むこともできます。
MAXLENGTHで書き込む文字数を制限できます。
<INPUT TYPE=TEXT NAME="username" SIZE="20" MAXLENGTH="50">
VALUEで空欄にあらかじめ表示しておく文字列を指定できます。
<INPUT TYPE=TEXT NAME="username" SIZE="20" VALUE="NAOKI" >
伏せ字で書き込む
Source:
パスワードをいれてください：<INPUT TYPE=PASSWORD NAME="password" SIZE="20" >
Result:
パスワードをいれてください：
Description:
このTYPE=PASSWORDのINPUTタグはTYPE=TEXTのINPUTタグと見かけは
同じですが、この空欄に書き込むと文字が*として伏せ字で表示
されるのでpassword等の秘密文字を書き込むのに向いています。
しかし送信されるときは、書き込んだ文字がそのまま送られるので
送信中のデータを覗き見されたらおしまいです。
On/Offで選択する
Source:
チェックしてください：<INPUT TYPE=CHECKBOX NAME="cb">
Result:
チェックしてください：
Description:
このTYPE=CHECKBOXのINPUTタグはOn/Offで選択するための
小さなボタンを作ります。これをclickしてcheck on すると
NAMEで指定された変数の値が"on"になります。
VALUEを指定することでcheckされているときの値を
指定することができます。
<INPUT TYPE=CHECKBOX NAME="cb" VALUE="marked">
Checkされていないと変数自体が存在しません。
<INPUT TYPE=CHECKBOX NAME="cb" CHECKED>
複数の項目から選択する
Source:
あなたの一番好きなOSはどれですか？
Result:
あなたの一番好きなOSはどれですか？
Description:
これらTYPE=RADIOのINPUTタグは、そのNAMEで指定する変数の名前が
同じものでカテゴリを作ります。閲覧者はこれらの中から一つだけ
選択することができます。
選択されたときの変数の値を VALUE で設定します。
CHECKEDを指定することでその項目があらかじめ選択されている
状態にすることができます。
<INPUT TYPE=RADIO NAME="os" VALUE="UNIX" CHECKED>UNIX
Pull Down Menu で選択する
Source:
あなたの母言語は？
Result:
あなたの母言語は？
Assembler
Fortran
Pescal
C
C++
Java
Description:
このSELECTタグはOPTIONタグの後ろの言葉が並んだプルダウン
メニューを作ります。マウスを合わせることでメニューを選択でき、
そのメニュー名が変数の値になります。
VALUEでメニュー名の代わりに変数に入れる値を指定できます。
<OPTION VALUE="Cplusplus">C++
通常先頭に並んでいる言葉がdefaultで設定されていますが
SELECTEDを指定することでそのメニューがあらかじめ選択された
状態にすることができます。
<OPTION SELECTED>C++
SIZEオプションを指定することで一度に表示されるメニューの数を
制限できます。スクロールバーが付くことになります。
<SELECT NAME="language" SIZE="5" >
複数の行を書き込む
Source:
ご感想をお書きください
Result:
ご感想をお書きください
Description:
このTEXTAREAタグは COLS、ROWSで指定した大きさの
書き込み欄を作ります。
その文章すべての値がNAMEで指定した変数に入ります。
TEXTAREAタグ間に文字列を挿入することで、その文章を
あらかじめ表示しておくことができます。
<TEXTAREA NAME="comment" COLS=60 ROWS=6>何か書いてください</TEXTAREA>
なお、日本語にうまく対応していない browserでは、
この欄内の日本語の書き込みを正常に
表示しないことがあります。でも正常に送信します。
隠し情報を送る
Source:
内緒のデータ：<INPUT TYPE=HIDDEN NAME="mode" VALUE="mode1">
Result:
内緒のデータ：
Description:
このTYPE=HIDDENのINPUTタグは何も表示しません。空欄も表示せずに
変数に値が設定できます。
閲覧者に選ばせたくないような変数の値をCGIに渡す用途に使われます。
HIDDENでもデータ送信中は、TYPE=TEXTやPASSWORDと同じく
変数の内容がそのまま送信されるので、送信中に改竄されたらおしまいです。
イメージマップをクリックする
Source:
どこかをクリックしてください
Result:
どこかをクリックしてください
Description:
リセットボタン
Source:
<INPUT TYPE=RESET VALUE="reset">
Result:
Description:
このTYPE=RESETのINPUTタグはVALUEで指定した文字列をラベルと
するボタンを作ります。これがclickされると他のFORM内の他の
書き込み、選択内容を全て最初の状態に戻します。
提出ボタン
Source:
<INPUT TYPE=SUBMIT VALUE="submit">
Result:
このTYPE=SUBMITのINPUTタグはVALUEで指定した文字列をラベルと
するボタンを作ります。これがclickされるとFORMのデータは
FORMタグのACTIONオプションで指定されたCGIに転送されます。
NAMEで変数を指定することで変数にVALUEの値を持たせることが
できます。異なったVALUEを持つ複数のsubmitボタンを用意すること
で、CGI側で複数の種類の処理をさせることができます。これらの
submitボタンのNAMEの変数名は一致していてもいなくても、送られる
データは押されたボタンに関するもののみです。
<INPUT TYPE=SUBMIT NAME="sb" VALUE="test">