POPFAM.JPフォームを作る　無料サンプル　コピーペースト

フォームを作りましょう

表紙に戻る

フォームを作る時に知っておきましょう

text1行テキストボックスをつくります。通常のテキストを入力するフィールドです。
password　パスワード入力ボックスをつくります。
入力したテキストがアスタリスク（*）などに置き換えて表示されます。
checkbox チェックボックスをつくります。チェックボックスは複数選択が可能です。
radioラジオボタンをつくります。
複数の中から一つしか選択できない点がチェックボックスと異なります。
submit　送信ボタンをつくります。
reset　　リセットボタンをつくります。
このボタンを押すと、それまでに入力した情報を初期状態に戻します。
button 　汎用ボタンをつくります。
image　　画像のボタンをつくります。
使用する画像ファイルはsrc属性で指定してください。
width=** 横幅（数値してい；ピクセル）
height=** 縦幅（数値してい；ピクセル）
上記のタグは指定するときに使います。
省略が可能ですが、指定無しの場合は、自動調整となってしまいますので、指定することをオススメします
border=*　　オブジェクト周囲の囲い枠　[ 0 ]なら枠はありません
[　" ]の記号は省略可能です

入力フォームを作りましょう

<form action="送信先" method="送信方法">フォーム内容</form>

送信方法　：　get　、post　がありますが、ここでは　post　を選びます
　post　；　大量のデータを送信できます

フォームの内容；入力欄を作る

入力タイプ	text 普通の文字列の入力用に指定 password パスワードの入力用に指定「＊」「●」で表示
幅	入力欄の幅を指定
初期値	入力欄に入力しておく文字を指定
最大文字数	入力時に記入出来る文字数を指定
変数名	入力された内容を識別するための名前を指定

複数行の入力欄を作る

<textarea name="変数名" row="行数" cols="幅" wrap="改行方法">
文字列
</textarea>

●改行方法
soft　入力欄の右端で改行され、送信データには改行は入りません
hard　入力欄の右端で改行され、送信データには改行は入ります
off　　入力欄の右端で改行されません
改行方法を省略すると、「soft」が自動的に指定されます

ラジオボタンを作る　　チェックボックスを作る

<input type="radio" value="値" name="変数名">文字列
<input type="checkbox" value="値" name="変数名">文字列

<input type="ボタンの種類" value="値" name="変数名" checked>文字列
checkedを入れると、あらかじめ選択された状態で表示されます
value値は、選択されたときに送信されてくる内容になります
nameは、グループを作るときに指定します
value、nameは、設問アンケートなど項目に分けることが出来ます

プルダウンメニューを作る

<SELECT name="変数名">　　　　　変数名は識別するための名前を記入します
<OPTION>選択項目</OPTION>　　←この部分を繰り返してください
</SELECT>

<SELECT name="変数名" size="行数">
　size　を設定すると行数を指定します　（関連；リストボックスを作る）
<option value="値">・</option>
　value　を省略すると選択項目が値になります
<option value="値" selected>・</option>
　selected　を入れるとあらかじめ選択された表示項目となります

●プルダウンメニューのグループ化します
<SELECT name="変数名">　　　　　変数名は識別するための名前を記入します
<optgroup lebel="グループ名"></optgroup>
<OPTION>選択項目</OPTION>　　←この部分を繰り返してください
</SELECT>

リストボックスを作る

<SELECT size="表示行数" name="変数名">
<OPTION>選択項目</OPTION>　　←この部分を繰り返してください
</SELECT>

<SELECT size="表示行数" name="変数名" multiple>
　multiple　を指定すると複数の項目を選択できます
<SELECT name="変数名" size="行数">　を設定すると行数を指定します
<option value="値">・</option>
　value　を省略すると選択項目が値になります
<option value="値" selected>・</option>
　selected　を入れるとあらかじめ選択された表示項目となります

指定した表示行数よりも選択項目が多い場合はスクロールバーが表示されます

入力項目を枠線でグループ化する

<fieldset><legend>グループの名前</legend>グループ化するフォーム内容</fieldset>

●グループの中にグループを作る場合
　<fieldset>
　<legend>グループの名前</legend>グループ化するフォーム内容
　<fieldset>
　<legend>グループの名前</legend>グループ化するフォーム内容
　</fieldset>
　</fieldset>

ボタンを作る

●リセットボタンを作る　（ボタンタイプ；reset）
<input type="reset" value="ボタン名（ボタンに表示したい文字列）">

●送信ボタンを作る（ボタンタイプ；submit）
<input type="submit" value="ボタン名（ボタンに表示したい文字列）">

●書式、イメージボタンを使う
<button type="ボタンのタイプ">ボタン名</button>

　イメージボタンの場合
　　<button type="ボタンのタイプ"><img src="イメージＵＲＬ"></button>
　書式指定の場合
　　<button type="ボタンのタイプ"><font ・・・>文字列</font></button>

フォーム内容をメールで送信

<form action="mailto;メールアドレス" method="post">フォーム内容</form>

送信データのＭＩＭＥタイプを指定するとき
<form action="mailto;メールアドレス" method="post" enctype="text/plain">
フォーム内容</form>

enctype="text/plain"　を指定します

フォームサンプル

こちらはサンプルです。サンプル下に下記のＨＴＭＬがあります。
コピーペーストできますが、数値やアドレスなどはご自分で記入の上ご使用ください。
<form
action="mailto:メールアドレス"
method="POST" enctype="text/plain" name="mail">
<CENTER>
<TABLE>
<TBODY>
<TR>
<TD align="center" width="99"><FONT color="#808080" size="-1">ニックネーム</FONT></TD>
<TD width="281"><input type="text" size="30"
name="ニックネーム"
style="border:1 solid #c0c0c0;"></TD>
</TR>
<TR>
<TD align="center" width="99"><font color="#808080">サイト名</font></TD>
<TD width="280"><input type="text" size="45"
name="サイト名"
style="border:1 solid #c0c0c0;"></TD>
</TR>
<TR>
<TD align="center" width="99"><FONT color="#808080" size="-1">サイトアドレス</FONT></TD>
<TD width="281"><input type="text" size="45"
name="アドレス"
style="border:1 solid #c0c0c0;"></TD>
</TR>
<TR>
</TR>
<TR>
<TD align="center" width="99"><FONT color="#808080" size="-1">メールアドレス</FONT></TD>
<TD width="281"><input type="text" size="45"
name="メール"
style="border:1 solid #c0c0c0;"></TD>
</TR>
<TR>
<TD align="center" colspan="2"><font color="#808080">コメント100字以内</font><br>
<textarea name="サイト内容" rows="5" cols="40"
style="border:1 solid #c0c0c0;">
</textarea></TD>
</TR>
<TR>
<TD align="center" colspan="2"><input
type="submit" value="送信"
style="background:#FFFFFF;font-size:8pt;color:#808080;border:1 solid #c0c0c0;"><input
type="reset" name="mail" value="リセット"
style="background:#FFFFFF;font-size:8pt;color:#808080;border:1 solid #c0c0c0;"></TD>
</TR>
</TBODY>
</TABLE>
</CENTER>
</form>

あくまでもサンプルですので、変更は上記の詳細にで行ってください。
ＣＧＩなどは使用しておりませんので、アドレスが読み取られる場合もあるかと思いますのでフリーメールを使用することをおすすめします。
CGIについては、無料レンタルやプロバイダからも提供されていますのでご確認ください。