送信フォーム

▼アンケートや感想などの送信フォームを作ってみよう。

よくある送信フォームの原型を作ってみましょう。
この場合、テーブルも使用するといい感じのフォームが出来上がりますね。
単純な送信フォームのサンプルを紹介します。（センスは別として・・・苦笑）
※動作はしませんので、送信はしないようにしてください。（６のみ動作します）
※うまく動作させるためには、やはりCGIとの連動がいいと思われます。

●サンプルはこちら

　　　　◆サンプルソース

　　　　　　　　　　　　　　　<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <TITLE></TITLE> </HEAD> <BODY>　　　　　　　　　　　　<B><FONT size="+1">送信フォーム</FONT></B> <P><BR> </P> <FORM METHOD="POST" ACTION="mailto:ransnet@dyn.jp" ENCTYPE="multipart/form-data"> NAME　　　　　　　　　<INPUT size="25" type="text" name="sub2" maxlength="25"><BR> 　　　　　　E-MAIL　 <INPUT size="40" type="text" name="email1" maxlength="40"><BR> 　　　　　 HP/URL　 <INPUT size="40" type="text" name="url1" value="http://" maxlength="40"><BR> 　　　　　　<FONT size="-1">ご意見・ご感想などお寄せください。（1000文字以内）</FONT><BR> 　　<TEXTAREA rows="10" cols="50" name="form3"></TEXTAREA><BR> 　　　　　　　　　　 <INPUT TYPE="SUBMIT" name="sub2" value="SUBMIT">　 <INPUT TYPE="RESET" name="reset2" value="RESET"></FORM> </BODY> </HTML>
　　　　　※いたって普通のフォームですね。

●サンプル２はこちら

　　　　◆サンプル２ソース

　　　　　　　　　　　　　　　<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <TITLE>SAMPLE FORM</TITLE> <style type="text/css">  </style> </HEAD> <BODY>　　　　　　　　　　　　　　　　　　　　<B><FONT size="+1">送信フォーム</FONT></B> <P><BR> </P> <FORM METHOD="POST" ACTION="mailto:ransnet@dyn.jp" ENCTYPE="multipart/form-data"> 　　　　おなまえ　　　　　　　　　　　　 <INPUT size="25" type="text" name="sub2" maxlength="25" class="inp1"><BR> 　　　　　　　　　　Ｅめーる　　　 <INPUT size="40" type="text" name="email1" maxlength="40" class="inp1"><BR> 　　　　　　　　　ほーむぺーじ　 <INPUT size="40" type="text" name="url1" value="http://" maxlength="40" class="inp1"><BR> 　　　　　　　　<FONT size="-1">どんなことでも書いて送ってね♪。（1000文字以内）</FONT><BR> 　　<TEXTAREA rows="10" cols="50" name="form3" class="inp1"></TEXTAREA><BR> 　　　　　　　　　　　　　 <INPUT TYPE="SUBMIT" name="sub2" value="送っちゃえ！">　 <INPUT TYPE="RESET" name="reset2" value="書き直す？"></FORM> </BODY> </HTML>
　　　　　※上のフォームにスタイルシートで少しだけ変更したものです。

●サンプル３はこちら

　　　　◆サンプル３ソース

　　　　　　　　　　　　　　　<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <TITLE>SAMPLE FORM</TITLE> <style type="text/css">  </style> </HEAD> <BODY>　　　　　　　　　　　　　　　　　　　　<B><FONT size="+1">送信フォーム</FONT></B> <P><BR> </P> <FORM METHOD="POST" ACTION="mailto:ransnet@dyn.jp" ENCTYPE="multipart/form-data"> 　　　　おなまえ　　　　　　　　　　　　 <INPUT size="25" type="text" name="sub2" maxlength="25" class="inp1"><BR> 　　　　　　　　　　Ｅめーる　　　 <INPUT size="40" type="text" name="email1" maxlength="40" class="inp1"><BR> 　　　　　　　　　ほーむぺーじ　 <INPUT size="40" type="text" name="url1" value="http://" maxlength="40" class="inp1"><BR> 　　　　　　　　<FONT size="-1">どんなことでも書いて送ってね♪。（1000文字以内）</FONT><BR> 　　<TEXTAREA rows="10" cols="50" name="form3" class="inp1"></TEXTAREA><BR> 　　　　　　　　　　　　　 <INPUT TYPE="SUBMIT" name="sub2" value="送っちゃえ！">　 <INPUT TYPE="RESET" name="reset2" value="書き直す？"></FORM> </BODY> </HTML>
　　　　　※ボーダー種を点線（dashed）に変更してみました。（いい感じ？）

●サンプル４はこちら

　　　　◆サンプル４ソース

　　　　　　　　　　　　　　　<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <TITLE>SAMPLE FORM</TITLE> <style type="text/css">  </style> </HEAD> <BODY>　　　　　　　　　　　　　　　　　　　<B><FONT size="+1">おくりまっしゅ♪</FONT></B> <P><BR> </P> <FORM METHOD="POST" ACTION="mailto:ransnet@dyn.jp" ENCTYPE="multipart/form-data"> 　　　　おなまえ　　　　　　　　　　　　 <INPUT size="25" type="text" name="sub2" maxlength="25" class="inp1"><BR> 　　　　　　　　　　Ｅめーる　　　 <INPUT size="40" type="text" name="email1" maxlength="40" class="inp1"><BR> 　　　　　　　　　ほーむぺーじ　 <INPUT size="40" type="text" name="url1" value="http://" maxlength="40" class="inp1"><BR> 　　　　　　　　<FONT size="-1">どんなことでも書いて送ってね♪。（1000文字以内）</FONT><BR> 　　<TEXTAREA rows="10" cols="50" name="form3" class="inp1"></TEXTAREA><BR> 　　　　　　　　　　　　　 <INPUT TYPE="SUBMIT" name="sub2" value="送っちゃえ！">　 <INPUT TYPE="RESET" name="reset2" value="書き直す？"></FORM> </BODY> </HTML>
　　　　　※ボーダーを（double）に設定してみました。（これも可愛い感じかな？）

●サンプル５はこちら

　　　　◆サンプル５ソース

　　　　　　　　　　　　　　　<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <TITLE>SAMPLE FORM</TITLE> <style type="text/css">  </style> </HEAD> <BODY>　　　　　　　　　　　　　　　　　　　　<B><FONT size="+1">送信フォーム</FONT></B> <P><BR> </P> <FORM METHOD="POST" ACTION="mailto:ransnet@dyn.jp" ENCTYPE="multipart/form-data"> 　　　　おなまえ　　　　　　　　　　　　 <DIV align="center" style="border:1; border-color:#00bfff; border-style:dashed; width:145; height:22; position:absolute; top : 82px; left : 222px; "><INPUT size="25" type="text" name="sub2" maxlength="25" class="inp1"></DIV><BR> 　　　　　　　　　　Ｅめーる　　　 <DIV align="center" style="border:1; border-color:#00bfff; border-style:dashed; width:220; height:22; position:absolute; top : 109px; left : 148px; "><INPUT size="40" type="text" name="sub2" maxlength="40" class="inp1"></DIV><BR> 　　　　　　　　　ほーむぺーじ　 <DIV align="center" style="border:1; border-color:#00bfff; border-style:dashed; width:220; height:22; position:absolute; top : 134px; left : 148px; "><INPUT size="40" type="text" name="sub2" value="http://" maxlength="40" class="inp1"></DIV><BR> 　　　　　　　　<FONT size="-1">どんなことでも書いて送ってね♪。（1000文字以内）</FONT><BR> 　　<DIV align="center" style="border:1; border-color:#00bfff; border-style:dashed; width:377; height:148; position:absolute; top : 181px; left : 17px; "><TEXTAREA rows="10" cols="50" name="sub2" class="inp1"></TEXTAREA></DIV><BR><BR><BR> 　　　　　　　　　　　　　 <DIV style="width:200;position:absolute; top : 336px; left : 102px; "><INPUT TYPE="SUBMIT" name="sub2" value="送っちゃえ！"> <INPUT TYPE="RESET" name="sub2" value="書き直す？"></DIV></FORM> </BODY> </HTML>
　　　　　※何気にちょっと複雑にしちゃいました。(笑)

●サンプル６はこちら

　　　　◆サンプル６のソース

　　　　　　　　　　　　　　　<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <TITLE></TITLE> <style type="text/css">  </style> </HEAD> <BODY> <DIV style="position:absolute; background-color:#696969; color:#ffffff; width:400; height:50; text-align:center; top : 11px; left : 53px; "><BR> <B>送ってちょんまげ！</B></DIV> <BR><BR><FORM METHOD="POST" ACTION="mailto:ransnet@dyn,jp"> <TABLE> <TBODY> <TR> <TD colspan="4" height="30"></TD> </TR> <TR> <TD width="72"></TD> <TD>　　　おなまえ</TD> <TD colspan="2" align="left" height="22"> <INPUT size="25" type="text" name="name5" maxlength="20" tabindex="1"> </TD> </TR> <TR> <TD width="72"></TD> <TD>　　　いーめーる</TD> <TD colspan="2" height="22"> <INPUT size="40" type="text" name="em1" maxlength="40" tabindex="2"> </TD> </TR> <TR> <TD width="72"></TD> <TD>　　　あどれす</TD> <TD colspan="2"> <INPUT size="40" type="text" name="ad1" maxlength="40" tabindex="3"> </TD> </TR> <TR> <TD colspan="4" height="29" align="center">　　なんでも書いて送ってくださいね～！（1000文字以内でね）</TD> </TR> <TR> <TD colspan="4" align="center"> <TEXTAREA rows="10" cols="50" tabindex="4"></TEXTAREA> </TD> </TR> <TR> <TD width="72"></TD> <TD colspan="2" width="112" align="right"><INPUT TYPE="SUBMIT" VALUE="送るぢぇ！" tabindex="5"></TD> <TD width="198"> 　　　　　　　　　<INPUT TYPE="RESET" VALUE="書き直す？"></TD> </TR> </TBODY> </TABLE> </FORM> </BODY> </HTML>
　　　　　※これはテーブルを使用してみました。（ボーダーは太めのダッシュです）

とりあえず、６つのサンプルを用意してみましたが、バリエーションは限りなくあると思いますので、自分で考えて作ってみるのも一興ですね。
何も他人の考えたものをそのまま使うことはないんですからね。
考えて・作って・いいものが出来上がった時の喜びや感動がいいですね。
あなたも「モノ作りの喜び組」になろう！みたいな・・・(爆)