[Up] [Next] [Previous]  [Home]

<INPUT>タグ

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

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

テキストフィールドはデフォルトで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>タグ内に複数個置くことができ ます。3つのテキストフィールドを置いた場合次のようになります。

住所:

氏名:

年齢:

実行ボタン:

リセットボタン:

画面

<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の値を越えて入力 しようとするとビープ音が鳴り、入力が拒否されます。また、SIZEMAXLENGTH属性の両方を指定した場合、MAXLENGTH属性 が優先されます。

このテキストフィールドは2倍長いフィールドです(40文字まで表示できます):

次のテキストフィールドは5文字の制限があり、ユーザがそれ以上を入力使用 とするとビープ音がなります:

このボタンを押すと問い合わせを実行します:

リセットボタン:

画面

<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で与える名前を変 えるのが普通です。

住所:

氏名:

電話番号:

  1. Sun
  2. Dec
  3. HP
  4. IBM

リセットボタン:

画面

<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属性を指定します。

デフォルト値に"12345"を含んだテキストフィールド:

デフォルト値に"12345"を含まないテキストフィールド:

  1. 最初の選択ボックスで、デフォルトONです。
  2. 二番目の選択ボックスです。
  3. 三番目の選択ボックスで、デフォルトONです。
このボタンを押すと問い合わせを実行します:

リセットボタン:

画面

<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とし、 テキストフィールドと同じようにSIZEMAXSIZE属性等も 指定できます。

ユーザ名入力:

パスワード入力:

ログインには、このボタンを押して下さい:

画面

<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属性値にしなければなりま せん。異なる名前とした場合、複数指定を可能にしてチェックボックスと同じ ようになってしまうので、注意して下さい。

  1. 現金
  2. 小切手
  3. クレジットカード:
    • マスターカード
    • VISA
    • アメリカンエキスプレス
実行ボタン:

画面

<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]  [Home]