とほほのHTMLリファレンス(フォーム)

HOME > とほほのWWW入門 > とほほのHTMLリファレンス > フォーム
1998年7月19日
<FORM>〜</FORM> フォーム H2/N2/e2
説明
入力フォームを表示します。 <FORM>〜</FORM>がひとつのフォームとなります。 フォームの中には<INPUT>や<SELECT>タグなどを用いて フォーム部品を配置することができます。

属性
ACTION="..." H2/N2/e2。 実行(submit)ボタンを押した時に実行するアクションを指定します。 ACTION="mailto:〜"とするとフォームの内容を〜のアドレスにメール送信します。 (IE3.0の場合は単にメールウィンドウを起動するだけのようです) ACTION="〜.cgi"とすると、〜.cgi をCGIスクリプトとして実行します。 ACTION="JavaScript:〜"として、簡単なJavaScriptを実行することもできるようです。
METHOD=... H2/N2/e2。 フォームに入力した値をCGIスクリプトに渡す方式を指定します。 METHOD=GETとすると環境変数QUERY_STRINGで渡します。 METHOD=POSTとすると標準入力に渡します。
ENCTYPE="..." H2/N2。 スクリプトにデータを受け渡す際のエンコード方法を指定します。 通常は省略して構いませんが、ファイル転送機能の際などに用います。
TARGET=... N2/e3。 スクリプトの実行結果を表示するウィンドウ(フレーム)を指定します。 <A>を参照してください。
NAME="..." N2/e3。 フォームに名前を付けます。 この名前はJavaScriptなどで使用されます。
onSubmit="..." N2/e3。 JavaScriptを記述します。
onReset="..." N3/e?。 JavaScriptを記述します。

使用例
<FORM METHOD=POST
  ACTION="cgi-bin/cgitest.cgi">
テキスト入力:
<INPUT TYPE=text
  NAME="TEXT1" VALUE="ABC" SIZE=30>
<P>
パスワード入力:
<INPUT TYPE=password
  NAME="PASSWD1" SIZE=30>
<P>
複数行入力:<BR>
<TEXTAREA NAME="TAREA1" COLS=20 ROWS=2>
</TEXTAREA>
<P>
<INPUT TYPE=checkbox
  NAME="CBOX1" CHECKED>チェックボタン1
<INPUT TYPE=checkbox
  NAME="CBOX2">チェックボタン2
<P>
<INPUT TYPE=radio
  NAME="RAD1" CHECKED>ラジオボタン1
<INPUT TYPE=radio
  NAME="RAD1">ラジオボタン2
<P>
<SELECT NAME="SELECT1">
<OPTION VALUE="No1" >選択肢その1
<OPTION VALUE="No2" >選択肢その2
<OPTION VALUE="No3" SELECTED>選択肢その3
</SELECT>
<P>
<SELECT NAME="SELECT2" SIZE=2>
<OPTION VALUE="No1">選択肢その1
<OPTION VALUE="No2">選択肢その2
<OPTION VALUE="No3" SELECTED>選択肢その3
</SELECT>
<P>
<INPUT TYPE=submit VALUE="実行">
<INPUT TYPE=reset VALUE="取消">
</FORM>
これ(↑)を表示するとこう(↓)なります。
テキスト入力:

パスワード入力:

複数行入力:

チェックボタン1 チェックボタン2

ラジオボタン1 ラジオボタン2


<INPUT TYPE="..."> 入力フォーム H2/N2/e2
説明
<FORM>タグにおいて、 テキスト入力や実行(submit)ボタンなどのフォーム部品を表示します。

共通属性
NAME="..." フォーム部品の名前を指定します。 この名前はCGIスクリプトなどに渡されて入力データを識別するのに用いられます。
ACCESSKEY=... e4。 例えば ACCESSKEY=X としておくと、ALT + X を押したときにこの部品にフォーカスが移動します。
TABINDEX=... e4。 TABキーを押したとき、ここで指定した数値の小さい順番にフォーカスが移動します。

使用例
<FORM>を参照してください。

<INPUT TYPE=text> テキスト H2/N2/e2
説明
通常のテキストを入力するフォームです。

個別属性
SIZE=n 入力フィールドの横幅を指定します。
MAXLENGTH=n 最大入力文字数を指定します。
VALUE="..." 初期状態のフィールドの内容を指定します。
onChange="..." JavaScriptを記述します。
onSelect="..." JavaScriptを記述します。
onFocus="..." JavaScriptを記述します。
onBlur="..." JavaScriptを記述します。

<INPUT TYPE=password> パスワード H2/N2/e2
説明
パスワードを入力するフォームです。 入力文字がアスタリスク(*)で表示されること以外は TYPE=text と同様です。

<INPUT TYPE=checkbox> チェックボックス H2/N2/e2
説明
複数選択のチェック項目に用います。

個別属性
VALUE="..." この項目がチェックされた時に送信される値を指定します。
CHECKED この項目の初期状態をチェックされた状態にします。
onClick="..." JavaScriptを記述します。

<INPUT TYPE=radio> ラジオボタン H2/N2/e2
説明
択一選択のチェック項目に用います。

個別属性
VALUE="..." この項目がチェックされた時に送信される値を指定します。
CHECKED この項目の初期状態をチェックされた状態にします。
onClick="..." JavaScriptを記述します。

<INPUT TYPE=hidden> 隠しフィールド H2/N2/e2
説明
画面には表示されない隠しフィールドです。 表示されないフィールドなんか使いようがないと思われるかもしれませんが、CGIスクリプトが自動生成したフォームページに、ユーザーの入力以外の固定値を持たせる時などに有効です。

個別属性
VALUE="..." フィールドの値を指定します。

<INPUT TYPE=image> イメージ N2/e?
説明
指定したイメージを表示し、イメージをクリックすると、そのクリックした位置をWWWサーバーに送ります。 例えば、NAME="ABC" とした場合、ABC.x=123, ABC.y=456のような値が送信されます。

個別属性
SRC="..." イメージのURLを指定します。
ALIGN="..." 配置を指定します。 <IMG>を参照してください。

<INPUT TYPE=submit> サブミットボタン H2/N2/e2
説明
このボタンを押すと、<FORM>タグのACTION属性で指定した動作を行います。

個別属性
VALUE="..." ボタンに表示する名前を指定します。
onClick="..." JavaScriptを記述します。

<INPUT TYPE=reset> リセットボタン H2/N2/e2
説明
このボタンを押すと、すべての入力項目が初期値に戻ります。

個別属性
VALUE="..." ボタンに表示する名前を指定します。
onClick="..." JavaScriptを記述します。

<INPUT TYPE=file> ファイル転送 N2/e4
説明
ブラウザ側からWWWサーバー側へファイルを転送(アップロード)する際に用います。 IE3.0でも、Microsoftのホームページで公開されているモジュールをアドオンすると可能になります。

使用例
<FORM METHOD=POST
      ENCTYPE="multipart/form-data"
      ACTION="cgi-bin/wwwupl.cgi">
File A: <INPUT TYPE=file NAME="A"><BR>
File B: <INPUT TYPE=file NAME="B"><BR>
<INPUT TYPE=submit VALUE=" OK ">
</FORM>

これを実行すると次のようになります。

File A:
File B:

適当なファイルを選んで[OK]ボタンを押すと、ファイルの内容がサーバーに転送(アップロード)されますので試して見てください。受け取り側のCGIスクリプトは wwwupl.cgi を参照してください。現状、テキストファイルにのみ対応しています。

備考
セキュリティの問題があるため、VALUE属性や、JavaScriptのvalueはサポートされていません。

<INPUT TYPE=button> ボタン N2/e3
説明
ボタンです。 NN2.0のJavaScript対応でサポートされました。 JavaScript未対応のブラウザでは表示されませんので注意してください。

個別属性
VALUE="..." ボタンに表示する名前を指定します。
onClick="..." JavaScriptを記述します。

<BUTTON>〜</BUTTON> ボタン e4
説明
ボタンです。 <INPUT TYPE=button>の代わりに用います。 <BUTTON>〜</BUTTON>で囲まれた部分がボタン上に表示されます。 HTML4.0の草案で提案され、IE4.0で実装されましたが、NNがまだ対応していないので、当面は<INPUT TYPE=button>を使用することになるでしょう。

属性
NAME="..." ボタンの名前を指定します。
TYPE="..." buttonresetsubmitのいずれかを指定します。
DISABLED ボタンを押したときの動作を無効にします。
ACCESSKEY=... e4。 例えば ACCESSKEY=X としておくと、ALT + X を押したときにこの部品にフォーカスが移動します。

<TEXTAREA>〜</TEXTAREA> 複数行入力フォーム H2/N2/e2
説明
<FORM>タグにおいて、複数行入力フィールドを表示します。 <TEXTAREA>〜</TEXTAREA>までの間のテキストがフィールドに表示されますが、<PRE>と同様、IEとNNで、<TEXTAREA>直後の改行の扱いが異なるので注意。

属性
NAME="..." H2/N2/e2。 フィールドに名前をつけます。 この名前はメールの中身やCGIスクリプトに渡したパラメータの中で、 どのフィールドの入力値かを識別するのに用います。
ROWS=n H2/N2/e2。 入力フィールドの縦方向の行数を指定します。
COLS=n H2/N2/e2。 入力フィールドの横方向の大きさを指定します。
WRAP=... N2。 自動改行を制御します。 off(自動改行しない)、 hard(横幅いっぱいになったら自動改行する)、 soft(自動改行するがサーバーに送信するデータは改行しない) のいずれかを指定することができます。 NNでの省略値はoffで、IEではsoft固定だそうです。
onChange="..." N2/e3。JavaScriptを記述します。
onSelect="..." N2/e3。JavaScriptを記述します。
onFocus="..." N2/e3。JavaScriptを記述します。
onBlur="..." N2/e3。JavaScriptを記述します。
ACCESSKEY=... e4。 例えば ACCESSKEY=X としておくと、ALT + X を押したときにこの部品にフォーカスが移動します。
TABINDEX=... e4。 TABキーを押したとき、ここで指定した数値の小さい順番にフォーカスが移動します。

使用例
<FORM>を参照してください。

<SELECT>〜</SELECT> 選択フォーム H2/N2/e2
説明
<FORM>タグにおいて、 選択フォーム部品を表示します。

属性
NAME="..." H2/N2/e2。 フィールドに名前をつけます。 この名前はメールの中身やCGIスクリプトに渡したパラメータの中で、 どのフィールドの入力値かを識別するのに用います。
SIZE=n H2/N2/e2。 選択フィールドの表示行数を指定します。 省略した場合は1行のみ表示されるドロップダウンリストになります。
MULTIPLE H2/N2/e2。 複数選択を可能にします。
onClick="..." N2/e3。JavaScriptを記述します。
onChange="..." N2/e3。JavaScriptを記述します。
onFocus="..." N2/e3。JavaScriptを記述します。
onBlur="..." N2/e3。JavaScriptを記述します。
ACCESSKEY=... e4。 例えば ACCESSKEY=X としておくと、ALT + X を押したときにこの部品にフォーカスが移動します。
TABINDEX=... e4。 TABキーを押したとき、ここで指定した数値の小さい順番にフォーカスが移動します。

使用例
<FORM>を参照してください。

<OPTION>〜</OPTION> 選択フォームの項目 H2/N2/e2
説明
<SELECT>タグにおいて、選択肢を記述します。 </OPTION>は省略可能です。

属性
SELECTED H2/N2/e2。 初期状態として選択状態にします。
VALUE="..." H2/N2/e2。 この項目を選択した場合、 ここで指定した "..." が入力の値としてアクションに送られます。

使用例
<FORM>を参照してください。

<KEYGEN> 暗号化キーの生成 N2
説明
フォームの内容を暗号化して送信するようです。 詳細については未調査。

属性
NAME="..." N2。キーの名前を指定します。
CHALLENGE="..." N2。未稿。

<LABEL>〜</LABEL> コントロールのラベル e4
説明
フォームのコントロールとラベルを関連つけるためのタグです。 これにより、ラベル部分もマウスのクリックの対象となります。

属性
FOR="..." e4。関連するフォームコントロールのID属性の値を記述します。
ACCESSKEY=... e4。 例えば ACCESSKEY=X としておくと、ALT + X を押したときにこの部品にフォーカスが移動します。

使用例
<INPUT TYPE=checkbox ID=xyz>
<LABEL FOR=xyz>ラベル</LABEL>

<FIELDSET>〜</FIELDSET> コントロールのグループ化 e4
説明
フォームのコントロールをグループ化します。 HTML4.0の草案で規定されたタグで、IE4.0がサポートしています。

使用例
<FORM METHOD=POST ACTION="cgi-bin/xx.cgi">
<FIELDSET>
<LEGEND>個人情報</LEGEND>
名前:<INPUT TYPE=text NAME=name>
年齢:<INPUT TYPE=text NAME=age>
</FIELDSET>
<FIELDSET>
<LEGEND>個人環境</LEGEND>
OS:<INPUT TYPE=text NAME=os>
ブラウザ:<INPUT TYPE=text NAME=browser>
</FIELDSET>
<INPUT TYPE=submit VLAUE="OK">
</FORM>

<LEGEND>〜</LEGEND> コントロールグループのラベル e4
説明
<FIELDSET>でグループ化したコントロール群の表題をつけます。 <TABLE>タグに対する<CAPTION>タグのようなものです。

属性
ALIGN="..." e4。top, bottom, left, rightのいずれかを指定します。

使用例
<FIELDSET>を参照してください。

Copyright(C) とほほ ( http://www2e.biglobe.ne.jp/~s-hasei/ )