フォームについて

■入力欄を作る

ブラウザ上でアンケートやコメントを収集に利用される、書き込みができる場所をフォームと呼びます。
実際に使うにはCGIなどが必要になります。たいていのプロバイダーや、無料で使用できる所ではすでに用意されています。

SOURSE

<HTML>
<HEAD>
<TITLE>フォームについて</TITLE>
</HEAD>
<BODY>
<FORM>
ここにフォームの内容を書きます。
</FORM>
 </BODY>
</HTML>

■入力欄やボタンを設置する

 テキストの入力欄や、送信ボタンリセットボタンなどを設置するタグです。
<FOMR>タグを使ってもこちらのタグを使わなければブラウザーには何も表示されません。

<INPUT TYPE="★"☆>

SOURSE

<HTML>
<HEAD>
<TITLE>フォームについて</TITLE>
</HEAD>
<BODY>
<FORM>
名前：<INPUT TYPE="text" SIZE="20" NAME="name">

ID：<INPUT TYPE="text" SIZE="20" VALUE="simaz-" MAXLENGHT="10" NAME="id">

パスワード：<INPUT TYPE="password" SIZE="20" NAME="pass">

性別：<INPUT TYPE="radio" CHECKED NAME="seibetu" VALUE="男">
<INPUT TYPE="radio" NAME="seibetu" VALUE="女">
性別：男 女

趣味：（複数選択可）
<INPUT TYPE="checkbox" NAME="hobby" VALUE="パソコン">
<INPUT TYPE="checkbox" NAME="hobby" VALUE="ゲーム">
<INPUT TYPE="checkbox" NAME="hobby" VALUE="映画を見る">
<INPUT TYPE="checkbox" NAME="hobby" VALUE="買い物">
<INPUT TYPE="checkbox" NAME="hobby" VALUE="その他">
趣味：（複数選択可）
パソコン ゲーム 映画を見る 買い物 その他

リセットボタン
<INPUT TYPE="reset">
<INPUT TYPE="reset" VALUE="やり直し">

転送ボタン
<INPUT TYPE="submit">
<INPUT TYPE="submit" VALUE="登録">
<INPUT TYPE="submit" NAME="a" VALUE="Ａへ転送">
<INPUT TYPE="submit" NAME="b" VALUE="Ｂへ転送">
<INPUT TYPE="submit" NAME="c" VALUE="Ｃへ転送">

</FORM>
 </BODY>
</HTML>

■複数行テキスト入力欄を作る

 長い文章を入力するフィールドを設置します。
使い方はご意見、ご要望などといったところか。

<TEXTAREA ★<

SOURSE

<HTML>
<HEAD>
<TITLE>フォームについて</TITLE>
</HEAD>
<BODY>
<FORM>
<TEXTAREA NAME="message">
</TEXTAREA>
デフォルト

縦、横指定。
<TEXTAREA ROWS="8" COLS="40" NAME="message1">
ここにメッセージを入力して下さい。
</TEXTAREA>

<TEXTAREA ROWS="8" COLS="40" NAME="message2" wrap="hard">
</TEXTAREA>

<TEXTAREA ROWS="8" COLS="40" NAME="message3" wrap="off">
</TEXTAREA>

</FORM>
 </BODY>
</HTML>

■選択メニューを作る

 プルダウン（ポップアップ形式）の選択欄を作ります。
JAVAスクリプトなどを使えばこれでURLを移動できたりします

SOURSE

<HTML>
<HEAD>
<TITLE>フォームについて</TITLE>
</HEAD>
<BODY>
<FORM>
<SELECT NAME="busyo">
<OPTION VALUE="takeda-singen">武田信玄
<OPTION VALUE="houjo-ujiyasu">北条氏康
<OPTION VALUE="uesugi-kensin">上杉謙信
</SELECT>

最初に選択されている項目を変える。
<SELECT NAME="busyo">
<OPTION VALUE="takeda-singen">武田信玄
<OPTION SELECTED VALUE="houjo-ujiyasu">北条氏康
<OPTION VALUE="uesugi-kensin">上杉謙信
</SELECT>

</FORM>

 </BODY>
</HTML>

■選択メニューをフィールドで表示する。

 <SELECT NAME>は一つしか選択できませんが、<SELECT SIZE>だと複数選択できます。

SOURSE

<HTML>
<HEAD>
<TITLE>フォームについて</TITLE>
</HEAD>
<BODY>
<FORM>
<SELECT NAME="busyo1" SIZE="3">
<OPTION>武田信玄
<OPTION SELECTED>北条氏康
<OPTION>上杉謙信
<OPTION>村上義清
<OPTION>里見義尭
</SELECT>
<SELECT NAME="busyo2" SIZE="5" MULTIPLE>
<OPTION>武田信玄
<OPTION SELECTED>北条氏康
<OPTION>上杉謙信
<OPTION>村上義清
<OPTION>里見義尭
</SELECT>
</FORM>
 </BODY>
</HTML>

■フォームを送信する。

 フォームで作成したものを実際に送信するタグです。
メールアドレス、CGIスクリプトを用意しなければなりません。

SOURSE

<HTML>
<HEAD>
<TITLE>フォームについて</TITLE>
</HEAD>
<BODY>
メールアドレスを書きます。
<FORM ACTION="mailto:simaz@horse.interq.or.jp" METHOD="POST">
ここにフォームの内容を書きます。
</FORM>

<FORM ACTION="CGIスクリプトのパス" METHOD="POST">
ここにフォームの内容を書きます。
</FORM>
 </BODY>
</HTML>

■ファイルをアップロードする。

 サーバ側にファイルをアップロードする時に使います。
実際にアップロードするにはCGIスクリプトが必要になります。

SOURSE

<HTML>
<HEAD>
<TITLE>フォームについて</TITLE>
</HEAD>
<BODY>
<FORM ENCTYPE="multipart/form-date" ACTION="CGIスクリプトのパス" METHOD="POST">
<INPUT TYPE="file">
</FORM>
 </BODY>
</HTML>