メール・フォーム

　メールの送信に関するHTMLの項目をまとめると次のようになります。 　下記の例では、enctype(document.form.encoding) を JavaScript の関数内で指定しています。なお、受け取ったデータは、"name（要素のname属性値） = value（要素の値）" の形で表示されます。

// JavaScript ソース
function SendMail() {
   document.form1.encoding = "text/plain";
}

<!-- HTML ソース -->
<form name="form1"method="post" action="mailto:morijoh@sasaraan.net" 
        onsubmit="SendMail()">
    内容を記入して送信ボタンを押してください。<br>
    <textarea name="text1" style="width:30em; height:10em; margin:1ex 0;">
         これはサンプルです。
        下の送信ボタンを押しても送信されません。
   </textarea><br>
    <input type="submit" value="　送 信　" >
</form>	

---

・内容を記入して送信ボタンを押してください。
　これはサンプルです。 　下の送信ボタンを押しても送信されません。

・送信結果　（差出人の値は加工しています）

　タイトルや件名などで、ユーザー入力に頼らなくてよいものは、hidden 要素使って項目を付加することができます。hidden 要素はユーザー側には表示されないので、自分だけに分かる値を自由に設定することが可能となります。ここでは、件名の設定と、どのページから送られたかがわかるように、ページのタイトル情報を付加して送信するようにしています。

// JavaScript ソース
function SendMail() {
    document.form2.method = "post";
    document.form2.action = "mailto:morijoh@sasaraan.net?subject=JavaScript-Page";
    document.form2.encoding = "text/plain";
    document.form2.title2.value = document.title;
}

<!-- HTML ソース -->
<form name="form2" onsubmit="SendMail()">
    ・内容を記入して送信ボタンを押してください。<br>
    <textarea name="text2" style="width:30em; height:4em; margin:1ex 0;">
        これはサンプルです。
        下の送信ボタンを押しても送信されません。
    </textarea>
    <input type="hidden" name="title2" >
    <br><input type="submit" value="　送 信　">
</form>	

---

・内容を記入して送信ボタンを押してください。
　これはサンプルです。 　下の送信ボタンを押しても送信されません。

・送信結果　（件名の値とタイトルが追加されている）

下記のサンプルでは、必須項目をつくって、記述がなければメールを送れないようにしています。このためには、form 要素の onsubmit イベントハンドラに false を指定するようにします。ここでは、エラー時の関数の値を false にすることでメールの送信を中止させています。

// JavaScript ソース

// 送信内容のチェック
function CheckMail() {
    var strError = "";        // エラー文字列
    if (document.MailMe.Sender.value == "") {
        strError += "エラー : お名前を記入してください。\n";
    }
    if (document.MailMe.Message.value == "") {
        strError += "エラー : メッセージを記入してください。\n";
    }
    if (document.MailMe.MailAd.value != "" &&
            !CheckAddress(document.MailMe.MailAd.value)) {
        strError += "エラー : メールアドレスが正しくありません。";
    }
    if (strError != "") {        /* エラー時はfalseを返して送信を中止 */
        alert(strError);
        return false;
    }
    document.MailMe.encoding = "text/plain";
    document.MailMe.Page.value = document.title;
    if (document.MailMe.Subject.value != "") {
        document.MailMe.action += "?subject=" + document.MailMe.Subject.value;
    }
    return true;
}

// メールアドレスのチェック
function CheckAddress(mail_value) {
    var regex = /.+@.+\..+/;
    if (!mail_value.match(regex)) return false;
    return true;
} 

<!-- HTML ソース -->

<form name="MailMe" 
        metod="post" 
        action="mailto:morijoh@sasaraan.net"
        onsubmit="return CheckMail()">
    <input type="hidden" name="Page" >
    [ 内容を記入して送信ボタンを押してください ]<br>
    お名前 : <input type="text" name="Sender" style="width:320px"> *必須<br>
    件　名 : <input type="text" name="Subject" style="width:320px"> *省略可<br>
    E-MAIL : <input type="text" name="MailAd" style="width:320px"> *省略可
    <textarea name="Message" style="width:480px; height:4em; margin:1ex 0;">
　これはサンプルです。
　下の送信ボタンを押しても送信されません。
    </textarea><br>
    <input type="submit" value="　送 信　" >
</form>	

　また、件名については記入があれば設定し、なければ省略するようにしています。
　さらに、メールアドレスのチェックも簡単ですが行っています。このような正規表現を使ったチェック方法については、"文字列のチェック" のページを参照してください。

---

[ 内容を記入して送信ボタンを押してください ]
お名前 : *必須
件　名 : *省略可
E-MAIL : *省略可 　これはサンプルです。 　下の送信ボタンを押しても送信されません。