フォームの例

　フォームの範囲指定　<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= 入力フィールドのデフォルト値。あらかじめ予想される値などを書いておく。 

入力欄１：<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="flower.jpg" align=middle>
送信はここをクリック→
リセットボタン type=reset 関連の属性
type=reset リセットボタン。 入力したフォームのデータをリセットする。
value= ボタンに表示する文字列。 
<input type=reset value="取り消し">


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

SELECT メニュー タグと属性
<select>
</select> 		name= 選択メニューの名称（必須）
size= 一覧式メニューにする場合の表示行数。
multiple 項目を複数選択できるようにする。
<option> selected デフォルトで選択される項目を設定
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=tbox2 rows=3 cols=50 wrap=hard>
あらかじめ文字を入れておくことができます。
</textarea>

戻る