フォームタグ

１．フォーム
２．テキスト
３．パスワード
４．ファイル
５．チェックボックス
６．ラジオボタン
７．隠しフィールド
８．実行ボタン
９．取消ボタン
１０．汎用ボタン
１１．画像ボタン
１２．選択ボックス
１３．テキストエリア
１４．部品のグループ化
１５．ラベル

※このページではクラス（class）やIEのデータバインド（datesrc、datafld）のため、次のタグを入れてあります。

<HEAD>
<STYLE type="text/css">
<!--
.style1{font-style:italic}
.style2{font-size:6pt}
.style3{background-color:#00ff00}
.style4{margin:10pt}
//-->
</STYLE>
</HEAD>

<BODY>
<OBJECT ID="CSV1" CLASSID="clsid:333C7BC4-460F-11D0-BC04-0080C7055A83">
<PARAM NAME="DataURL" VALUE="csvsample.csv">
</OBJECT>
</BODY>

csvsample.csv の内容

データ1-1,123456,データ1-3
データ2-1,234567,データ2-3


１．フォーム

■ <FORM>〜</FORM>
説明 ： フォーム。この中にフォーム部品のタグを記述する。
表記例 ： <FORM>
入力<INPUT type="text">
<INPUT type="submit" value="OK">
</FORM>
表示例 ：
入力

■ <FORM action="...">
説明 ： 実行された時の動作。CGIのURLなど。
メールの場合は mailto:〜。
表記例 ： <FORM action="***.cgi">
<FORM action="mailto:jimita@capella.freemail.ne.jp">

■ <FORM enctype="...">
説明 ： エンコード形式。
text/plain
multipart/form-data
application/x-www-form-urlencoded
など。
表記例 ： <FORM enctype="text/plain">

■ <FORM method="...">
説明 ： <FORM method="get"> ： URLにデータが付加されて送信される。255文字まで。
<FORM method="post"> ： データは別ファイルとして送信される。

■ <FORM target="...">
説明 ： 表示ターゲットを指定する。
<FORM target="_self"> ： 現フレームに表示。
<FORM target="_parent"> ： 親フレームに表示。
<FORM target="_top"> ： フレームをすべて解除して表示。
<FORM target="_blank"> ： 新規ウィンドウに表示。
<FORM target="..."> ： 指定のウィンドウに表示。


２．テキスト

■ <INPUT type="text">
説明 ： テキスト入力フィールドを表示する。１行のみ。
表記例 ： <INPUT type="text">
表示例 ：

■ <INPUT type="text" disabled>
説明 ： 使用不可能にする。
表記例 ： <INPUT type="text" value="無効化" disabled>
表示例 ：

■ <INPUT type="text" maxlength="...">
説明 ： 最大入力文字数を設定する。
表記例 ： <INPUT type="text" maxlength="6">
表示例 ：

■ <INPUT type="text" readonly>
説明 ： 読み出し専用にする。
表記例 ： <INPUT type="text" value="読み出し専用" readonly>
表示例 ：

■ <INPUT type="text" size="...">
説明 ： サイズを設定する。デフォルトは 20。
表記例 ： <INPUT type="text" size="40">
表示例 ：

■ <INPUT type="text" value="...">
説明 ： 初期値を設定する。
表記例 ： <INPUT type="text" value="あいうえお">
表示例 ：


３．パスワード

■ <INPUT type="password">
説明 ： パスワード入力フィールドを表示する。
表記例 ： <INPUT type="password">
表示例 ：

■ <INPUT type="password" disabled>
説明 ： 使用不可能にする。
表記例 ： <INPUT type="password" value="12345678" disabled>
表示例 ：

■ <INPUT type="password" maxlength="...">
説明 ： 最大入力文字数を設定する。
表記例 ： <INPUT type="password" maxlength="6">
表示例 ：

■ <INPUT type="password" readonly>
説明 ： 読み出し専用にする。
表記例 ： <INPUT type="password" value="12345678" readonly>
表示例 ：

■ <INPUT type="passwordt" size="...">
説明 ： サイズを設定する。デフォルトは 20。
表記例 ： <INPUT type="password" size="40">
表示例 ：

■ <INPUT type="password" value="...">
説明 ： 初期値を設定する。
表記例 ： <INPUT type="password" value="12345678">
表示例 ：


４．ファイル

■ <INPUT type="file">
説明 ： ファイル名入力フィールドを表示する。
ブラウザからサーバーへファイルをアップロードするためのもの。セキュリティのため、初期値を設定することはできない。
表記例 ： <INPUT type="file">
表示例 ：

■ <INPUT type="file" disabled>
説明 ： 使用不可能にする。
表記例 ： <INPUT type="file" disabled>
表示例 ：

■ <INPUT type="file" maxlength="...">
説明 ： 最大入力文字数を設定する。
表記例 ： <INPUT type="file" maxlength="6">
表示例 ：

■ <INPUT type="file" size="...">
説明 ： サイズを設定する。デフォルトは 20。
表記例 ： <INPUT type="file" size="40">
表示例 ：


５．チェックボックス

■ <INPUT type="checkbox">
説明 ： チェックボックスを表示する。
表記例 ： <INPUT type="checkbox">
表示例 ：

■ <INPUT type="checkbox" checked>
説明 ： 選択の状態にする。
表記例 ： <INPUT type="checkbox" checked>
表示例 ：

■ <INPUT type="checkbox" disabled>
説明 ： 使用不可能にする。
表記例 ： <INPUT type="checkbox" disabled>
<INPUT type="checkbox" disabled checked>
表示例 ： 　

■ <INPUT type="checkbox" value="...">
説明 ： チェックされた時の値を設定する。チェックされていない時の値は "" となる。
表記例 ： <INPUT type="checkbox" value="1">

■ チェックボックスの項目名
説明 ： 項目名の表示は<INPUT>タグとは関係ない。<INPUT>タグの前や後に文字列を記述する。
表記例１ ： 前<INPUT type="checkbox">後
表示例１ ： 前後
表記例２ ： <INPUT type="checkbox" name="c1" value="on" checked>項目１
<INPUT type="checkbox" name="c2" value="on">項目２
表記例２ ： 項目１項目２

.

６．ラジオボタン

■ <INPUT type="radio">
説明 ： ラジオボタンを表示する。
表記例 ： <INPUT type="radio">
表示例 ：

■ <INPUT type="radio" checked>>
説明 ： 選択の状態にする。
表記例 ： <INPUT type="radio" checked>
表示例 ：

■ <INPUT type="radio" disabled>
説明 ： 使用不可能にする。
表記例 ： <INPUT type="radio" name="r1" disabled>
<INPUT type="radio" name="r1" disabled checked>
表示例 ： 　

■ <INPUT type="radio" value="...">
説明 ： チェックされた時の値を設定する。チェックされていない時の値は "" となる。
表記例 ： <INPUT type="radio" value="1">

■ ラジオボタンの項目名
説明 ： 項目名の表示は<INPUT>タグとは関係ない。<INPUT>タグの前や後に文字列を記述する。
表記例１ ： 前<INPUT type="radio">後
表示例１ ： 前後
表記例２ ： <INPUT type="radio" name="c1" value="on" checked>項目１
<INPUT type="radio" name="c2" value="on">項目２
表示例２ ： 項目１項目２


７．隠しフィールド

■ <INPUT type="hidden">
説明 ： 隠しフィールドを挿入する。裏で何かをやるためのもの。何も表示されない。
表記例 ： <INPUT type="hidden">

■ <INPUT type="hidden" value="...">
説明 ： 初期値を設定する。
表記例 ： <INPUT type="hidden" value="1">


８．実行ボタン

■ <INPUT type="submit">
説明 ： 実行ボタンを表示する。
<form>タグのaction属性で指定したアクションが呼び出される。
※IEでは「クエリ送信」、NNでは「クエリーの実行」と表示されている。
表記例 ： <INPUT type="submit">
表示例 ：

■ <INPUT type="submit" disabled>
説明 ： 使用不可能にする。
表記例 ： <INPUT type="submit" disabled>
表示例 ：

■ <INPUT type="submit" value="...">
説明 ： 表示文字列を設定する。
表記例 ： <INPUT type="submit" value="実行します">
表示例 ：


９．取消ボタン

■ <INPUT type="reset">
説明 ： 取消ボタンを表示する。
それまでに入力した情報をすべてキャンセルして、最初から入力をやり直す。
※IE、NN共に「リセット」と表示されている。
表記例 ： <INPUT type="reset">
表示例 ：

■ <INPUT type="reset" disabled>
説明 ： 使用不可能にする。
表記例 ： <INPUT type="reset" disabled>
表示例 ：

■ <INPUT type="reset" value="...">
説明 ： 表示文字列を設定する。
表記例 ： <INPUT type="reset" value="取り消します">
表示例 ：


１０．汎用ボタン

■ <INPUT type="button">
説明 ： 汎用ボタンを表示する。
Javascriptなどで使用する。
表記例 ： <INPUT type="button">
表示例 ：

■ <INPUT type="button" disabled>
説明 ： 使用不可能にする。
表記例 ： <INPUT type="button" value="汎用ボタン" disabled>
表示例 ：

■ <INPUT type="button" value="...">
説明 ： 表示文字列を設定する。
表記例 ： <INPUT type="button" value="転送します">
表示例 ：


１１．画像ボタン

■ <INPUT type="image" src="...">
説明 ： 画像ボタンを表示する。
src はURL。
表記例 ： <INPUT type="image" src="jimring.jpg">
表示例 ：

■ <INPUT type="image" align="...">
説明 ： 表示位置を指定する。
： <INPUT type="image" align="top"> ： テキストや画像の上端にボタンの上端を合わせる。
<INPUT type="image" align="texttop"> ： [IE]topと同じ。
[NN]通常の大きさのテキストの上端にボタンの上端を合わせる。画像やフォントサイズは無視される。
<INPUT type="image" align="absmiddle"> ： テキストや画像の中央にフレームの中央を合わせる。
<INPUT type="image" align="middle"> ： [IE]absmiddleと同じ。
[NN]テキストのベースライン（Mの字の下端）にボタンの中央を合わせる。
<INPUT type="image" align="center"> ： middleと同じ。
<INPUT type="image" align="baseline"> ： テキストのベースライン（Mの字の下端）にボタンの下端を合わせる。
<INPUT type="image" align="absbottom"> ： テキストの下端にボタンの下端を合わせる。
<INPUT type="image" align="bottom"> ： baselineと同じ。（デフォルト）
<INPUT type="image" align="left"> ： 左端に表示する。周りにテキストが回り込むようになる。回り込みを解除するには<BR>のclear属性を使用する。
<INPUT type="image" align="right"> ： 右端に表示する。周りにテキストが回り込むようになる。回り込みを解除するには<BR>のclear属性を使用する。
表記例 ： <INPUT type="image" src="jimring.jpg" align="top">
表示例：

align="top"

align="texttop"

align="absmiddle"

align="middle"

align="center"

align="baseline"

align="absbottom"

align="bottom"

align="left"

align="right"

■ <INPUT type="image">
説明 ： 枠線の太さを指定する。
表記例 ： <INPUT type="image" src="jimring.jpg" border="10">
表示例 ：

■ <INPUT type="image" disabled>
説明 ： 使用不可能にする。
表記例 ： <INPUT type="image" src="jimring.jpg" disabled>
表示例 ：

■ <INPUT type="image" height="...">
説明 ： 高さを指定する。ピクセル値。
同時にwidthを指定しないと縦横の比率が同じになる。
表記例 ： <INPUT type="image" src="jimring.jpg" height="100">
<INPUT type="image" src="jimring.jpg" height="100" width="50">
表示例 ： 　

■ <INPUT type="image" width="...">
説明 ： 横幅を指定する。ピクセル値。
同時にheightを指定しないと縦横の比率が同じになる。
表記例 ： <INPUT type="image" src="jimring.jpg" width="100">
<INPUT type="image" src="jimring.jpg" width="100" height="50">
表示例 ： 　


１２．選択ボックス

■ <SELECT>〜</SELECT>
■ <OPTION>
説明 ： 選択ボッックスを表示する。
<SELECT>〜</SELECT>の中に<OPTION>を記述する。
表記例 ： <SELECT>
　<OPTION>Windows
　<OPTION>Mac
　<OPTION>その他
</SELECT>
表示例 ：

■ <SELECT align="...">
説明 ： 表示位置を指定する。
<SELECT align="top"> ： テキストや画像の上端に選択ボッックスの上端を合わせる。
<SELECT align="texttop"> ： [IE]topと同じ。
[NN]通常の大きさのテキストの上端に選択ボッックスの上端を合わせる。画像やフォントサイズは無視される。
<SELECT align="absmiddle"> ： テキストや画像の中央に選択ボッックスの中央を合わせる。
<SELECT align="middle"> ： [IE]absmiddleと同じ。
[NN]テキストのベースライン（Mの字の下端）に選択ボッックスの中央を合わせる。
<SELECT align="center"> ： [IE]横方向で中央に表示する。
[NN]middleと同じ。
<SELECT align="baseline"> ： テキストのベースライン（Mの字の下端）に選択ボッックスの下端を合わせる。
<SELECT align="absbottom"> ： テキストの下端に選択ボッックスの下端を合わせる。
<SELECT align="bottom"> ： baselineと同じ。
<SELECT align="left"> ： 左端に表示する。周りにテキストが回り込むようになる。回り込みを解除するには<BR>のclear属性を使用する。
<SELECT align="right"> ： 右端に表示する。周りにテキストが回り込むようになる。回り込みを解除するには<BR>のclear属性を使用する。
表記例 ： <SELECT align="top">
　<OPTION>Windows
　<OPTION>Mac
　<OPTION>その他
</SELECT>
表示例：

align="top"

align="texttop"

align="absmiddle"

align="middle"

align="center"

align="baseline"

align="absbottom"

align="bottom"

align="left"

align="right"

■ <SELECT disabled>
説明 ： 使用不可能にする。
表記例 ： <SELECT disabled>
　<OPTION>Windows
　<OPTION>Mac
　<OPTION>その他
</SELECT>
表示例 ：

■ <SELECT multiple>
説明 ： 複数選択を可能にする。
表記例 ： <SELECT multiple>
　<OPTION>Windows
　<OPTION>Mac
　<OPTION>その他
</SELECT>
表示例 ：

■ <SELECT size="...">
説明 ： 表示行数を設定する。
表記例 ： <SELECT size="2">
　<OPTION>Windows
　<OPTION>Mac
　<OPTION>その他
</SELECT>
表示例 ：

■ <OPTION selected>
説明 ： 選択の状態にする。
表記例 ： <SELECT>
　<OPTION>Windows
　<OPTION selected>Mac
　<OPTION>その他
</SELECT>
表示例 ：

■ <OPTION value="...">
説明 ： 値を設定する。
表記例 ： <SELECT>
　<OPTION value="win">Windows
　<OPTION value="mac">Mac
　<OPTION value="other">その他
</SELECT>

■ <OPTGROUP label="...">
説明 ： オプションをグループ化する。
label が太字の斜体で表示される。
表記例 ： <SELECT>
　<OPTGROUP label="IE">
　　<OPTION>IE4
　　<OPTION>IE5
　　<OPTION>IE6
　</OPTGROUP>
　<OPTGROUP label="NN">
　　<OPTION>NN4
　　<OPTION>NN6
　</OPTGROUP>
</SELECT>
表示例 ：


１３．テキストエリア

■ <TEXTAREA>〜</TEXTAREA>
説明 ： テキスト入力フィールドを表示する。複数行の入力が可能。
表記例 ： <TEXTAREA></TEXTAREA>
表示例 ：

■ <TEXTAREA cols="...">
説明 ： 横幅を指定する。
表記例 ： <TEXTAREA cols="10"></TEXTAREA>
表示例 ：

■ <TEXTAREA disabled>
説明 ： 使用不可能にする。
表記例 ： <TEXTAREA disabled>あいうえお</TEXTAREA>
表示例 ：

■ <TEXTAREA readonly>
説明 ： 読み出し専用にする。
表記例 ： <TEXTAREA readonly>あいうえお</TEXTAREA>
表示例 ：

■ <TEXTAREA rows="...">
説明 ： 行数を指定する。
表記例 ： <TEXTAREA rows="4"></TEXTAREA>
表示例 ：

■ <TEXTAREA wrap="...">
説明 ： 自動改行の設定をする。
<TEXTAREA wrap="off"></TEXTAREA> ： 自動改行しない。
スクロールバーが表示される。
<TEXTAREA wrap="hard"></TEXTAREA> ： 自動改行する。
送信も自動改行される。
</TEXTAREA> ： 自動改行する。
送信は自動改行されない。
表記例 ： <TEXTAREA wrap="off">あいうえお・・・</TEXTAREA>
表示例 ：

■ テキストエリアの初期値
説明 ： <TEXTAREA>〜</TEXTAREA>の中に記述する。
表記例 ： <TEXTAREA>あいうえおかきくけこ</TEXTAREA>
表示例 ：


１４．部品のグループ化

■ <FIELDSET>
説明 ： フォームの入力部品をグループ化する。
表記例 ： <FIELDSET>
項目１<INPUT type="text"><BR>
項目２<INPUT type="text">
</FIELDSET>
<FIELDSET>
項目３<INPUT type="text"><BR>
項目４<INPUT type="text">
</FIELDSET>
表示例 ：
項目１
項目２
項目３
項目４

■ <LEGEND>〜<LEGEND>
説明 ： <FIELDSET>でグループ化した入力部品にタイトルを付ける。
表記例 ： <FIELDSET>
<LEGEND>グループ１</LEGEND>
項目１<INPUT type="text"><BR>
項目２<INPUT type="text">
</FIELDSET>
<FIELDSET>
<LEGEND>グループ２</LEGEND>
項目３<INPUT type="text"><BR>
項目４<INPUT type="text">
</FIELDSET>
表示例 ：
グループ１ 項目１
項目２
グループ２ 項目３
項目４

１５．ラベル

■ <LABEL>
説明 ： フォーム部品とラベルを関係付ける。
ラベルをクリックすることができたり、アクセスキーを指定できたりする。
accesskey="..."：ALT+...キー。
for="..."：フォーム部品のIIDを指定する。
表記例 ： <FORM action="mailto:jimita@capella.freemail.ne.jp?Subject=YES_NO" method="POST" enctype="text/plain">
<INPUT type="radio" name="YES_NO" id="id1" value="yes" checked>
<LABEL accesskey="Y" for="id1">はい(<u>Y</u>)</label>
<INPUT type="radio" name="YES_NO" id="id2" value="no">
<LABEL accesskey="N" for="id2">いいえ(<u>N</u>)</label>
<INPUT type="submit" value="送信">
</FORM>
表示例 ：