Input Tag

＜ＩＮＰＵＴ＞タグ

<INPUT>タグは、<FORM>の中で簡単な入力エリアを作成する場合に用いられます。このタグは、<IMG>タグのように開始タグ・終了タグはありません。<INPUT>タグで使われるフィールドなどは、X11用 Mosaic では Motif の Widget を用いています。

<INPUT>タグは、TYPE属性によって、次の8 つのタイプの入力形式が指定でき、いずれかを指定しなければなりません。
- "text"：テキスト入力を行うテキストフィールドを作ります。TYPE属性を指定しなければテキストフィールドとなります。
- "password"：テキスト入力を行なうテキストフィールドですが、文字を入力するとアスタリスクが表示され、打った内容が隠されます。パスワードの入力フィールドに用いられます。
- "checkbox"：トグルボタンで、複数の項目の選択を行います。
- "radio"：トグルボタンで、一つの項目の選択を行います。
- "image"：画像の座標入力を行います。
- "hidden"：WWWブラウザ側に表示されないフィールドを作ります。このフィールドは表示されませんが、サーバ側にデータが渡されます。このフィールドはあるデータをCGIスクリプトの引数として渡したい場合に用います。そのため、hidden形式のフィールドにはデータ値を含んでいなければなりません。
- "submit"：ボタンが作成され、 <FORM>タグのACTIONで指定された CGUスクリプトへデータを渡し実行します。
- "reset"：ボタンが作成され、一つの<FORM>タグ内の入力フィールド全てをデフォルト値にリセットします。
NAMEは入力フィールドのシンボリック名で、この名前は表示されませんが、データの名前として使用します。これは submitとreset以外の全てのタイプで必要となります。
VALUEはtextまたはpasswordフィールド内にあらかじめ文字を挿入しておく場合に用いられます。 checkboxやradioボタンの場合、選択された時の値を指定します。submit、resetボタンではボタンの名前になります。
CHECKEDは選択フォーム(checkbox、radio)の選択ボタンをあらかじめ選択された状態にしておきます。
SIZE は入力フィールドの物理的な長さを文字(行)数で指定します。これはtextまたはpasswordエントリにのみ用いられます。指定されていない場合、デフォルト値は20です。複数行にわたる場合、SIZE=幅,高さのように指定します。(例: SIZE=60,12)
MAXLENGTHは入力で許される最大文字数を指定します。これはtextまたはpasswordエントリにのみ用いられ、フィールドが1行の場合に用いられます。指定されていない場合は、制限はなくなります。

基本フォーム(テキストフォームと実行・リセットボタン)

テキストフィールドはデフォルトで20文字が表示可能なサイズで作られます。ボタンの名前については、ブラウザによっては日本語を表示できない場合があるので、注意して下さい。MAXLENGTHの指定がなければ、テキストフィールドには表示できる文字以上に入力することができます。

画面

Netscape 2.0b を使っていて、ボタンに日本語が表示できない人は、locale ファイルを修正する必要があります。この locale ファイルを使用したところ、Linux ではうまく表示できました。

<FORM METHOD="POST" ACTION="/cgi-bin/post-query">

テキストフィールド: <INPUT NAME="entry"< <P>
実行ボタン: <INPUT TYPE="submit" VALUE="実行"< <P>
リセットボタン: <INPUT TYPE="reset" VALUE="リセット"> <P>

</FORM>

テキストフィールドは<FORM>タグ内に複数個置くことができます。３つのテキストフィールドを置いた場合次のようになります。

画面

<FORM METHOD="POST" ACTION="/cgi-bin/post-query">

住所: <INPUT NAME="field1"> <P>
氏名: <INPUT NAME="field2"> <P>
年齢: <INPUT NAME="field3"> <P>
実行ボタン: <INPUT TYPE="submit" VALUE="実行"> <P>
リセットボタン: <INPUT TYPE="reset" VALUE="リセット"> <P>

</FORM>

テキストフィールドの属性

<INPUT>タグで作成するテキストフィールド長を変更する場合、 SIZE属性を使用します。また、入力文字数に制限を加えるには MAXLENGTH属性を使用します。MAXLENGTHの値を越えて入力しようとするとビープ音が鳴り、入力が拒否されます。また、SIZE と MAXLENGTH属性の両方を指定した場合、MAXLENGTH属性が優先されます。

画面

<FORM METHOD="POST" ACTION="/cgi-bin/post-query">

このテキストフィールドは2倍長いフィールドです(40文字まで表示できます):
	<INPUT SIZE=40 NAME="entry51"> <P> 
次のテキストフィールドは5文字の制限があり、ユーザがそれ以上を入力使用
とするとビープ音がなります:
	<INPUT SIZE=5 MAXLENGTH=5 NAME="entry52"> <P> 

このボタンを押すと問い合わせを実行します:
<INPUT TYPE="submit" VALUE="実行"> <P>
リセットボタン: <INPUT TYPE="reset"> <P>

</FORM>

チェックボックス

チェックボックスはトグルボタンで複数の項目から項目を選択する場合に用いられます。一つの<INPUT>タグで一つのトグルボタンが作成されます。そして、選択されたボタンにVALUE属性で値が与えられていればその値を、無ければ NAME=on がデータとしてサーバに送られます。複数選択される可能性があるので、NAMEで与える名前を変えるのが普通です。

画面

<FORM METHOD="POST" ACTION="/cgi-bin/post-query">

住所: <INPUT NAME="address"> <P>
氏名: <INPUT NAME="name"> <P>
電話番号: <INPUT NAME="phone"> <P>

<OL>
<LI> <INPUT TYPE="checkbox" NAME="computer1" VALUE="sun"> Sun
<LI> <INPUT TYPE="checkbox" NAME="computer2" VALUE="dec"> Dec
<LI> <INPUT TYPE="checkbox" NAME="computer3" VALUE="hp"> HP
<LI> <INPUT TYPE="checkbox" NAME="computer4" VALUE="ibm"> IBM
</OL>

<INPUT TYPE="submit" VALUE="所有コンピュータ入力"> <P>
リセットボタン: <INPUT TYPE="reset"> <P>

</FORM>

デフォルト値を含んだテキストフィールドとチェックボックス

テキストフィールドに予め値を入れておくには、VALUE属性で指定します。チェックボックスで予め選択しておくには、選択する項目に CHECKED属性を指定します。

画面

<FORM METHOD="POST" ACTION="/cgi-bin/post-query">

デフォルト値に"12345"を含んだテキストフィールド:
	<INPUT NAME="def-entry1" VALUE="12345"> <P> 
デフォルト値に"12345"を含まないテキストフィールド:
	<INPUT NAME="def-entry2"> <P> 

<OL>
<LI> <INPUT TYPE="checkbox" NAME="box1" VALUE="first" CHECKED>
	最初の選択ボックスで、デフォルトONです。
<LI> <INPUT TYPE="checkbox" NAME="box2" VALUE="second">
	二番目の選択ボックスです。
<LI> <INPUT TYPE="checkbox" NAME="box3" VALUE="third" CHECKED>
	三番目の選択ボックスで、デフォルトONです。
</OL>

このボタンを押すと問い合わせを実行します:
<INPUT TYPE="submit" VALUE="実行"> <P>
リセットボタン: <INPUT TYPE="reset" VALUE="リセット"> <P>

</FORM>

パスワードフィールド

入力テキストを人に見えないようにするために、パスワードフィールドが用意されています。パスワードフィールドはテキストを入力した時、入力した文字がアスタリスク('*')として表示され、何を入力したかをブラウザに表示しません。パスワードフィールドを作成するには TYPE=passwordとし、テキストフィールドと同じようにSIZEやMAXSIZE属性等も指定できます。

画面

<FORM METHOD="POST" ACTION="/cgi-bin/post-query">

ユーザ名入力: <INPUT NAME="username"> <P>
パスワード入力: <INPUT TYPE="password" NAME="password"> <P>
ログインには、このボタンを押して下さい:
	<INPUT TYPE="submit" VALUE="ログインします"> <P>

</FORM>

パスワードフィールドの場合も VALUE属性でデフォルト値を指定できます。その場合もテキストはアスタリスクで表示されます。

画面

<FORM METHOD="POST" ACTION="/cgi-bin/post-query">

ユーザ名入力: <INPUT NAME="username" VALUE="guest"> <P>
パスワード入力: <INPUT TYPE="password" NAME="password"
	VALUE="guest"> <P>
ログインには、このボタンを押して下さい:
	<INPUT TYPE="submit" VALUE="ログインします"> <P>

</FORM>

ラジオボタン

ラジオボタンは複数項目の中で、一つだけ項目を選択したい場合に用いられます。ラジオボタンは項目を統一した NAME属性値にしなければなりません。異なる名前とした場合、複数指定を可能にしてチェックボックスと同じようになってしまうので、注意して下さい。

画面

<FORM METHOD="POST" ACTION="/cgi-bin/post-query">

<OL>
<LI> <INPUT TYPE="radio" NAME="paymethod" VALUE="cash" CHECKED> 現金
<LI> <INPUT TYPE="radio" NAME="paymethod" VALUE="check"> 小切手
<LI> <I>クレジットカード:</I>
<UL>
<LI> <INPUT TYPE="radio" NAME="paymethod" VALUE="mastercard">
	マスターカード
<LI> <INPUT TYPE="radio" NAME="paymethod" VALUE="visa">
	VISA
<LI> <INPUT TYPE="radio" NAME="paymethod" VALUE="amex">
	アメリカネキスプレス
</UL>
</OL>

実行ボタン: <INPUT TYPE="submit" VALUE="支払方法"> <P>

</FORM>

隠蔽フィールド

<FORM>タグで、CGIスクリプトにデフォルトの引数を渡したい場合に、ブラウザには表示されない隠蔽フィールドを作ることができます。隠蔽フィールドは TYPE="hidden"と指定し、必ず VALUE属性に値を含んでいなければなりません。

画面

<FORM METHOD="POST" ACTION="/cgi-bin/post-query">

<INPUT NAME="sport" TYPE="hidden" VALUE="ゴルフ">
ゴルフの参加者名：<INPUT NAME="name"><p>

<INPUT TYPE="submit" VALUE="実行"><p>
<INPUT TYPE="reset" VALUE="リセット">
</form>

隠蔽フィールドは、ブラウザで見えないだけで、セキュリティが保たれているわけではありません。WWWは文書のソースコードがクライアントに転送されてしまうので、重要なデータを隠蔽フィールドに書き込まないでください。単に CGI スクリプトに渡す引数として考えた方がよいでしょう。

[Up] [Next] [Previous]