件名(Subject)の指定

入力エリア背景の指定

ボタンの指定

ボタンに画像を指定

iswebフォーム送信

foPage Top ▲

Form

<FORM>タグに関係するタグや属性についてのページです。

 

件名(Subject)の指定

<FORM>で送信されたメールは、デフォルトでは件名(Subject)が「Microsoft Internet Explorer から投稿されたフォーム」になります。Subjectを指定することで件名を変えることができます。

特殊文字の入力

空白
%20
カンマ
%2C
改行
%0D%0A

<form action="mailto:xxxxxx@isp.ne.jp?subject=FORM TITLE" method="post" enctype="text/plain">

 

入力エリア背景の指定

スタイルシートのBACKGROUNDで、テキストボックスや領域の背景色や画像を指定することができます。

<form action="mailto:xxxxxx@isp.ne.jp" method="post" enctype="text/plain">
<table border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td>Name </td>
        <td><input style="background-color: rgb(230,255,255);" type="text" name="Name" size="40" tabindex="1"></td>
    </tr>
    <tr>
        <td>Comment </td>
        <td><textarea style="background-image: url('../_images/back/bak_grid.gif');" name="Comment" rows="7" cols="40" tabindex="2"></textarea></td>
    </tr>
</table>
<p><input type="submit" value="送 信"name="send">
<input type="reset" value="リセット"name="reset"></p>

</form>

Name
Comment 

 

ボタンの指定

ボタンもスタイルシートのBACKGROUNDで、デザインを指定することができます。また、BORDERを指定すると、シャドウ部分を変更することができます。
またマウスイベント使用して、ボタンにマウスが触れた時の状態を変えることもできます。

<style>
<!--
input.button-1  { width: 80px; height: 24px;
                  background-color: rgb(255,153,102);
                  color: rgb(255,255,255);
                  border: 1px solid rgb(255,102,0);
                  cursor: hand; cursor: pointer; }
input.button-1b { width: 80px; height: 24px;
                  background-color: rgb(255,51,51);
                  color: rgb(255,255,255);
                  border: 1px solid rgb(255,102,0);
                  cursor: hand; cursor: pointer; }
input.button-2  { width: 80px; height: 24px;
                  background-color: rgb(51,102,204);
                  color: rgb(255,255,255);
                  border: 3px outset rgb(102,153,255);
                  cursor: hand; cursor: pointer; }
input.button-2b  { width: 80px; height: 24px;
                  background-color: rgb(0,51,153);
                  color: rgb(255,255,255);
                  border: 3px inset rgb(102,153,255);
                  cursor: hand; cursor: pointer; }
-->
</style>

 

<input class="button-1" onmouseover="this.className='button-1b'" onmouseout="this.className='button-1'" type="submit" value="送 信" name="B1">
<input class="button-2" onmouseover="this.className='button-2b'" onmouseout="this.className='button-2'" type="reset" value="リセット" name="B2">

</form>

 

 

ボタンに画像を指定

HTML 4.0に<BUTTON>タグが追加されました。
<INPUT TYPE="SUBMIT">など、ボタンに画像を指定しオリジナルのボタンを表示することができます。

<button type="submit" style="width: 72px; height: 38px; background-color: rgb(255,153,0);"><img src="icn_mail_64.gif" width="64" height="32"></button>

<style>
<!--
input.button { width: 72px; height: 38px;
               background-position: center;
               background-image: url('../images/sample/icn_mail_64.gif');
               background-repeat: no-repeat;
               background-color: rgb(255,153,0); }
-->
</style>

 

<input class="button" type="submit" name="b1" value=" ">

 

iswebでのフォーム送信

action="mailto:xxxxxx@isp.ne.jp"のフォームの場合、送信ボタンをクリックし てもデータは送信されません。フォームのデータは、一旦メールソフトの送信フォルダに置かれますから、実際の送信は、メールソフトで行います。
送信ボタンをクリックしてフォームのデータを送信させるには、CGIをサイトに組みこむかデコードサービスサイトを利用しなければなりません。
iswebの場合、CGIを自分で組み込まなくても送信させることができます。
まず、actionを「http://iswbmail.infoseek.co.jp/mail/form.cgi」にします。
送信後、他のページにリンクする場合、「name="thankyou"」でリンク先URLを絶対値で指定します。
また件名を指定する場合は、「name="Subject:"」で「value="件名"」。
送信者のメールアドレス情報は、「name="Reply-To:"」で取得します。

<form action="http://iswbmail.infoseek.co.jp/mail/form.cgi" method="post">
<input type="hidden" name="thankyou" value="http://members.at.infoseek.co.jp/ID/thankyou.htm">
<input type="hidden" name="Subject:" value="Contact">
Name: <input type="text" name="Name" size="30" maxlength="30"><br>
Mail: <input type="text" name="Reply-To:" size="30" maxlength="70">
<input type="submit" name="submit" value="送  信">
<input type="reset" name="reset" value="リセット">