フォームの例

 フォームの範囲指定 <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>タグの属性 

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

入力欄1:<input name="box1"><br>
入力欄2:<input name="box2" size=30><br>
入力欄3:<input name="box3" size=10 value="Your name"><br>
入力欄4:<input name="box4" size=5 maxlength=4><br>
入力欄1:
入力欄2:
入力欄3:
入力欄4:

パスワード入力ボックス 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 ラジオボタン。同名のラジオボタンの項目から1つだけ選択可能。
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">A型
<option value="O">O型
<option value="B">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>


戻る