フォームの例

　フォームの範囲指定　<form>～</form>

<form>　の属性
action=	送信されたデータを処理するCGIプログラムのURLを記述する。 "mailto:メールアドレス" とするとデータをメールで受け取ることが可能。
method=	"POST" GETもあるが使わない。
enctype=	"multipart/form-data" データの文字コードをオリジナルに合わせて正しくエンコードしてくれる。省略するとASCIIコードで送信。


<form action="hoge.cgi" method="POST" enctype="multipart/form-data">
住所：<input name="jusho" size=40><br>
氏名：<input name="address" size=20><br>
<input type=submit value="送信">
<input type=reset  value="取消">
</form>

住所：
氏名：

　入力フィールド，ボタンの設定　<input>タグの属性　

１行テキスト入力フィールド type=text 関連の属性
type=text １行テキスト入力フィールド。デフォルトがこれなので省略可。
name= 入力フィールド名（必須）
size= 入力フィールドの長さをバイト単位で。デフォルトは 20。
maxlength= 入力できる最大文字数を指定する。
value= 入力フィールドのデフォルト値。あらかじめ予想される値などを書いておく。

１行テキスト入力フィールド type=text 関連の属性
type=text	１行テキスト入力フィールド。デフォルトがこれなので省略可。
name=	入力フィールド名（必須）
size=	入力フィールドの長さをバイト単位で。デフォルトは 20。
maxlength=	入力できる最大文字数を指定する。
value=	入力フィールドのデフォルト値。あらかじめ予想される値などを書いておく。

入力欄１：<input name="box1"><br>
入力欄２：<input name="box2" size=30><br>
入力欄３：<input name="box3" size=10 value="Your name"><br>
入力欄４：<input name="box4" size=5 maxlength=4><br>

入力欄１：
入力欄２：
入力欄３：
入力欄４：

パスワード入力ボックス type=password 関連の属性
type=password	パスワード入力ボックス。入力データは****のように伏字で表示される。
name=	パスワード入力ボックス名（必須）
size=	パスワード入力ボックスの長さをバイト単位で。デフォルトは 20。
maxlength=	入力できる最大文字数を指定する。
value=	デフォルト値を設定する。


パスワード：<input type=password name="passwd" size=10 maxlength=8><br>

パスワード：

チェックボックス type=checkbox 関連の属性
type=checkbox	チェックボックス。複数の項目を選択可能。
name=	チェックボックス名（必須）
value=	送信されるデータの内容を設定。
checked	デフォルトで選択される項目を設定。


<input type=checkbox name=check value="りんご">りんご　　
<input type=checkbox name=check value="いちご">いちご　　
<input type=checkbox name=check value="もも">もも　　
<input type=checkbox name=check value="なし">なし

りんご　　いちご　　もも　　なし

ラジオボタン type=radio 関連の属性
type=radio	ラジオボタン。同名のラジオボタンの項目から１つだけ選択可能。
name=	ラジオボタン名（必須）
value=	送信されるデータの内容を設定。
checked	デフォルトで選択される項目を設定。


<input type=radio name=yasai value="ほうれんそう">ほうれんそう　　
<input type=radio name=yasai value="だいこん">だいこん　　
<input type=radio name=yasai value="ねぎ" checked>ねぎ　　
<input type=radio name=yasai value="キャベツ">キャベツ

ほうれんそう　　だいこん　　ねぎ　　キャベツ

ファイル名入力フィールド type=file 関連の属性
type=file	ファイル名入力フィールド。フィールドの右に表示される「参照」ボタンでファイルを選択できるようになる。
name	ファイル名入力フィールド名（必須）
size	フィールドの長さをバイト単位で。デフォルトは 20。
maxlength	入力できる最大文字数を指定する。

ファイル名：<input type=file name="fname" size=30>

ファイル名：

送信ボタン type=submit 関連の属性
type=submit	送信ボタン。 <form action=～> での設定に基づいてデータが送信される。
name=	送信ボタン名
value=	ボタンに表示する文字列。

<input type=submit value="送信する">

グラフィカル送信ボタン type=image 関連の属性
type=image	グラフィカル送信ボタン。 <form action=～> での設定に基づいてデータが送信される。
src=	使用する画像のURL（必須）
name=	送信ボタン名
align=	画像とテキストの配置を指定。top, middle, bottom, left, right がある。詳細はイメージタグのalign 属性の解説を参照のこと。

送信はここをクリック→<input type=image src="dolfin.jpg" align=middle>

送信はここをクリック→

リセットボタン type=reset 関連の属性
type=reset	リセットボタン。入力したフォームのデータをリセットする。
value=	ボタンに表示する文字列。

<input type=reset value="取り消し">

　SELECT メニュー　<select>～</select>　

SELECT メニュータグと属性
<select> </select>	name=	選択メニューの名称（必須）
	size=	一覧式メニューにする場合の表示行数。
	multiple	項目を複数選択できるようにする。
<option>	selected	デフォルトで選択される項目を設定
<option>	value=	実際に送信されるデータを設定。省略時は項目名がそのまま送信される。

血液型：
<select name="bloodtype">
<option value="A">Ａ型
<option value="O">Ｏ型
<option value="B">Ｂ型
<option value="AB">AB型
</select>
<br>

血液型：

好きな果物：
<select name="fruits" size=4 multiple>
<option value="りんご">りんご
<option value="いちご">いちご
<option value="もも">もも
<option value="なし">なし
<option value="さくらんぼ">さくらんぼ
<option value="バナナ">バナナ
<option value="パイナップル">パイナップル
</select>

好きな果物：

※複数選択するときは Windows の場合 Ctrlキーを押しながらクリックします。

　テキスト入力ボックス　<textarea>～<textarea>　

<textarea> の属性
name= テキストボックス名（必須）
rows= 行数（必須）
cols= 横幅。バイト数（必須）
wrap= soft　テキストボックスの横幅に合わせて改行する。ただし，画面表示のみ。
hard　テキストボックスの横幅に合わせて改行し，送信時に改行コードを付ける。
off　改行しない。（デフォルト）

<textarea> の属性
name=	テキストボックス名（必須）
rows=	行数（必須）
cols=	横幅。バイト数（必須）
wrap=	soft　テキストボックスの横幅に合わせて改行する。ただし，画面表示のみ。
hard　テキストボックスの横幅に合わせて改行し，送信時に改行コードを付ける。
off　改行しない。（デフォルト）


<textarea name=tbox2 rows=3 cols=50 wrap=hard>
あらかじめ文字を入れておくことができます。
</textarea>

戻る