Next page Previous page table of contents

Guide to HTML 3.2
　- Wilbur -

- Form fields -
[INPUT] [SELECT] [TEXTAREA] [OPTION]

INPUT - Input field
*

インプット・フィールド

タグ： <INPUT TYPE=x NAME=string>
アトリビュート： TYPE=text/password/checkbox/radio/submit/reset/file/hidden/image, NAME=string, VALUE=string, CHECKED, SIZE=n, MAXLENGTH=n, SRC=URL, ALIGN=top/middle/bottom/left/right
Children： None (Empty)
Parents： FORM
＊FORMエレメントの中で以下のエレメントはParentになれます＊
Block-level
Hx, P, PRE, DIV, CENTER, BLOCKQUOTE, TH, TD, DT, DD, LI, ADDRESS
Text-level
TT, I, B, U, STRIKE, BIG, SMALL, SUB, SUP, EM, STRONG, DFN, CODE, SAMP, KBD, VAR, CITE, FONT, A, APPLET, CAPTION

INPUTエレメントはFORMエレメントの中で使われ、ユーザーがデータを記入できる様々なタイプのインプット・フィールドを作ります。TYPEアトリビュートとNAMEアトリビュートは必ず入れなければならないminimum attributesです。 INPUTエレメントには、クローズタグはありません。

TYPE=text/password/checkbox/radio/submit/reset/file/hidden/image


1. type=text (default)
一行だけのテキストを入力できるテキスト・フィールドを作ります。

  • size アトリビュートを使いフィールド・ボックスの大きさをセットすることが出来ます。
  • maxlengthアトリビュートを使って、入力される最大キャラクター数を指定することが出来ます。指定されていない場合は制限はなくなります。
  • nameアトリビュート (required) はフィールド名を指定します。表示はされませんがそのフィールドに入力されたデータの名前として使用 されるので必ず入れなければなりません。
  • valueアトリビュート には、フィールド内にあらかじめテキストを入れておく場合に用いられます。 このテキストはドキュメントが始めてロードされた時にフィールド内に表示されます。
　　　　　　　
Example:

あなたの名前： 

あなたの名前：<input type="text" name="name" SIZE="30" value=
"あなたの名前を記入して下さい">
2. type=password
テキスト・フィールドですがパスワードの入力フィールドに用いられます。入力すると代わりのキャラクター（例えば、アスタリスク "*"） が表示され、打った内容が隠されます。

  • size アトリビュートを使いフィールド・ボックスの大きさをセットすることが出来ます。
  • maxlengthアトリビュートを使って、入力される最大キャラクター数を指定することが出来ます。指定されていない場合は、制限はなくなります。 　　
Example:

パスワード： 

パスワード：<input type=password size=12 name=pw>
3. type=checkbox
トグル・ボタンを使った複数選択が出来るチェックボックスを作ります。リストされる項目の一つ一つにINPUTエレメントが必要です。

  • nameアトリビュート (required) にフィールド名を指定します。複数のチェック・ボックスを作成する場合、フィールド名は同じでも違っていても構いません。
  • valueアトリビュートには項目ごとにヴァリューを入れておきます。valueアトリビュートはオプションです。選択されたチェック・ボックスにvalueが入っていればそのヴァリューが、またvalueが入っていなければ "name=on" というデータがサーバーに送られます。
  • checkedアトリビュートは、あらかじめチェックボックスが選択された状態にしておく場合に使用します。
Example:

どんなペットを飼っていますか：
猫 犬 鳥 熱帯魚 その他 

どんなペットを飼っていますか：
<input type="checkbox" name="pet" VALUE="cat">猫 
<input type="checkbox" name="pet" VALUE="dog">犬 
<input type="checkbox" name="pet" VALUE="bird">鳥 
<input type="checkbox" name="pet" VALUE="fish">熱帯魚
<input type="checkbox" name="pet" VALUE="others" checked>その他
4. type=radio
複数項目から一項目だけを選択するラジオ・ボタンを作ります。リストされる項目全てにINPUTタグが必要です。

  • nameアトリビュート (required) にはフィールド名を指定しますが、チェック・ボックスと違い、全ての項目に同じフィールド名を指定します。
  • valueアトリビュートにはそれぞれの項目に違ったヴァリューを与えます。
  • ラジオ・ボタンではchecked アトリビュートを使って一項目だけをあらかじめ選択しておいて下さい。
Example:

あなたの年齢は：
10〜19 20〜29 30〜39 40〜49 50〜59 60歳以上 

あなたの世代は：

<INPUT TYPE="radio" NAME="age" VALUE="under20" >10〜19
<INPUT TYPE="radio" NAME="age" VALUE="under30">20〜29
<INPUT TYPE="radio" NAME="age" VALUE="under40">30〜39
<INPUT TYPE="radio" NAME="age" VALUE="under50" CHECKED>40〜49
<INPUT TYPE="radio" NAME="age" VALUE="under60">50〜59
<INPUT TYPE="radio" NAME="age" VALUE="over60">60歳以上
5. type=submit
ファームに記入されたデータをサーバーに送るための実行ボタンが作成されます。一つのフォームの中に幾つもの実行ボタンを作成することも出来ます。またimageアトリビュートでグラフィックを使ったボタンを作ることも出来ます。

  • value アトリビュートでボタンに名前を付けることが出来ます。この名前はボタンに表示されます。
  • nameアトリビュートはここではオプションですが、複数の実行ボタンを作る場合には、それぞれに違った名前をヴァリューとして与えておきます。valueとnameはペアーでサーバーに送られます。 　　　　　
Example:

<input type=submit value="submit">
注意：ボタンはクリックしても問題はありませんが、正常には作動しません。
6. type=image
実行ボタンにグラフィックを使う場合に使用します。imageアトリビュートはグラフィックの座標入力を行います。

  • イメージはsrc アトリビュートを使ってURLで指定します。
    SRCアトリビュートでイメージを読み込むと、そのイメージの 座標を入力データとしてサーバに送る機能があります。nameで指定したフィールド名に ".x" を付けた "name.x=n"（X座標）と、".y"を 付けた"name.y=n"（Y座標）を入力データとしてサーバに送ります。
  • イメージのアライメントはalignアトリビュートを使い、 left, right, top, middle, bottomのいずれかのヴァリューを指定します。これは IMGエレメントの場合と同じです。
Example: 

<input type=image name=point src="imgSubmit.gif">
注意：ボタンはクリックしても問題はありませんが、正常には作動しません。
7. type=reset
リセット・ボタンが作成されます。フォーム・フィールドの入力データが全てディフォルト・ヴァリューの状態に戻ります。

  • valueアトリビュートで名前を付けることが出来ます。
Example: 

<input type=reset value="Start Over">
8. type=file
テキスト・フィールドとブラウザー・ボタンが作られます。これで、ユーザーがファイルを添付 することが出来きます (File をupload 出来るということです)。 ユーザーがブラウザー ・ボタンを使ってローカル・ハード・ディスクから選んだファイル名がテキスト・フィールドに記入されます。

  • size アトリビュートを使いフィールド・ボックスの大きさをセットすることが出来ます。
  • maxlengthアトリビュートを使って、入力される最大キャラクター数を指定することが出来ます。指定されていない場合は制限はなくなります。
Notes:
  • フォームでのファイル・アップロードについての詳しい情報はRFC 1867 Form-based File Upload in HTMLを参照して下さい。
  • このアトリビュートをサポートしているブラウザーはまだ少ないようです。
Example: 

<input type=file name=photo size=20>
9. type=hidden
ブラウザー・ウインドーには表示されないフィールドを作ります。ユーザーにコントロールされたくない情報、例えばフォームのステイト・インフィメーション（state infomation) や CGIスクリプトのパラメーターとなるデータなど、をここにヴァリューとして入れておきます。 このヴァリューはnameアトリビュートとvalue アトリビュートで指定されます。これはフォームが実行されるとサーバーに送り帰されます。

Notes: このフィールドはブラウザー・ウインドーに現われないだけで、サーバーからクライアントに送られるソースコードで読むことができます。セキュリティーが必要なデータは書き込まないで下さい。

Example: 

<input type=hidden name=customerid value="abacuss01-tmb-1225">
name
フィールドの固有名の指定に使われます。これはデーターがサーバーに送られるさいに、そのフィールドに書き込まれた内容の名前として使用されます。
value
フィールドに初期値を与えます。 submit と reset ではボタンにテキスト・ラベル（名前）を付けます。
checked
チェックボックスとラジオ・ボタンに初期値を与えます。
size
テキスト・フィールドの表示サイズの指定に使います。サイズはキャラクターの数で指示されます。
maxlength
テキスト・フィールドに入力できるキャラクターの数を指定します。
src
グラフィックを使った実行ボタンに使うイメージのURLを指定します。
align
グラフィックを使った実行ボタンに使うイメージのアライメントに使います。 これは IMGエレメントのalignアトリビュートと全く同じです。 top, middle, bottom, left, rightのヴァリューから一つを選んで指定します。ディフォルトはbottomです。

- FORM fields -
[INPUT] [SELECT] [TEXTAREA] [OPTION]

Next page Previous page table 0f contens
[HTML help] [Basics] [HTML 3.2] [Beginner's] [How]
Copyright (C) 1997 Abacuss iconABACUSS LTD.
 www.abacuss.com