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

とほほのWWW入門 > とほほのHTMLリファレンス > フォーム
1999年6月20日

<FORM>〜</FORM> - フォーム - H2/e2/N2

■ 説明

入力フォームを表示します。<FORM>〜</FORM>がひとつのフォームとなります。フォームの中には<INPUT>や<SELECT>タグなどを用いてフォーム部品を配置することができます。

■ 属性

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

■ 使用例

【HTMLソース】
<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 VALUE="R1"
  NAME="RAD1" CHECKED>ラジオボタン1
<INPUT TYPE=radio VALUE="R2"
  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/e2/N2

■ 説明

<FORM>タグにおいて、 テキスト入力や実行(submit)ボタンなどのフォーム部品を表示します。

■ 共通属性

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

■ 使用例

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

<INPUT TYPE=text> - テキスト - H2/e2/N2

■ 説明

通常のテキストを入力するフォームです。250文字程度しか送信できないブラウザもありますので、長めの文書を入力させるには<TEXTAREA>を用いましょう。

■ 個別属性

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

<INPUT TYPE=password> - パスワード - H2/e2/N2

■ 説明

パスワードを入力するフォームです。 入力文字がアスタリスク(*)で表示されること以外は TYPE=text と同様です。

<INPUT TYPE=checkbox> - チェックボックス - H2/e2/N2

■ 説明

複数選択のチェック項目に用います。

■ 個別属性

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

<INPUT TYPE=radio> - ラジオボタン - H2/e2/N2

■ 説明

択一選択のチェック項目に用います。

■ 個別属性

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

<INPUT TYPE=hidden> - 隠しフィールド - H2/e2/N2

■ 説明

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

■ 個別属性

属性説明
VALUE="..." H2/e2/N2。フィールドの値を指定します。

<INPUT TYPE=image> - イメージ - H2/e2/N2

■ 説明

指定したイメージを表示し、イメージをクリックすると、そのクリックした位置をWWWサーバーに送ります。他に<INPUT TYPE=text>などのフォーム部品があれば、その値も同時に送信します。例えば、NAME="ABC" とした場合、ABC.x=123, ABC.y=456のような値が送信されます。

■ 個別属性

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

<INPUT TYPE=submit> - サブミットボタン - H2/e2/N2

■ 説明

このボタンを押すと、<FORM>タグのACTION属性で指定した動作を行います。

■ 個別属性

属性説明
VALUE="..." H2/e2/N2。ボタンに表示する名前を指定します。
onClick="..." H4/e3/N2。JavaScriptを記述します。

■ 補足

通常のボタンではなく、自分で用意した画像をボタンの代わりに使用したいときは、<INPUT TYPE=image SRC="..." BORDER=0> を用います。

<INPUT TYPE=reset> - リセットボタン - H2/e2/N2

■ 説明

このボタンを押すと、すべての入力項目が初期値に戻ります。

■ 個別属性

属性説明
VALUE="..." H2/e2/N2。ボタンに表示する名前を指定します。
onClick="..." H4/e3/N2。JavaScriptを記述します。

<INPUT TYPE=file> - ファイル転送 - H3/e4/N2

■ 説明

ブラウザ側からWWWサーバー側へファイルを転送(アップロード)する際に用います。詳細は「ファイルをアップロードするには」を参照してください。

<INPUT TYPE=button> - ボタン - e3/N2

■ 説明

ボタンです。 NN2.0のJavaScript対応でサポートされました。JavaScript未対応のブラウザでは表示されませんので注意してください。

■ 個別属性

属性説明
VALUE="..." H2/e2/N2。ボタンに表示する名前を指定します。
onClick="..." H4/e3/N2。JavaScriptを記述します。

<BUTTON>〜</BUTTON> - ボタン - H4/e4

■ 説明

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

■ 属性

属性説明
NAME="..." H4/e4。ボタンの名前を指定します。
TYPE="..." H4/e4。buttonresetsubmitのいずれかを指定します。
DISABLED H4/e4。ボタンを押したときの動作を無効にします。
ACCESSKEY=... H4/e4。例えば ACCESSKEY=X としておくと、キーボードでALTキーを押しながらXキーを押したときにこのボタンが押されたことになります。

<TEXTAREA>〜</TEXTAREA> - 複数行入力フォーム - H2/e2/N2

■ 説明

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

■ 属性

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

■ 使用例

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

<SELECT>〜</SELECT> - 選択フォーム - H2/e2/N2

■ 説明

<FORM>タグにおいて、 選択フォーム部品を表示します。

■ 属性

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

■ 使用例

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

<OPTION>〜</OPTION> - 選択フォームの項目 - H2/e2/N2

■ 説明

<SELECT>タグにおいて、選択肢を記述します。 </OPTION>は省略可能です。

■ 属性

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

■ 使用例

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

<KEYGEN> - 暗号化キーの生成 - N2

■ 説明

フォームの内容を暗号化して送信するようです。 詳細については未調査。

■ 属性

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

<LABEL>〜</LABEL> - コントロールのラベル - H4/e4

■ 説明

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

■ 属性

属性説明
FOR="..." H4/e4。関連するフォームコントロールのID属性の値を記述します。
ACCESSKEY=... H4/e4。例えば ACCESSKEY=X としておくと、キーボードでALTキーを押しながらXキーを押したときにこの部品にフォーカスが移動したり、ボタンが押された状態になったりします。

■ 使用例

【HTMLソース】
<INPUT TYPE=checkbox ID=xyz>
<LABEL FOR=xyz>ラベル</LABEL>

<FIELDSET>〜</FIELDSET> - コントロールのグループ化 - H4/e4

■ 説明

フォームのコントロールをグループ化します。 HTML4.0で規定されたタグで、IE4.0がサポートしています。

■ 使用例

【HTMLソース】
<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 VALUE="OK">
</FORM>

<LEGEND>〜</LEGEND> - コントロールグループのラベル - H4/e4

■ 説明

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

■ 属性

属性説明
ALIGN="..." H4/e4。top, bottom, left, rightのいずれかを指定します。
ACCESSKEY="..." H4/e4。例えば ACCESSKEY=X としておくと、キーボードでALTキーを押しながらXキーを押したときにこの<LEGEND>に対応する最初のコントロール部品にフォーカスが移動したり、マウスでクリックされた状態になります。

■ 使用例

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


Copyright (C) 1996-1999 とほほ
http://wakusei.cplaza.ne.jp/twn/wwwreffo.htm